您的位置：首页 > Web前端 > JQuery

Jquery动态增加行和删除行的操作

2017-01-05 11:20 399 查看

<html>

<head>

<title>

</title>

<script src="http://192.168.1.11/skin/js/jquery.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">

var row_count = 0;

function addNew()

{

row_count++;

var table1 = $('#table1');

var firstTr = table1.find('tbody>tr:first');

var row = $("<tr></tr>");

var td = $("<td>"+row_count+"</td>");

td.append($("<input type='checkbox' name='count' value='New'>"));

td.append("<input type='text' name='count'+row_count >") ;

td.append("<input type='button' value='删除' onclick='delRow(this)'>") ;

row.append(td);

table1.append(row);

}

function delRow(obj)

{

$(obj).parent().remove();

}

function del()

{

var checked = $("input[type='checkbox'][name='count']");

$(checked).each(function(){

if($(this).attr("checked")==true) //注意：此处判断不能用$(this).attr("checked")==‘true'来判断。

{

$(this).parent().parent().remove();

}

});

}

</script>

</head>

<body>

<input type="button" value="添加" onclick="addNew();">

<input type="button" value="删除" onclick="del();">

<div id="rightcontent">

<table id="table1" cellspacing="3" cellpadding="3" border="1">

<tbody>

<tr>

<th>

增加一行动态操作

</th>

</tr>

</tbody>

</table>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航