abstrait：在學(xué)習(xí)過程中遇到了這個(gè)利用JQuery對(duì)表格行的增加和刪除，特記錄下來以供初學(xué)者參考。下面是主要的代碼：<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>zengjia he&nbs
在學(xué)習(xí)過程中遇到了這個(gè)利用JQuery對(duì)表格行的增加和刪除，特記錄下來以供初學(xué)者參考。
下面是主要的代碼：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>zengjia he shancu </title>
<meta charset="utf-8" />
<script src="../jsPanel-3.5.0/jquery-3.1.1.min.js"></script>
<script src="../DataTables/js/js/jquery.dataTables.min.js"></script>
<link href="../DataTables/js/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$("#table").DataTable()
});
var i = 0;
//添加行
function addRow() {
i++;
var rowTem = '<tr class="tr_' + i + '">'
+ '<td><input type="Text" id="txt' + i + '" /></td>'
+ '<td><input type="Text" id="pwd' + i + '"/></td>'
+ '<td><a href="#" onclick=delRow('+i+') >刪除</a></td>'
+ '</tr>';
//var tableHtml = $("#table tbody").html();
// tableHtml += rowTem;
$("#table tbody:last").append(rowTem);
// $("#table tbody").html(tableHtml);
}
//刪除行
function delRow(_id) {
$("#table .tr_"+_id).hide();
i--;
}
//進(jìn)行測試
function ceshi() {
var str1 = '';
for( var j=1;j<=i;j++){
var str = $("#" + "txt" + j).val();
str1 += str;
}
alert(str1);
}
</script>
</head>
<body>
<div style="width:500px">
<table id="table" border="1" width="500px" class="display hover cell-border border-blue-1" >
<tr width="150px">
<th width="70px">用戶名</th>
<th width="70px">密碼</th>
<th width="30px">操作</th>
</tr>
</table>
</div>
<input type="button" value="添加行" onclick="addRow();" />
<input type="button" value="測試數(shù)據(jù)" onclick="ceshi();" />
</body>
</html>運(yùn)行的截圖如下：
更多關(guān)于利用JQuery實(shí)現(xiàn)datatables插件的增加和刪除行功能請關(guān)注PHP中文網(wǎng)（ipnx.cn）其他文章！