javascript_javascript スキルを使用してテーブルの全選択、反転選択、削除を実装する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

javascript_javascript スキルを使用してテーブルの全選択、反転選択、削除を実装する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:58 PM

javascript すべて選択消去反選挙シート

この記事の例では、JavaScriptを実装して全選択、選択を反転、テーブルを削除する方法を説明しています。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以全选反选删除的表格</title>
<style type="text/css">
body,table
{
 margin:0;
 padding:0;
 font-size:14px;
}   
table,tr,th,td
{
 border:1px solid #cdc;
}
th
{
 background-color:green;
 width:100px;
}
.oddColor
{
 background-color:#ccc;
}
.evenColor
{
 background-color:#fcf;
}
.overColor
{
 background-color:#dff;
}
</style>
<script type="text/javascript">
 //定义嵌套数组
 var datas = [["张三", 30, "南昌"], ["李四", 25, "北京"], ["王五", 20, "郑州"],
    ["赵六", 19, "武汉"], ["李莫", 18, "深圳"], ["罗成", 33, "重庆"],
    ["王平", 31, "天津"], ["刘萍", 22, "上海"], ["杨丽", 17, "石家庄"],
    ["郭丽", 30, "广州"]];
 //动态创建表格
 function CreateMyTable() {
  var tblMain = document.getElementById("tblMain");
  var rowsCount = tblMain.rows.length;
  var addRow;
  var addCol;
  var detailInfos;
  for (var i = 0; i < datas.length; i++) {
   addRow = tblMain.insertRow(rowsCount - 1);//控制数据行添加到倒数第二列
   addCol = addRow.insertCell(-1);
   addCol.innerHTML = "<input type='checkbox' name='item' />";
   addCol.align = "center"; //控制列居中
   detailInfos = datas[i];
   for (var j = 0; j < detailInfos.length; j++) {
    addCol = addRow.insertCell(-1);
    addCol.innerHTML = detailInfos[j];
   }
   addCol = addRow.insertCell(-1);
   addCol.innerHTML = "<input type='button' id='btnDel" + i + "' value='删除' onclick='btnDel(this)' />";
   addCol.align = "center"; //控制列居中
   rowsCount++;
  }
  TableColor();
 }
 //设置网格间隔色和高亮显示
 var oldClassName;    //记住行的背景色
 function TableColor() {
  var tblMain = document.getElementById("tblMain");
  var rowNodes = tblMain.rows;
  for (var i = 1; i < rowNodes.length-1; i++) { //除去首行和末行
   if (i % 2 == 0) {
    rowNodes[i].className = "evenColor";
   }
   else {
    rowNodes[i].className = "oddColor";
   }
   rowNodes[i].onmouseover = function () {
    oldClassName = this.className;
    this.className = "overColor";
   }
   rowNodes[i].onmouseout = function () {
    this.className = oldClassName;
   }
  }
 }
 //复选框全选函数
 function checkAll() {
  var currentCheckNode = event.srcElement;
  var checkAllNodes = document.getElementsByName("all");
  //把没有点击的全选复选框去除复选
  for (var i = 0; i < checkAllNodes.length; i++) {
   if (currentCheckNode != checkAllNodes[i]) {
    checkAllNodes[i].checked = false;
   }
  }
  var checkItemNodes = document.getElementsByName("item");
  for (var i = 0; i < checkItemNodes.length; i++) {
   checkItemNodes[i].checked = currentCheckNode.checked;
  }
 }
 //按钮选择函数
 function btnCheckboxSel(index) {
  var checkItemNodes = document.getElementsByName("item");
  for (var i = 0; i < checkItemNodes.length; i++) {
   if (index == 2) {
    checkItemNodes[i].checked = !checkItemNodes[i].checked;
   }
   else {
    checkItemNodes[i].checked = index;
   }
  }
 }
 //每行的删除按钮函数
 function btnDel(btn) {
  var tblMain = document.getElementById("tblMain");
  var delRowNode = btn.parentNode.parentNode;
  var sMsg = "您是否要删除 姓名为:【" + delRowNode.cells[1].innerText + "】,年龄为:【" +
      delRowNode.cells[2].innerText + "】,城市为:【" +
      delRowNode.cells[3].innerText + "】 的数据&#63;";
  if (window.confirm(sMsg)) {
   tblMain.tBodies[0].removeChild(delRowNode);
   TableColor();
  }
 }
 //删除所选项按钮函数
 function btnDelSelectRow() {
  var arrDel = new Array();
  var pos = 0;
  var itemNodes = document.getElementsByName("item");
  for (var i = 0; i < itemNodes.length; i++) {
   if (itemNodes[i].checked) {
    arrDel[pos] = itemNodes[i].parentNode.parentNode;
    pos++;
   }
  }
  if (pos <= 0) {
   return;
  }
  if (!window.confirm("是否要删除选择的数据&#63;"))
   return;
  var tblMain = document.getElementById("tblMain");
  for (var i = 0; i < arrDel.length; i++) {
   tblMain.tBodies[0].removeChild(arrDel[i]);
  }
 }
 window.onload = CreateMyTable;
</script>
</head>
<body>
<table id="tblMain" cellspacing="0" cellpadding="10px" align="center">
 <tbody>
  <tr>
   <th><input type="checkbox" name="all" onclick="checkAll()" />全选</th>
   <th>姓名</th>
   <th>年龄</th>
   <th>城市</th>
   <th>操作</th>
  </tr>
  <tr>
   <th><input type="checkbox" name="all" onclick="checkAll()" />全选</th>
   <th colspan="4">
    <input type="button" value="全选" onclick="btnCheckboxSel(1)" />
    <input type="button" value="全清" onclick="btnCheckboxSel(0)" />
    <input type="button" value="反选" onclick="btnCheckboxSel(2)" />
    <input type="button" value="删除所选项" onclick="btnDelSelectRow()" />
   </th>
  </tr>
 </tbody>  
</table>
</body>
</html>

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7392

Java チュートリアル

1630

CakePHP チュートリアル

1357

Laravel チュートリアル

1268

PHP チュートリアル

1216

Related knowledge

PPT テーブルに挿入される画像の形式を調整する手順 Mar 26, 2024 pm 04:16 PM

1. 新しい PPT ファイルを作成し、例として [PPT Tips] という名前を付けます。 2. [PPT Tips]をダブルクリックしてPPTファイルを開きます。 3. 例として 2 行 2 列の表を挿入します。 4. 表の境界線をダブルクリックすると、上部ツールバーに[デザイン]オプションが表示されます。 5. [シェーディング]オプションをクリックし、[画像]をクリックします。 6. [画像]をクリックすると、画像を背景にした塗りつぶしオプションダイアログボックスが表示されます。 7. ディレクトリ内で挿入したいトレイを見つけ、「OK」をクリックして画像を挿入します。 8. テーブルボックスを右クリックして、設定ダイアログボックスを表示します。 9. [セルの書式設定]をクリックし、[画像を網掛けとして並べる]にチェックを入れます。 10. [中央]、[ミラー]など必要な機能を設定し、[OK]をクリックします。注: デフォルトでは、表に画像が入力されます。

小紅書メモを削除する方法 Mar 21, 2024 pm 08:12 PM

小紅書メモを削除するにはどうすればよいですか? メモは小紅書アプリで編集できます。ほとんどのユーザーは小紅書メモの削除方法を知りません。次に、エディターがユーザーに小紅書メモの削除方法に関する写真とテキストを提供します。チュートリアル、興味のあるユーザーが来て、それを受講してください見てください！小紅書使い方チュートリアル小紅書メモの削除方法 1. まず小紅書アプリを開いてメインページに入り、右下隅の[自分]を選択して特別エリアに入ります; 2. 次に、マイエリアで、表示されているメモページをクリックします下の図で、削除したいメモを選択します; 3. メモページに入り、右上隅の [3 つの点] をクリックします; 4. 最後に、下部に機能バーが展開され、[削除] をクリックして完了します。

WeChat でブロックされたり削除されたり、永久に追加できなくなったりする可能性があるというのは本当ですか? Apr 08, 2024 am 11:41 AM

1. まず、相手を永久にブロックして削除して永久に追加しないのは間違いで、ブロックして削除した後に相手を追加したい場合は、相手の同意だけが必要です。 2. ユーザーが誰かをブロックすると、相手はユーザーにメッセージを送信したり、ユーザーの友達サークルを表示したり、ユーザーと通話したりすることができなくなります。 3. ブロックとは、ユーザーの WeChat 連絡先リストから相手を削除することを意味するものではありません。 4. ユーザーが相手をブロックした後、ユーザーの WeChat 連絡先リストから相手を削除した場合、削除後に回復する方法はありません。 5. ユーザーが相手を再度友達として追加したい場合は、相手が同意してユーザーを再度追加する必要があります。

Xiaohonshuのリリースを削除するにはどうすればよいですか?削除後に復元するにはどうすればよいですか? Mar 21, 2024 pm 05:10 PM

人気のソーシャル電子商取引プラットフォームとして、Xiaohongshu は日常生活やショッピング体験を共有するために多くのユーザーを魅了してきました。場合によっては、私たちが誤って不適切なコンテンツを公開してしまうことがありますが、個人的なイメージをより良く維持したり、プラットフォームの規制に準拠したりするために、適時に削除する必要があります。 1.Xiaohongshu リリースを削除するにはどうすればよいですか? 1. Xiaohonshu アカウントにログインし、個人のホームページに入ります。 2. 個人ホームページの下部で、「My Creations」オプションを見つけてクリックして入力します。 3. 「My Creations」ページでは、メモやビデオなどを含む、公開されているすべてのコンテンツを確認できます。 4. 削除する必要があるコンテンツを見つけて、右側の「...」ボタンをクリックします。 5. ポップアップメニューで、[削除] オプションを選択します。 6. 削除を確認すると、個人ホームページおよび公開ページからコンテンツが削除されます。

売上予測表の作り方 Mar 20, 2024 pm 03:06 PM

帳票を上手に作成できることは、経理や人事、財務の分野だけでなく、多くの営業職にとっても帳票の作成を学ぶことは非常に重要です。なぜなら、販売に関連するデータは非常に大規模かつ複雑であり、問題を説明するために文書に単純に記録することはできないからです。より多くの営業マンがExcelを使った表作成に習熟できるよう、売上予測に関する表作成の課題を編集部が紹介しますので、お困りの友人は必見です！ 1. [売上予測・目標設定]xlsmを開き、各テーブルに格納されているデータを分析します。 2. 新規に[空のワークシート]を作成し、[セル]を選択し、[ラベル情報]を入力します。下に[ドラッグ]し、月を[塗りつぶします]。 [その他]のデータを入力し、[

TikTokのチャット履歴を完全に削除する方法 May 07, 2024 am 11:14 AM

1. Douyin アプリを開き、インターフェイスの下部にある [メッセージ] をクリックし、削除する必要があるチャット会話エントリをクリックします。 2. 任意のチャット記録を長押しし、[複数選択]をクリックし、削除したいチャット記録にチェックを入れます。 3. 右下隅の [削除] ボタンをクリックし、ポップアップウィンドウで [削除の確認] を選択して、これらのレコードを完全に削除します。

条件に応じて色を自動変更するWPS値の設定方法_条件に応じて色を自動変更するWPSテーブル値の設定手順 Mar 27, 2024 pm 07:30 PM

1. ワークシートを開き、[スタート]-[条件付き書式]ボタンを見つけます。 2. [列の選択] をクリックし、条件付き書式を追加する列を選択します。 3. [条件付き書式]ボタンをクリックするとオプションメニューが表示されます。 4. [条件付きルールを強調表示]-[間]を選択します。 5. ルールを入力します: 20、24、濃い緑色のテキストと濃い塗りつぶし。 6. 確認後、選択した列のデータは、設定に従って対応する数値、テキスト、セルボックスで色付けされます。 7. 競合のない条件付きルールは繰り返し追加できますが、競合するルールの場合、WPS は以前に確立された条件付きルールを最後に追加したルールに置き換えます。 8. [Between] ルール 20 ～ 24 と [Less than] 20 の後にセル列を繰り返し追加します。 9. ルールを変更する必要がある場合は、ルールをクリアしてからルールをリセットします。

WeChat ファイル転送アシスタントを完全に削除する方法_WeChat ファイル転送アシスタントを終了する方法の紹介 Mar 20, 2024 pm 08:31 PM

WeChat のファイル転送アシスタントはすべてのユーザーが利用でき、何かを記録するためのメモとして使用するユーザーもいます。では、WeChat ファイル転送アシスタントを完全に削除するにはどうすればよいでしょうか?以下で詳しくご紹介していきます。 WeChat ファイル転送アシスタントを完全に削除するには? 答え: [WeChat]-[ファイル転送アシスタントを長押し]-[このチャットを削除]。具体的な手順: 1. まず WeChat ソフトウェアを開き、ホームページに入った後、[ファイル転送アシスタント] を見つけて長押しします; 2. その後、ポップアップが未読としてマークされ、チャットを上部に固定して、次のことを行いますチャットを表示しない、チャットを削除する場合は、ここで[このチャットを削除]をクリックします。

See all articles

javascript_javascript スキルを使用してテーブルの全選択、反転選択、削除を実装する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック