dom的增删改
内部插入:
1.appendTo() 如a.appendTo(b) 把a插入到b字元素的末尾,从而成为最后一个元素
2.prependTo() 如a.prependTo(b) 把a插入到b所有元素前面,成为第一个子元素
外部插入:
1. insertAfter (): 如a.insertAfter(b) 得到ba
2.insertBefore() 如a.insertBefore(b) 得到ab
替换:
1.replaceWith() 如a.replaceWith(b) 用b替换第一个a
2.replaceAll() 如a.replaceAll(b) 用b替换所有的a
删除:
1.remove() 如a.remove(); 删除a标签
2.empty() 如a.empty(); 情况a标签里的内容
使用方法:
appendTo():
prependTo():
insertAfter ():
insertBefore():
replaceWith() :
replaceAll():
remove():
empty():
练习从左到右和从右到左
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> select { width: 100px; height: 140px; } div { width: 130px; float: left; text-align: center; } </style> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> //页面加载完成之后 $(function (){ //第一个按钮(选择按钮到右边) $("button:eq(0)").click(function (){ $("select:eq(0) option:selected").appendTo($("select:eq(1)")); }); //第二个按钮(全部添加到右边) $("button:eq(1)").click(function (){ $("select:eq(0) option").appendTo($("select:eq(1)")); }); //第三个按钮(选中删除到左边) $("button:eq(2)").click(function (){ $("select:eq(1) option:selected").appendTo($("select:eq(0)")); }); //第四个按钮(全部删除到左边) $("button:eq(3)").click(function (){ $("select:eq(1) option").appendTo($("select:eq(0)")); }); }); </script> </head> <body> <div id="left"> <select multiple="multiple" name="sel01"> <option value="opt01">选项1</option> <option value="opt02">选项2</option> <option value="opt03">选项3</option> <option value="opt04">选项4</option> <option value="opt05">选项5</option> <option value="opt06">选项6</option> <option value="opt07">选项7</option> <option value="opt08">选项8</option> </select> <button>选中添加到右边</button> <button>全部添加到右边</button> </div> <div id="rigth"> <select multiple="multiple" name="sel02"> </select> <button>选中删除到左边</button> <button>全部删除到左边</button> </div> </body> </html>
动态添加和删除行记录
相关代码:
<!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=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="styleB/css.css" /> <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script> <script type="text/javascript"> //设置加载后,完成 $(function (){ //给submit按键绑定单击事件 $("#addEmpButton").click(function (){ //获取输入框中的姓名、邮箱、工资的内容 var name = $("#empName").val(); var email = $("#email").val() ; var salary = $("#salary").val(); //创建一个行标签对象,添加到显示数据的表格中 var $data = $("<td>" + name+ "</td>\n" + "\t\t\t<td>" + email + "</td>\n" + "\t\t\t<td>" + salary + "</td>\n" + "\t\t\t<td><a href=\"deleteEmp?id=002\">Delete</a></td>"); //添加到显示数据到表格中 $data.appendTo($("#employeeTable")); //给添加的行的a标签绑定事件 $data.find("a").click(function (){ //事件响应的function函数中,有一个this对象,这个this对象就是当前正在响应事件的dom对象 var $parents = $(this).parent().parent();//得到行标签,$(this):为a的dom对象 var name = $parents.find("td:first").text(); /*confirm是javascript语言提供的一个确认提示框函数,传什么,它就提示什么 * 当用户点击确定时,就返回true,当用户点击取消时,就返回false * */ if(confirm("你确认需要"+ name +"删除吗?")){ $parents.remove();//删除行标签 } //return false 可以阻止元素的默认行为(不跳转) return false; }); }); //给删除的a标签绑定事件 $("a").click(function (){ //事件响应的function函数中,有一个this对象,这个this对象就是当前正在响应事件的dom对象 var $parents = $(this).parent().parent();//得到行标签,$(this):为a的dom对象 var name = $parents.find("td:first").text(); /*confirm是javascript语言提供的一个确认提示框函数,传什么,它就提示什么 * 当用户点击确定时,就返回true,当用户点击取消时,就返回false * */ if(confirm("你确认需要"+ name +"删除吗?")){ $parents.remove();//删除行标签 } //return false 可以阻止元素的默认行为(不跳转) return false; }); }); </script> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name: </td> <td class="inp"> <input type="text" name="empName" id="empName" /> </td> </tr> <tr> <td class="word">email: </td> <td class="inp"> <input type="text" name="email" id="email" /> </td> </tr> <tr> <td class="word">salary: </td> <td class="inp"> <input type="text" name="salary" id="salary" /> </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </body> </html> 结果如下所示: