この記事の例では、テーブルを追加および削除するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 効果: 1. 「追加」ボタンをクリックしてテーブルに行を追加し、「すべて選択」の前のチェックボックスを「false」に変更します。 1.1. 新しく追加されたチェックボックスとクリックイベント 2. 削除ボタンをクリックして、テーブル本体の選択された行を取得し、tr全体を削除し、すべて選択の前のチェックボックスをfalseに変更します。 最初の td のチェックボックスの状態は true にチェックされています。 3. [すべて選択] ボタンの前のチェックボックスをクリックします。 選択されている場合は、その下のチェックボックスがすべて選択されます。 選択されていない場合は、その下のチェックボックスがすべて選択解除されます。 4. 各テーブル本体のチェックボックスをクリックします。すべてのチェックボックスが選択されている場合は、[すべて選択] ボタンが選択されます。1 つも選択されていない場合は、[すべて選択] ボタンは選択されません。 CS: ... <スタイル> 。頭 { 幅: 500ピクセル; パディング: 8px; マージン: 20px 自動; ボックスのサイズ: 境界線ボックス; 境界線: 1px 実線 #eee; } 入力{ 左マージン: 3px; アウトライン: なし; } ボタン { フロート: 右; } テーブル { 幅: 500ピクセル; 境界線: 1px実線 #000; マージン: 0 自動; 境界線の折りたたみ: 折りたたみ; } tr、 td、 番目 { 境界線: 1px実線 #000; } tr td:n番目の子(1) { テキスト配置: 中央; } 。足 { 幅: 500ピクセル; マージン: 8px 自動; パディング: 8px; ボックスのサイズ: 境界線ボックス; } .foot ボタン { フロート: 右; } td:n番目の子(2)、 td:n番目の子(3)、 td:n番目の子(4) { 幅: 20%; } </スタイル> html: <div class="head"> <span>名前を入力してください:</span><input type="text"><br> <span>性別を入力してください:</span><input type="radio" name="sex" selected>男性<input type="radio" name="sex">女性<br> <span>年齢を入力してください:</span><input type="text"><button>表に追加</button> </div> <テーブル> <頭> <th><input type="checkbox"> すべて選択</th> <th>名前</th> <th>性別</th> <th>年齢</th> </thead> <t本文> <tr クラス="tr1"> <td><入力タイプ="チェックボックス"></td> <td>張三</td> <td>女性</td> <td>88</td> </tr> <tr> <td><入力タイプ="チェックボックス"></td> <td>李思</td> <td>男性</td> <td>18</td> </tr> <tr> <td><入力タイプ="チェックボックス"></td> <td>王武</td> <td>女性</td> <td>12</td> </tr> </tbody> </テーブル> <div class="foot"><button>選択した行を削除</button></div> ジャバスクリプト: // イベント三部作 // 1. 要素ボタンテーブル tBody チェックボックス inp を取得する var btns = document.querySelectorAll('ボタン'); var テーブル = document.querySelector('テーブル'); var inps = document.querySelectorAll('input'); var all = table.tHead.querySelector('input'); var cks = table.tBodies[0].getElementsByTagName('input'); var cks1 = table.tBodies[0].querySelectorAll('input'); // console.log(btns、table、inps、cks); // console.log(cks, all); コンソールにログ出力します。 // 2. 追加ボタンをクリックする btns[0].onclick = function(){ // 3. テーブルに行を追加します。 var tr = document.createElement('tr'); // 4. tbodyにtrを追加する テーブル.tBodies[0].appendChild(tr); // 5. tdを作成する var inp = document.createElement('td'); inp.innerHTML = '<input type="checkbox">'; tr.appendChild(inp); var user = document.createElement('td'); user.innerHTML = inps[0].value; tr.appendChild(ユーザー); var 性別 = document.createElement('td'); sex.innerHTML = inps[1].checked ? '男' : '女'; tr.appendChild(性別); var age = document.createElement('td'); age.innerHTML = inps[3].value; tr.appendChild(年齢); // 6. 「すべて選択」の前のチェックボックスがfalseになる すべてチェック済み = false; // 新しく追加されたチェックボックスとクリックイベント var bck = tr.querySelector('input'); コンソールログ(bck); bck.onclick = 関数(){ 自動(); } } // 7. 削除ボタンをクリックして選択した行を削除します btns[1].onclick = function(){ // 8. テーブル本体で選択された行を取得します // console.log(cks, cks1); // 9. チェックボックスが選択されているかどうかを判定する for(var i = 0; i < cks.length; i++){ コンソールログ(cks); if(cks[i].checked){ // console.log(cks[i].parentNode.parentNode); // コンソールログ(cks); // 10. 行全体を削除します cks[i].parentNode.parentNode.remove(); 私 - ; } } // 11. 「すべて選択」の前のチェックボックスをfalseに変更します すべてチェック済み = false; } // すべて選択ボタンの前のチェックボックスをクリックします。選択されている場合は、その下のチェックボックスがすべて選択されます。選択されていない場合は、その下のチェックボックスがすべてオフになります。// 12. すべてをクリックします all.onclick = 関数(){ console.log(すべてチェック済み); // 13. 各for(var i = 0; i < cks.length;i++){ cks[i].checked = all.checked; } } // テーブル本体の各チェックボックスをクリックします。すべてのチェックボックスが選択されている場合は、[すべて選択] ボタンが選択されます。1 つも選択されていない場合は、[すべて選択] ボタンは選択解除されます for(var j = 0; j < cks.length; j++){ // クリック cks[j].onclick = function(){ // すべて // for(var i = 0; i < cks.length; i++){ // console.log(cks[i].checked); // // いずれかが選択されていない場合、すべて選択ボタンはチェックされません // if (cks[i].checked == false) { // // すべて選択ボタンはチェックされていません // all.checked = false; // // 関数全体を終了します // return; // } // } // // すべてチェックされています // all.checked = true; 自動(); } } 関数auto() { // すべて for(var i = 0; i < cks.length; i++){ console.log(cks[i].checked); // いずれかが選択されていない場合、すべて選択ボタンはチェックされません if(cks[i].checked == false){ // すべて選択ボタンのチェックが外れています all.checked = false; // 関数全体を終了します return; } } // すべて選択されています all.checked = true; } 効果: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: さまざまなMySQLインデックスの使用方法の詳細な説明
>>: CentOS SVN サーバーで複数のプロジェクトを管理する方法
序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...
目次イベントループmiscroTask (マイクロタスク) UI レンダリング (重要なポイント)次...
以下のように表示されます。 SELECT prod_name,prod_price FROM pro...
http://www.cppcns.com/shujuku/mysql/283231.html 8....
1 分で最初の Web ページを作成します。簡単な Web ページを作ってみましょう。ぜひフォローし...
1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...
この記事は MySQL 公式サイトを参考にしてまとめたものであり、遭遇したいくつかの問題も記録されて...
Nginx: PV、UV、独立IPウェブサイトを作成する人なら誰でも、ウェブサイトのPV、UV、その...
このデータベース クエリ ステートメントは、インターネット上の 50 個のデータベース クエリ練習問...
目次問題の説明:解決策1解決策2問題の説明:ページ A と B の 2 つがあり、各ページにはget...
MySQL で、id、a、b の 3 つのフィールドを持つ新しいテーブルを作成します。次のように、同...
私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...
1. Baidu Eslint Ruleプラグインをインストールする npm i -D eslint...
type="radio" や type="checkbox"...
目次概要パフォーマンス.nowコンソール.time時間精度を短縮注意事項分割して征服する入力値に注意...