ホームページ  >  記事  >  ウェブフロントエンド  >  すべてのテーブルを追加、削除、選択します。 _html/css_WEB-ITnose

すべてのテーブルを追加、削除、選択します。 _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:47:561455ブラウズ

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

1997- 4-26b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c100000b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c0d94c60b34d1cf9f76a9dec8d21eab15 56fdd212551b8625e8ebdf835037aae2b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5")

$("table").append($newPro);
});
});

2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1



98fd68f81ae76be1ecf6ea383ff3c480

b6c5a531a458a2e790c1fd6421739d1c1587e90484ec28fb44fc75057d728e19b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c姓b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c性别b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c卡号b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c会员级别b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c電话号番号b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c提案b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c消費金额b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5

b6c5a531a458a2e790c1fd6421739d1c1587e90484ec28fb44fc75057d728e19b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c张三b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c男b90dd5946f0946207856a8a37f441edf
6565654315321321
b6c5a531a458a2e790c1fd6421739d1c短工b90dd5946f0946207856a8a37f441edf
18625455412
1995-12-09
10,000.00
b6c5a531a458a2e790c1fd6421739d1c
e79fd8df3c25c502320113d21b6b48bc
c32a2c1c0d257c7c2c056291e4c6f54e
b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
639b161608ff83908ef2a6b49130e644
b6c5a531a458a2e790c1fd6421739d1c1587e90484ec28fb44fc75057d728e19b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c张三b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c男b90dd5946f0946207856a8a37f441edf
6565654315321321
b6c5a531a458a2e790c1fd6421739d1c短工b90dd5946f0946207856a8a37f441edf
18625455412
1995-12-09
10,000.00
b6c5a531a458a2e790c1fd6421739d1c
e79fd8df3c25c502320113d21b6b48bc
c32a2c1c0d257c7c2c056291e4c6f54e

b6c5a531a458a2e790c1fd6421739d1c1587e90484ec28fb44fc75057d728e19b90dd5946f0946207856a8a37f441edf ;td>張三
男性
b90dd5946f0946207856a8a37f441edf
0392b15e57f93ac5f91c0362c63dc4a2
eca929297ef94d42341019ebe53f3795

マスター、助けてください!
どうでしょうか? 1. 行を選択したら、[削除] をクリックして行を削除します。
2. 名前の前のチェックボックスを選択すると、すべてのチェックボックスがオンになります。
3. var $newPro=$("tr.ll").html(); を使用して追加すると、常に左側に追加されるのはなぜですか。









ディスカッションへの返信 (解決策)

すみません、このようにしか書けない足し算はどれですか?自分のテーブルからデータを直接抽出することはできませんか?
すみません、このようにしか書けない足し算はどれですか?自分のテーブルからデータを直接抽出することはできませんか?

どのように機能を追加しますか?

<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();

既存のテーブル情報を直接取得しますが、この方法で取得すると常に浮動になります。左の方です 。

var $newPro="a34de1251f0d9fe1e645927f19a896e8"+$("tr.ll").html()+"fd273fcf5bcad3dfdad3c41bd81ad3e5";


削除しないでください最初の段落も削除

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。