Js实现动态添加删除行

2023-09-03 12:46| 来源: 网络整理| 查看: 265

做了一个Js实现Table动态添加一行的小例子。

实现功能：

1.可以根据自己的需求，动态的添加行。

2.点击按钮，添加了三行，如图二。

填充数据，如图三：

3.点击按钮，将Table中的数据保存在下面的新的Table中，如图四：

下面我们就来看一下具体用代码怎么来实现吧！

1）页面布局代码如下：

1 2 3 4 5 6 申报部门 7 街镇 8 路段名称 9 起止路名 10 操作 11 12 13 14 15 16 三林城管署 17 港城城管署 18 惠南城管署 19 金桥城管署 20 陆家嘴城管办 21 川沙城管署 22 23 24 25 26 27 28 29 30 31 32 -- 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 申报部门 54 55 56 街镇 57 58 59 路段名称 60 61 62 起止路名 63 64 65 操作 66 67 68 69 70 View Code

2）JS实现功能，JS代码如下：

1 2 3 4 //声明全局变量 5 var formvalue = ""; 6 var flag = 1; 7 var index=1; 8 var firstCell = ""; 9 var secondCell = ""; 10 var thirdCell = ""; 11 var fourthCell = ""; 12 13 $(function() { 14 //初始化第一行 15 firstCell = $("#row0 td:eq(0)").html(); 16 secondCell = $("#row0 td:eq(1)").html(); 17 thirdCell = $("#row0 td:eq(2)").html(); 18 fourthCell = $("#row0 td:eq(3)").html(); 19 }); 20 21 //-----------------新增一行-----------start--------------- 22 function insertNewRow() { 23 //获取表格有多少行 24 var rowLength = $("#orderTable tr").length; 25 //这里的rowId就是row加上标志位的组合。是每新增一行的tr的id。 26 var rowId = "row" + flag; 27 28 //每次往下标为flag+1的下面添加tr,因为append是往标签内追加。所以用after 29 var insertStr = "" 30 + "" + firstCell + "" 31 + "" + secondCell + "" 32 + "" + thirdCell + "" 33 + "" + fourthCell + "" 34 + ""; 35 +""; 36 //这里的行数减2，是因为要减去底部的一行和顶部的一行，剩下的为开始要插入行的索引 37 $("#orderTable tr:eq(" + (rowLength - 2) + ")").after(insertStr); //将新拼接的一行插入到当前行的下面 38 //为新添加的行里面的控件添加新的id属性。 39 $("#" + rowId + " td:eq(0)").children().eq(0).attr("id", "UrbanDepNo" + flag); 40 $("#" + rowId + " td:eq(1)").children().eq(0).attr("id", "LocNo" + flag); 41 $("#" + rowId + " td:eq(2)").children().eq(0).attr("id", "RoadSectionName" + flag); 42 $("#" + rowId + " td:eq(3)").children().eq(0).attr("id", "StStartRoad" + flag); 43 $("#" + rowId + " td:eq(3)").children().eq(1).attr("id", "EndRoad" + flag); 44 //每插入一行，flag自增一次 45 flag++; 46 }

如果新增行多了，我们想把多余的行删除，点击新增行的操作列的按钮，实现删除一行。JS代码实现如下：

//-----------------删除一行，根据行ID删除-start-------- function deleteSelectedRow(rowID) { if (confirm("确定删除该行吗？")) { $("#" + rowID).remove(); } }

2）将添加的Table中的数据保存到一个新的Table表中。首先我们要先获取Table中的数据，JS代码如下：

//-----------------获取表单中的值----start-------------- function GetValue() { var value = ""; $("#orderTable tr").each(function(i) { if (i >= 1) { $(this).children().each(function(j) { if ($("#orderTable tr").eq(i).children().length - 1 != j) { value += $(this).children().eq(0).val() + "," //获取每个单元格里的第一个控件的值 if ($(this).children().length > 1) { value += $(this).children().eq(1).val() + "," //如果单元格里有两个控件，获取第二个控件的值 } } }); value = value.substr(0, value.length - 1) + "#"; //每个单元格的数据以“，”分割，每行数据以“#”号分割 } }); value = value.substr(0, value.length); ReceiveValue(value); // $("#formvalue").val(value); // $("formvalue").submit(); } //-------------------接收表单中的值----------------------------- function ReceiveValue(str) { var Str = str.split('#'); if (Str[0] != "") { for (var i = 0; i < Str.length - 1; i++) { var value = Str[i].split(','); var dept = value[0]; var street = value[1] var section = value[2]; var Broad = value[3]; var Eroad = value[4]; insertTable(dept, street, section, Broad, Eroad); $("input[type='text']").val(""); $("select[name='UrbanDepNo']").val("0"); } } } //---------------将表单中的数据添加到新表中--------------------- function insertTable(dept, street, section, Broad, Eroad) { var department = ""; switch (dept) { case "1": department = "三林城管署"; break; case "2": department = "港城城管署"; break; case "3": department = "惠南城管署"; break; case "4": department = "金桥城管署"; break; case "5": department = "陆家嘴城管办"; break; case "6": department = "川沙城管署"; break; default: break; } //将接收到数据添加到新表TableInfo中。 $('#TableInfo').append("" + department + " " + street + "" + section + " " + Broad + "-" + Eroad + " 删除");　 index++; }

添加成功之后。我们也可以对新的列表中的数据进行删除操作。JS代码如下：

//----------新表中的删除方法----------- function deltr(index) { if (confirm("确定删除吗?")) { $("tr[id='" + index + "']").remove(); } }

OVER!

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章