如何對 HTML 表格中的復選框中的選定行執行操作

Question

我有一個表，我想對用戶檢查過的行執行一些操作（假設在警報中輸出選定的行）。 以下是我失敗的方法 -

 <html> <head> <title>Introduction</title> <script> function kro(){ var x = document.getElementsByName('checks'); for (var i = 0;i < x.length;i++){ if(x[i].checked == 1) var selecteddata+=x[i].value+"\\n"; } alert(selecteddata) } </script> </head> <body> <table> <thead> <tr> <th>UserName</th> <th>Post</th> <th>Comments</th> <th>Select</th> </tr> </thead> <tbody> <tr> <td>Ram</td> <td>Sahi hai</td> <td>Ravan:No</td> <td><input type = "checkbox" name = "checks" id='one'/>&nbsp;</td> </tr> <tr> <td>Ravan</td> <td>Kidnap done</td> <td>Ram:I'll kill you</td> <td><input type = "checkbox" name = "checks" id='two'/>&nbsp;</td> </tbody> <p id = "check" ></p> <button onclick="kro()"> Result </button> </body> </html>

以下是我的表-

我想對選定的行執行進一步的操作，在代碼中，我只想使用警報輸出選定的行。 怎么做？

預期產出-

如果第一行被選中然后

Ram Sahi hai    Ravan:No

Answer 1

var selecteddata+=x[i].value+"\\n"; line 會拋出一個錯誤，所以在 for 循環之外聲明變量。 你也需要設置一個值復選框否則會如此on

要從所有td獲取內容，請獲取復選框的父級並獲取closest tr 。 然后從每個 td 中獲取text並將其添加到if塊的局部變量中

 function kro() { var x = document.getElementsByName('checks'); var selecteddata = ''; for (var i = 0; i < x.length; i++) { if (x[i].checked) { let _tt = ''; x[i].closest('tr').querySelectorAll('td').forEach(function(item) { _tt += item.textContent.trim(); }) selecteddata += _tt + "\\n"; } } alert(selecteddata) }

 <table> <thead> <tr> <th>UserName</th> <th>Post</th> <th>Comments</th> <th>Select</th> </tr> </thead> <tbody> <tr> <td>Ram</td> <td>Sahi hai</td> <td>Ravan:No</td> <td><input type="checkbox" name="checks" id='one' value='test1' />&nbsp;</td> </tr> <tr> <td>Ravan</td> <td>Kidnap done</td> <td>Ram:I'll kill you</td> <td><input type="checkbox" name="checks" id='two' value='test2' />&nbsp;</td> </tbody> <p id="check"></p> <button onclick="kro()"> Result </button>

Answer 2

您定義並連接到變量錯誤。

應該

 var foo = ''; // declare outside of loop for (var i=0; i<5; i++) { foo += i + '\\n' // concat to string } console.log(foo) //display it

人們會做的其他方式是使用數組並在最后加入它

 var foo = []; // declare outside of loop for (var i=0; i<5; i++) { foo.push(i) // add to array } console.log(foo.join('\\n')) //display it by joining the array items

如何對 HTML 表格中的復選框中的選定行執行操作

問題描述

2 個解決方案

解決方案1
1 已采納 2018-10-24 16:59:08

解決方案2
0 2018-10-24 16:59:18

如何對 HTML 表格中的復選框中的選定行執行操作

問題描述

2 個解決方案

解決方案1 1 已采納 2018-10-24 16:59:08

解決方案2 0 2018-10-24 16:59:18

解決方案1
1 已采納 2018-10-24 16:59:08

解決方案2
0 2018-10-24 16:59:18