ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryはテーブル内の4行のデータを削除します
jqueryはテーブル内の4行のデータを削除します
- WBOYオリジナル
- 2023-05-23 16:02:08568ブラウズ
Web アプリケーションでは、テーブルは非常に一般的で重要なインターフェイス要素です。テーブル内の行と列は、データを表示したり、メニュー オプションを提供したりするために使用されます。ただし、ユーザーが削除操作を実行した場合など、テーブル内のデータの一部の行を削除する必要がある場合があります。この記事ではjQueryを使ってテーブル内の4行のデータを削除する方法を紹介します。
ステップ 1: HTML テーブルを作成する
最初に行うことは、jQuery を使用してテーブル内の 4 行のデータを削除できるように HTML テーブルを作成することです。 HTML コードは次のとおりです。
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>女</td>
</tr>
<tr>
<td>赵六</td>
<td>35</td>
<td>男</td>
</tr>
<tr>
<td>小红</td>
<td>23</td>
<td>女</td>
</tr>
<tr>
<td>小明</td>
<td>26</td>
<td>男</td>
</tr>
</tbody>
</table>このテーブルにはヘッダーと 6 行のデータが含まれており、各行には名前、年齢、性別の 3 列のデータが含まれています。私たちの目標は、テーブル内のデータの最初の 4 行を削除することです。
ステップ 2: jQuery を使用して、削除する必要があるデータの行を選択する
テーブル内のデータの最初の 4 行を削除するには、jQuery セレクターを使用して、これら 4 行のデータを選択します。コードは次のとおりです:
var rowsToDelete = $('#myTable tbody tr:lt(4)');このコード行では、チェーン呼び出しメソッドを使用しています。まず、$('#myTable') を使用してテーブルを選択し、次に を使用します。 :lt(4)データの最初の 4 行が選択され、最後に tbody tr を通じてデータのすべての行が選択されます。このように、rowsToDelete 変数は、削除する必要があるすべての行データになります。
ステップ 3: jQuery を使用して選択した行データを削除する
選択したテーブルの行データを使用して、jQuery を使用してこれらの行を削除できます。コードは次のとおりです。
rowsToDelete.remove();
この単純なコード行は、jQuery の remove() メソッドを使用して、選択されたテーブル行データを削除します。
ステップ 4: 削除結果を確認する
データの最初の 4 行が正常に削除されたかどうかを確認するには、次のコードを使用してテーブル データをコンソールに出力します。 ##
console.log($('#myTable tbody tr'));If データの最初の 4 行が正常に削除され、最後の 2 行のデータのみがコンソールに表示されます。 完全なコードは次のとおりです: <html>
<head>
<title>jQuery删除表格四行数据</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
var rowsToDelete = $('#myTable tbody tr:lt(4)');
rowsToDelete.remove();
console.log($('#myTable tbody tr'));
});
</script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>女</td>
</tr>
<tr>
<td>赵六</td>
<td>35</td>
<td>男</td>
</tr>
<tr>
<td>小红</td>
<td>23</td>
<td>女</td>
</tr>
<tr>
<td>小明</td>
<td>26</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>この記事で提供されているコード スニペットは、テーブルの行データを削除するための jQuery 操作を学習するための基礎として使用できます。読者は次に従ってコードを変更できます。実際には、独自のアプリケーション シナリオに適応する必要があります。 以上がjqueryはテーブル内の4行のデータを削除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。