jquery实现表格行与列的动态增加和删除
实现动态增加 删除最后一行与最后一列,获取表格内填写的 input 数据。
具体功能都已经添加按钮到页面上显示
HTML 代码
<input type="button" id="addrow" value="增加一行"> <input type="button" id="detrow" value="删除一行"> <input type="button" id="addcol" value="增加一列"> <input type="button" id="detcol" value="删除一列"> <input type="button" id="getstr" value="获取内容"> <input type="button" id="getstrJson" value="获取 json"> <p> </p> <table id="table"> <tbody> <tr> <td><span>0</span>至<input value="10" style="width:50%"></td> <td><input value="20"></td> <td><input value="30"></td> <td><input value="40"></td> </tr> </tbody> </table>
CSS 代码
* { margin: 0; padding: 0; border: 0; } table { width: 100%; margin: 20px auto; border-collapse: collapse; } table tr td { border: 2px solid rosybrown; height: 32px; } table tr td input { width: 100%; height: 100%; } #addrow,#detrow,#addcol,#detcol,#getstr,#getstrJson { display: block; line-height: 40px; font-family: "Arial Black"; background: #808000; width: 100px; margin: 20px auto; margin-left: 20px; border: 2px solid black; box-shadow: 3px 3px 5px #b9b9b9; float: left; }
jquery 代码
$(document).ready(function() { //增加一行 $("#addrow").click(function() { var tdAmt = $("tbody tr:last-child input").val(); if (tdAmt != '') { //克隆上一行 $("tbody tr:last-child").clone().appendTo("#table tbody"); //将上一行区间数据赋值 $("#table tbody tr:last").find("span").html(tdAmt); //将行尾克隆的值清空 $("#table tbody tr:last").find(":input").val(''); } else { alert("上一行区间金额不允许空"); } }); //删除一行 $("#detrow").click(function() { var index = $("#table tr:last-child").index(); if (index > 0) { $("#table tr:last-child").remove(); } else { alert("表格第一行不能删除!"); return false; } }); //增加一列 $("#addcol").click(function() { var tr = $("#table tr"); //所有 tr 元素 tr.each(function(index) { $(this).append("<td><input /></td>") }) }); //删除一列 $("#detcol").click(function() { var colTable = $("#table").find("tr"); var trLen = colTable.eq(0).find("td").length; //列数 colTable.each(function(i) { if (trLen > 1) { colTable.eq(i).find("td").eq(0).remove(); } else { alert("表格第一列不能删除!"); return false; } }); }); //获取字符串内容 $("#getstr").click(function() { var str = ""; var trLen = $("#table tbody tr").length; for (var i = 0; i < trLen; i++) { var tr = $("#table tbody").find("tr").eq(i); //获取每一行 tr var tdLen = $(tr).find("td").length; for (var j = 0; j < tdLen; j++) { td = $(tr).find("td input").eq(j); //获取每行 td var dir = $(tr).find("input").eq(j).val(); str = str + dir + "," } str = str + "|" //换行 } alert(str); }); //获取 Json 内容 $("#getstrJson").click(function() { var jsonStr = "{["; $('#table tbody').find('tr').each(function(id) { jsonStr += "{"; $(this).find('td').each(function() { $(this).find('input').each(function() { //获取 td 中 input 的值 jsonStr += "\"td" + id + "\":\"" + $(this).val() + "\","; }) }) jsonStr = jsonStr.substring(0, jsonStr.length); jsonStr += "},"; }) jsonStr = jsonStr.substring(0, jsonStr.length); jsonStr += "]}"; alert(jsonStr); }); //监控第一列 input 值变化 });
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » jquery实现表格行与列的动态增加和删除
码云笔记 » jquery实现表格行与列的动态增加和删除