有时候会遇到类似的增加删除行的功能,如果不用插件之类的,手写的话,还要百度找攻略:
方法比较多,讲自己用的2个方法:
下面是测试页面:
<!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>
</tr>
</thead>
<tbody id="trlist">
<tr id="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>
</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>
</body>
</html>
一、直接在表格后添加一行:
将js放入jquery后面。 这个是直接加载页面的时候。用js获取到tr的document文本,然后直接在tr后面直接添加。
关于添加行的位置,可以用insertBefore,insertAfter,after,appendTo等,jquery的方法,看需求自己定。想在哪里添加行都可以。
<script type="text/javascript">
$(function(){
$("#addrow").click(addrow);//绑定添加事件
$("#removerow").click(removerow);//绑定删除事件。
});
var trlisthtml = $("#trlist").html();//获取默认的一行tr,用作复制
function addrow(){//增加
$(".table>tbody:last").append(trlisthtml);//向tbody最后添加一行tr.
}
function removerow(){//移除
$('input[name="checkbox"]:checked').each(function(){
$(this).parent().parent().remove();//移除当前行 checkbox的父级是td,td的父级是tr,然后删除tr。就ok了。用each,选择多行遍历删除
});
}
</script>
二、用jquery的clone方法:
方法都是很简单的,但是有时候想不到。每写一个方法,就会发现一个新方法。越优化,越舒服。
<script type="text/javascript">
$(function(){
$("#addrow").click(cloneaddrow);//绑定添加事件
$("#removerow").click(removerow);//绑定删除事件。
});
function cloneaddrow(){
$(".table>tbody:last").append($("#tr").clone());//复制tr,并且添加
}
function removerow(){//移除
$('input[name="checkbox"]:checked').each(function(){
$(this).parent().parent().remove();//移除当前行 checkbox的父级是td,td的父级是tr,然后删除tr。就ok了。用each,选择多行遍历删除
});
}
</script>
只是2个方法的应用。有时候很多需求看似简单,但如果不是非常熟悉,或者经常写,就会被卡住,会耽误一些时间。记录下来,以后可以使用。
多写代码,优化是条没有尽头的路
有不对的,望指点。每次写完,都担心怕误了谁家子弟。。。