用JQUERY增删元素的代码
用JQUERY增删元素的代码
发布时间:2016-12-30 来源:查字典编辑
摘要:用JQUERY增删元素JQuery有增加和删除元素的方法。主要分为内部插入,外部插入,包裹,替换,删除。内部插入主要方法:append(co...

用JQUERY增删元素

JQuery有增加和删除元素的方法。

主要分为内部插入,外部插入,包裹,替换,删除。

内部插入主要方法:

append(content) 向每个匹配的元素内部追加内容。

prepend(content) 向每个匹配的元素内部前置内容。

外部插入:

after(content) 在每个匹配的元素之后插入内容。

before(content) 在每个匹配的元素之前插入内容。

删除:

empty() 删除匹配的元素集合中所有的子节点。

remove([expr]) 从DOM中删除所有匹配的元素。

下面的例子是点击增加按钮表格就会在最后一行插入新的一行

再点击删除按钮删除最后一行

用JQUERY增删元素的代码1

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>表格元素增删</title>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">

body{ font-size:12px;}

</style>

<script type="text/javascript">

/* 添加预测 */

function add_tr() {

$("#table1").append("<tr>" + $("#table1 tr").eq(0).html() + "</tr>");

}

/* 删除预测 */

function remove_tr() {

//alert($("#table1 tr").last().html());

if ($("#table1 tr").size() > 1) {

$("#table1 tr:last-child").remove();

}

else

alert("这是最后一行,无法再删除");

}

</script>

</head>

<body align='center'>

<center>

<table id='table1'>

<tr>

<td width='150'>第一格</td>

<td width='250'><input type='text'/></td>

</tr>

</table>

<br/>

<input type='button' value='增加一行' onclick='add_tr()' />

<input type='button' value='删除最后一行' onclick='remove_tr()' />

</center>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类