<!doctype html> <html> <head> <meta charset="utf-8"> <title>动态添加表格及获取表格中数据-www.wangdahai.cn</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> table { border-collapse:collapse; } table,td,th { border:1px solid black; } </style> </head> <body> <table id="table" width="70%" cellspacing="0" style="border: 1px solid"> <thead> <tr> <th width="5%" style="text-align: center;"><input id="allCkb" type="checkbox"></th> <th width="45%" style="text-align: center">第一列</th> <th width="50%" style="text-align: center">第二列</th> </tr> </thead> <tbody id="tbody"> <tr> <td style="text-align: center"><input type="checkbox" name="ckb"></td> <td encreq="false" contenteditable="true" style=" word-break: break-word; word-wrap: break-word;"></td> <td encreq="false" contenteditable="true" style=" word-break: break-word; word-wrap: break-word;"></td> </tr> </tbody> </table> <p align="right" style="margin-top: 10px;margin-right: 30px"><input type="button" class="btn-primary" onclick="addTr2('table', -1)" value="添加一行"> <input type="button" class="btn-default" onclick="delTr2()" value="删除一行"></p> <p align="right" style="margin-top: 10px;margin-right: 30px"><input type="button" class="btn-primary" onclick="getTableData()" value="获取表格数据"></p> <script> function addTr(table, row, trHtml) { //获取table最后一行 $("#table tr:last") //获取table第一行 $("#table tr").eq(0) //获取table倒数第二行 $("#tab tr").eq(-2) var $tr = $("#" + table + " tr").eq(row); if ($tr.size() == 0) { alert("指定的table id或行数不存在!"); return; } $tr.after(trHtml); } function delTr(ckb) { //获取选中的复选框,然后循环遍历删除 var ckbs = $("input[name=" + ckb + "]:checked"); if (ckbs.size() == 0) { alert("要删除指定行,需选中要删除的行!"); return; } ckbs.each(function() { $(this).parent().parent().remove(); }); } /** * 全选 * * allCkb 全选复选框的id * items 复选框的name */ function allCheck(allCkb, items) { $("#" + allCkb).click(function() { $('[name=' + items + ']:checkbox').attr("checked", this.checked); }); } ////////添加一行、删除一行测试方法/////// $(function() { //全选 allCheck("allCkb", "ckb"); }); function addTr2(table, row) { var trHtml = "<tr><td style=\"text-align: center\"><input type='checkbox' name='ckb'/></td><td encreq=\"false\" contenteditable=\"true\" style=\" word-break: break-word; word-wrap: break-word;\"></td><td encreq=\"false\" contenteditable=\"true\" style=\" word-break: break-word; word-wrap: break-word;\"></td></tr>"; addTr(table, row, trHtml); } function delTr2() { delTr('ckb'); } //获取表格数据 ****************************************** function getTableData() { var arr = new Array(); var trList = $("#tbody").children("tr"); for (var i = 0; i < trList.length; i++) { var json = {}; var tdArr = trList.eq(i).find("td"); json.roiName = tdArr.eq(1).text(); json.roiInfo = tdArr.eq(2).text(); if (json.roiName == "" || json.roiInfo == "") { alert("预期ROI信息不能为空"); return; } else { arr.push(json); } alert("第" + (i + 1) + "行第一列的值:" + json.roiName + "; 第" + (i + 1) + "行第二列的值:" + json.roiInfo); } return arr; } </script> </body> </html>
jquery表格的增删改查
本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » jquery表格的增删改查
评论前必须登录!
注册