序文
1で、使用CSSは、選択機能を高め、スタイルテーブルを達成するために、このセクションを使用jQueryのは、指定した行の削除機能を実現しています。図以下の効果：
この章のサンプルコードは、ダウンロードするにはここをクリック
実装コード
table3.htmlコンテンツ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Table删除行</title>
<style type="text/css">
body{margin: 0;}
.main{
width: 600px;
margin-top: 10px;
margin-left:auto;
margin-right:auto;
}
.table{width: 100%;background-color: transparent;border-collapse:collapse;border-spacing:0}
.table th,.table td{padding:8px;line-height:20px;text-align: center;}
.table-border{border-top:1px solid #ddd;}
.table-border th,.table-border td{border-bottom: 1px solid #ddd;}
.table-bg thead{background-color: #f5fafe;}
.tableselected{background-color: #f5fafe;}
.table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0}
.table-bordered th,.table-bordered td{border-left:1px solid #ddd}
.table-border.table-bordered{border-bottom:0}
.table-hover tbody tr:hover td{background-color:#f5f5f5}
</style>
</head>
<body>
<div class="main" >
<table class="table table-border table-bordered table-bg table-hover">
<thead>
<tr>
<th width="25"><input type="checkbox" name="" value="" ></th>
<th width="75">ID</th>
<th width="120">用户名</th>
<th width="80">性别</th>
<th width="130">电话</th>
<th width="170">操作</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" value="1" name=""></td>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>123456789</td>
<td ><a title="删除" onClick="article_del(this)" href="javascript:;">删除</a></td>
</tr>
<tr >
<td><input type="checkbox" value="1" name=""></td>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>123456789</td>
<td ><a title="删除" onClick="article_del(this)" href="javascript:;">删除</a></td>
</tr>
<tr >
<td><input type="checkbox" value="1" name=""></td>
<td>3</td>
<td>王五</td>
<td>男</td>
<td>123456789</td>
<td ><a title="删除" onClick="article_del(this)" href="javascript:;">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
/*checkbox全选*/
$("table thead th input:checkbox").on(
"click" ,
function(){
$(this).closest("table").find("tr > td:first-child input:checkbox").prop("checked",$(this).prop("checked"));
}
);
$("table tbody tr input:checkbox").on("click",
function(){
var ischeck = $(this).prop("checked");
if(ischeck == false)
{
$(this).closest("table").find("tr > th:first-child input:checkbox").prop("checked",$(this).prop("checked"));
}
}
);
/*删除*/
function article_del(obj){
var res = confirm('确认要删除吗？');
if(res == true)
{
$(obj).parents("tr").remove();
}
}
</script>
</body>
</html>
まずコントラストにtable2.htmlコンテンツセクション、コードのわずか数行の増加は、<A> </a>の次の変更を加え
<atitle="删除"onClick="article_del(this)" href="javascript:;">删除する</a>
これは明らかにのonClickイベントの実行をクリックし<A>機能です。
HREFは「JavaScriptを：;」=ここで、いくつかの初心者には理解できないことがあります。href属性は、ラベル<A>ハイパーリンク先のURLを指定するために使用され、href属性の値は、フラグメント識別子及びコードセグメントはJavaScriptを含む任意の有効なドキュメントの相対的または絶対URLとすることができます。ここのhref =「javascriptを：;」は、Javascript：疑似プロトコルは、このアプローチの使用はjavascriptを実現することができますが、それは、リンクを介してJavaScript関数を呼び出すために私たちを可能にするということである：; Aクリックイベントタグランタイムをすれば、ページのコンテンツの多くスクロールバーがある場合、ページは、より優れたユーザーエクスペリエンスをバウンスしません。おそらく、あなたはHREF =「＃」で、と思うかもしれない、私は言うことができる、〜してみてください
エピローグ
セクションの書き込みの下で動的に行を追加
