ホームページ > 記事 > ウェブフロントエンド > すべてのテーブルを追加、削除、選択します。 _html/css_WEB-ITnose
bb65d6685432794c7a0d23b15f03b7c92cacc6d41bbb37262a98f745aa00fbf0
769cbb542039d9a75a430d05b5cfa3b6
*{
font-size:12px;
}
tr{
text-align:center;
高さ:40px;
}
531ac245ce3e4fe3d50054a55f265927
4ec11beb6c39d0703d1751d203c17053
$(function(){
//全选
//删除数据
$(".del").click(function(){
$("tr ").remove();
});
//新添数据
$(".newone").click(function(){
//创建一个新的节点
var $newPro=$("49c14ab392960ad0c8c4e37613006039b6c5a531a458a2e790c1fd6421739d1c62f3191f679b7e0c318140e6f4317698b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c刘家义b90dd5946f0946207856a8a37f441edf7071b34c2284daffb5befdf51d554250男b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c6565654315321321b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c钻石b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c15575938043b90dd5946f0946207856a8a37f441edf
ディスカッションへの返信 (解決策)
すみません、このようにしか書けない足し算はどれですか?自分のテーブルからデータを直接抽出することはできませんか?
<style type="text/css" >*{font-size:12px;}tr{text-align:center;height:40px;}</style><script type="text/javascript"> $(function(){ //全选 $("#allselect").click(function(){ $("table :checkbox").prop("checked",$(this).prop("checked")); }); //删除数据 $("table").on("click",".del",function(){ $("table :checkbox:checked").closest("tr").remove(); }); //新添数据 $(".newone").click(function(){ //创建一个新的节点 var $newPro=$("<tr bgcolor='#FAF3E9'><td><input type='checkbox'/></td><td>刘家义</td><td>男</td><td>6565654315321321</td><td>钻石</td><td>15575938043</td><td>1997-4-26</td> <td>100000</td><td><img class='add' src='images/add.jpg' /> <img class='del' src='images/del.jpg' /></td></tr>") $("table").append($newPro); }); });</script></head><body><table width="800" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#EBE7DC"> <td><input id="allselect" type="checkbox"/></td> <td>姓名</td> <td>性别</td> <td>卡号</td> <td>会员级别</td> <td>电话号码</td> <td>出生年月日</td> <td>消费金额</td> <td> </td> </tr> <tr bgcolor="#FAF3E9"> <td><input type="checkbox"/></td> <td>张三</td> <td>男</td> <td>6565654315321321</td> <td>短工</td> <td>18625455412</td> <td>1995-12-09</td> <td>10,000.00</td> <td> <img class='add' src="images/add.jpg" /> <img class='del' src="images/del.jpg" /> </td> </tr> <tr class="ll" bgcolor="#FEFAF7"> <td><input type="checkbox"/></td> <td>张三</td> <td>男</td> <td>6565654315321321</td> <td>短工</td> <td>18625455412</td> <td>1995-12-09</td> <td>10,000.00</td> <td> <img class='add' src="images/add.jpg" /> <img class='del' src="images/del.jpg" /> </td> </tr> <tr bgcolor="#FAF3E9"> <td><input type="checkbox"/></td> <td>张三</td> <td>男</td> <td>6565654315321321</td> <td>短工</td> <td>18625455412</td> <td>1995-12-09</td> <td>10,000.00</td> <td> <img class='add' src="images/add.jpg" /> <img class='del' src="images/del.jpg" /> </td> </tr></table><a href="#" class='newone'>新增</a>var $newPro=$("tr.ll").html();
既存のテーブル情報を直接取得しますが、この方法で取得すると常に浮動になります。左の方です 。
var $newPro=$("tr.ll").html();
既存のテーブル情報を直接取得しますが、この方法で取得すると常に浮動になります。左の方です 。
削除しないでください最初の段落も削除