<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>动态添加表格行、列</title>
<style type="text/css">
table.table {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.table th {
border-width: 1px;
padding: 8px;
border-style: solid;
font-size: 14px;
border-color: #666666;
background-color: #dedede;
line-height: 20px;
}
table.table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
line-height: 18px;
}
</style>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
<th>列6</th>
<th>列7</th>
</tr>
</thead>
<tbody id="trlist">
<tr>
<td><input type="checkbox" name="checkbox" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><button class="removeClass">删除</button></td>
</tr>
</tbody>
</table>
<div>
<input type="button" id="addrow" value="新增" />
<input type="button" id="removerow" value="删除" />
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// 绑定添加事件
$("#addrow").click(addRow);
// 绑定删除事件。
$("#removerow").click(removeMultipleRows);
$('#trlist').on('click','.removeClass',function(){
removeSingleRow(this);
})
});
// 获取默认的一行tr,用作复制
var trlisthtml = $("#trlist").html();
/**
* 增加
*/
function addRow() {
// 向tbody最后添加一行tr.
$(".table>tbody:last").append(trlisthtml);
}
/**
* 移除单行
*/
function removeSingleRow(that) {
// 移除当前行 that 的父级是td,td的父级是tr,然后删除tr就ok了
$(that).parent().parent().remove();
}
/**
* 移除多行
*/
function removeMultipleRows() {
// 移除当前行 checkbox的父级是td,td的父级是tr,然后删除tr。就ok了。用each,选择多行遍历删除
$('input[name="checkbox"]:checked').each(function() {
$(this).parent().parent().remove();
});
}
</script>
</body>
</html>
-----------------------------------------------------------------------------
on()方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)
$('#trlist').on('click','.removeClass',function(){
removeSingleRow(this);
})
on前面的这个#trlist一定要是html中存在的,静态的,否则点击事件触发不了
".removeClass"是动态加载出来的内容,它的class=".removeClass"
on方法在什么条件下都是成立的
用jquery:为动态加载的元素添加点击事件其实也可以用
$(".removeClass").click(function(){
});
只不过是有限制的,这个点击事件要和动态加载的内容在同一作用域中才行