js 表格动态增加行通用函数
浏览数：48 /
时间：2015年06月09日
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
td{height:30px;border:1px solid #000;}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; " id="modifytable1">
<tbody>
<tr>
<td>日期</td><td>时间</td><td>登记人</td>
</tr>
<tr>
<td>日期</td><td>时间</td><td>登记人</td>
</tr>
<tr>
<td>日期1</td><td>时间</td><td>登记人</td>
</tr>
</tbody>
</table>
<button onclick="addRow(this)" >添加1</button>
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; " id="modifytable2">
<tbody>
<tr>
<td>日期</td><td>时间</td><td>登记人</td>
</tr>
<tr>
<td>日期</td><td>时间</td><td>登记人</td>
</tr>
<tr>
<td>日期2</td><td>时间</td><td>登记人</td>
</tr>
</tbody>
</table>
<button onclick="addRow(this)" >添加2</button>
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; " id="modifytable3">
<tbody>
<tr>
<td>日期</td><td>时间</td><td>登记人</td>
</tr>
<tr>
<td>日期</td><td>时间</td><td>登记人</td>
</tr>
<tr>
<td>日期3</td><td>时间</td><td>登记人</td>
</tr>
<tr>
<td>日期4</td><td>时间</td><td>登记人</td>
</tr>
<tr>
<td>日期5</td><td>时间</td><td>登记人</td>
</tr>
</tbody>
</table>
<button onclick="addRow(this)" >添加2</button>
<script>
function addRow(obj){
var td_i = 0;
var td_str = ‘‘;
td_i = $(obj).prev().children().children().last().children().length;
console.log(td_i);
for (var i = 0; i < td_i; i++) {
td_str = td_str + ‘<td></td>‘;
};
td_str = ‘<tr>‘ + td_str + ‘</tr>‘;
$(obj).prev().children().children().last().after(td_str);
td_str = ‘‘; td_i = 0;
}
</script>
</body>
</html>
删除(按钮在表格行内)：
function deleterowok(obj){
$(obj).closest("tr").remove();
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
