ホームページ > 記事 > ウェブフロントエンド > jQueryをベースに、最後のrowをクリックすることで行のインクリメント効果を実現するテーブル_jquery
jQueryをベースに、最後のrowをクリックすることで行のインクリメント効果を実現するテーブル_jquery
- WBOYオリジナル
- 2016-05-16 15:20:341630ブラウズ
現代ではすべてが効率性と人間味を追求しています。もちろん、Web ページのエフェクトも同様です。データを編集できるテーブルがある場合、最後の行を編集するときに、クリックすると自動的に行が追加されます。もう少し人道的な効果を得るために、そのようなコードの一部を以下に共有しましょう。
コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
table
{
width:800px;
margin:50px auto;
border-collapse:collapse;
border-spacing:0;
}
table tr, table th, table td
{
border:1px solid #ddd;
font-size:12px;
}
table tr td:first-child
{
width:30px;
text-align:center;
}
table td input
{
width:100%;
height:100%;
padding:5px 0;
border:0 none;
}
table td input:focus
{
box-shadow:1px 1px 3px #ddd inset;
outline:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var oTable = $("#count"), iNum = 1, eEle = '';
oTable.on('click', function(e){
var target = e.target,
oTr = $(target).closest('tr');
if(oTr.index() == oTable.find('tr').last().index())
{
iNum++;
eEle = oTr.clone();
eEle.find('td').eq(0).text(iNum);
}
oTable.append(eEle);
});
});
</script>[/size]
[size=2]</head>
<body>
<table id="count">
<tr>
<th>序号</th>
<th>姓名</th>
<th>金额[USD]</th>
<th>时间</th>
<th>项目</th>
<th>单位</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</table>
</body>
</html>
上記のコードは私たちの要件を実現しています。テーブルの最後の行をクリックすると、新しい行が自動的に追加されます。ここではその実装プロセスを紹介します。
1. コードのコメント:
1.$(function(){})、ドキュメント構造が完全にロードされたら、関数内のコードを実行します。
2.var oTable = $("#count")、id 属性値が count であるオブジェクト、ここではテーブル オブジェクトを取得します。
3. iNum = 1、変数を宣言し、初期値を 1 に代入します。今後、追加行ごとに行番号として +1 が付けられます。
4.eEle = ''、行オブジェクトを格納する変数を宣言します。
5.oTable.on('click', function(e){})、テーブルオブジェクトのクリックイベント処理関数を登録します。
6.var target = e.target、クリックされたソースオブジェクトを取得します。
7.oTr = $(target).closest('tr')、最も近い先祖要素を取得します。
8.f(oTr.index()==oTable.find('tr').last().index())、クリックされた行が最後の行であるかどうかを判断します。
9.iNum++、iNum の値に 1 を加算します。
10.eEle = oTr.clone()、現在の行オブジェクトのクローンを作成します。
11.eEle.find('td').eq(0).text(iNum)、最後の行の最初のセルの値を設定します。
12.oTable.append(eEle)、テーブルの最後に行を追加します。
最後の行をクリックすることで行の自動インクリメントを実現するためのjQueryを使ったテーブルの内容をすべて紹介したいと思います。上記の内容は大きくコメントされています。理解できない場合は参照してください。平素より、ホーム Web サイトのサポートをご理解いただき、誠にありがとうございます。