转载收藏于:https://www.cnblogs.com/zhangqs008/archive/2013/05/09/3618459.html
<head>
<title>jquery表格操作</title>
<script language="javascript" src="jquery.table.tr.js"></script>
<style type="text/css">
table
{
border: black solid 1px;
border-collapse: collapse;
}
td
{
border: black solid 1px;
padding: 3px;
}
.td_Num
{
width: 60px;
text-align: center;
}
.td_Item
{
width: 160px;
text-align: center;
}
.td_Oper
{
width: 120px;
text-align: center;
}
.td_Oper span
{
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr>
<td class='td_Num'>
序号
</td>
<td class='td_Item'>
步骤名称
</td>
<td class='td_Item'>
步骤描述
</td>
<td class='td_Oper'>
相关操作 <a href="#" onclick="add_line();">添加</a>
</td>
</tr>
</table>
<table id="content">
</table>
<input type="button" value="提交数据" id="btnSubmit" onclick="SaveData()" />
</body>
</html>
<script type="text/javascript">
var currentStep = 0;
var max_line_num = 0;
//添加新记录
function add_line() {
max_line_num = $("#content tr:last-child").children("td").html();
if (max_line_num == null) {
max_line_num = 1;
}
else {
max_line_num = parseInt(max_line_num);
max_line_num += 1;
}
$('#content').append(
"<tr id='line" + max_line_num + "'>" +
"<td class='td_Num'>" + max_line_num + "</td>" +
"<td class='td_Item'><input type='text' class='stepName' value='步骤名称" + max_line_num + "'></input></td>" +
"<td class='td_Item'><input type='text' class='stepDescription' value='步骤描述" + max_line_num + "'></td>" +
"<td class='td_Oper'>" +
"<span onclick='up_exchange_line(this);'>上移</span> " +
"<span onclick='down_exchange_line(this);'>下移</span> " +
"<span onclick='remove_line(this);'>删除</span> " +
"</td>" +
"</tr>");
}
//删除选择记录
function remove_line(index) {
if (index != null) {
currentStep = $(index).parent().parent().find("td:first-child").html();
}
if (currentStep == 0) {
alert('请选择一项!');
return false;
}
if (confirm("确定要删除改记录吗?")) {
$("#content tr").each(function () {
var seq = parseInt($(this).children("td").html());
if (seq == currentStep) { $(this).remove(); }
if (seq > currentStep) { $(this).children("td").each(function (i) { if (i == 0) $(this).html(seq - 1); }); }
});
}
}
//上移
function up_exchange_line(index) {
if (index != null) {
currentStep = $(index).parent().parent().find("td:first-child").html();
}
if (currentStep == 0) {
alert('请选择一项!');
return false;
}
if (currentStep <= 1) {
alert('已经是最顶项了!');
return false;
}
var upStep = currentStep - 1;
//修改序号
$('#line' + upStep + " td:first-child").html(currentStep);
$('#line' + currentStep + " td:first-child").html(upStep);
//取得两行的内容
var upContent = $('#line' + upStep).html();
var currentContent = $('#line' + currentStep).html();
$('#line' + upStep).html(currentContent);
//交换当前行与上一行内容
$('#line' + currentStep).html(upContent);
$('#content tr').each(function () { $(this).css("background-color", "#ffffff"); });
$('#line' + upStep).css("background-color", "yellow");
event.stopPropagation(); //阻止事件冒泡
}
//下移
function down_exchange_line(index) {
if (index != null) {
currentStep = $(index).parent().parent().find("td:first-child").html();
}
if (currentStep == 0) {
alert('请选择一项!');
return false;
}
if (currentStep >= max_line_num) {
alert('已经是最后一项了!');
return false;
}
var nextStep = parseInt(currentStep) + 1;
//修改序号
$('#line' + nextStep + " td:first-child").html(currentStep);
$('#line' + currentStep + " td:first-child").html(nextStep);
//取得两行的内容
var nextContent = $('#line' + nextStep).html();
var currentContent = $('#line' + currentStep).html();
//交换当前行与上一行内容
$('#line' + nextStep).html(currentContent);
$('#line' + currentStep).html(nextContent);
$('#content tr').each(function () { $(this).css("background-color", "#ffffff"); });
$('#line' + nextStep).css("background-color", "yellow");
event.stopPropagation(); //阻止事件冒泡
}
//保存数据
function SaveData() {
var data = "<root>";
$('#content tr').each(function () {
data += "<item>";
var stepName = $(this).find("td:eq(1)").find("input").val();
var stepDescription = $(this).find("td:eq(2)").find("input").val();
data += " <stepName>" + stepName + "</stepName>";
data += " <stepDescription>" + stepDescription + "</stepDescription>";
data += "<item>";
});
data += "</root>";
alert(data);
}
</script>
- Word:表格前添加新行 + 删除表格后的空行
本文适用于Word 2007 + Windows 7,造冰箱的大熊猫@cnblogs 2018/8/3 近日新学(百度到)两条新Word操作,记录下来以备查询 1.在表格前添加新行 场景:有没有遇到过 ...
- ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...
- 一个word文档中,多个表格的批量调整(根据窗口调整表格和添加表格水平线)
Sub 自动调整所有表格() ' ' 自动调整所有表格 宏 ' 'Application.Browser.Target = wdBrowseTable For i = 1 To ActiveDocum ...
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- JQuery实现表格动态增加行并对新行添加事件
实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...
- JQuery动态添加表格,然后动态删除不成功问题
背景: 自己做了一个测试网页,想动态添加表格,然后删除,按照网上的教程写完,发现点击"删除参数"按钮没用 源码: function addtr() { var trinfo = & ...
- jQuery动态添加表格1
用jquery的append方法在指定行的后面新增一行tr,会把新增的行的html追加到指定行的html里面 content +="<tr><td>123</t ...
- 基于jquery的表格动态创建,自动绑定,自动获取值
最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...
- jQuery动态添加删除与添加表行代码
具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...
- js如何实现动态的在表格中添加和删除行?(两种方法)
js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...
随机推荐
- 基于Socket的Winform例子
一.直接上效果图 二.Socket握手 三.服务端 Thread threadWatch = null;// 负责监听客户端的线程 Socket socketWatch = null;// 负责监听客 ...
- Repeater控件使用小结持续更新
Repeater嵌套Repeater绑定数据 前台代码 <!--注意层级关系不要写错了--> <asp:Repeater ID="rpGroup" runat=& ...
- JQuery事件绑定,bind与on区别
jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...
- java中不同类如何相互访问变量值(新手见解,可能很low)
最近在学基础java知识,这个是很常见的问题之一了,下面我要列出三种异类取值方法,当然不止这些,我选择了最简单的三种: 1.可以使用static静态变量,直接调用要访问类的属性和方法.因为 Java ...
- GRpc-Go使用笔记
linux下配置GRpc-golang 1.git中下载protobuf包 2.解压(/usr/local/protobuf) unzip protobuf-cpp-3.0.0-alpha-3.z ...
- activity_note
在activiti任务中,主要分为两大类查询任务(个人任务和组任务): 1.确切指定了办理者的任务,这个任务将成为指定者的私有任务,即个人任务. 2.无法指定具体的某一个人来办理的任务,可以把任务分配 ...
- HDU 1009 FatMouse' Trade【贪心】
解题思路:一只老鼠共有m的猫粮,给出n个房间,每一间房间可以用f[i]的猫粮换取w[i]的豆,问老鼠最多能够获得豆的数量 sum 即每一间房间的豆的单价为v[i]=f[i]/w[i],要想买到最多的豆 ...
- BZOJ 2820: YY的GCD 莫比乌斯反演_数学推导_线性筛
Code: #include <cstdio> #include <algorithm> #include <cstring> #include <vecto ...
- C语言基本语法——指针
1.什么是指针 2.指针用于参数 3.指针用于返回值 4.指针加减操作 5.指针与数组区别 1.什么是指针 • 内存被分为字节,每个字节有唯一的地址,指针指的就是内存地址. • 保存指针的变量,就叫指 ...
- LAMP自动安装脚本
#!/bin/bash # 功能描述:LAMP自动安装脚本 # 初始化 if [ "$(cat /etc/system-release | awk '{print $(NF-1)}' | a ...