如何对 HTML 表格中的复选框中的选定行执行操作
[英]How to perform operations on selected rows in checkbox in a table in HTML
问题描述
I have a table and I want to perform some operations(suppose doing output of selected rows in alert) on the rows which the user have checked on.
我有一个表，我想对用户检查过的行执行一些操作（假设在警报中输出选定的行）。 Following is my approach which is failing miserably-以下是我失败的方法 -
<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'/> </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'/> </td> </tbody> <p id = "check" ></p> <button onclick="kro()"> Result </button> </body> </html>
Following is my table-以下是我的表-
I want to perform further operations on the selected row ,in the code ,I just want to output the selected rows using alert.我想对选定的行执行进一步的操作，在代码中，我只想使用警报输出选定的行。 How to do that?怎么做？
Expected Output-预期产出-
if first row is checked then如果第一行被选中然后
Ram Sahi hai Ravan:No
2 个解决方案
解决方案1
1 已采纳 2018-10-24 16:59:08
var selecteddata+=x[i].value+"\\n"; line will throw an error, So declare the variable outside the for loop. line 会抛出一个错误，所以在 for 循环之外声明变量。 Also you need to set a value to checkbox otherwise it will so on你也需要设置一个值复选框否则会如此on
To get the content from all the td get the parent of the checkbox and get the closest tr .要从所有td获取内容，请获取复选框的父级并获取closest tr 。 Then get text from each of the td and add it in a local variable of the if block然后从每个 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' /> </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' /> </td> </tbody> <p id="check"></p> <button onclick="kro()"> Result </button>
解决方案2
0 2018-10-24 16:59:18
You define and concat to the variable wrong.您定义并连接到变量错误。
should be应该
var foo = ''; // declare outside of loop for (var i=0; i<5; i++) { foo += i + '\\n' // concat to string } console.log(foo) //display it
Other way people would do it is with an array and joining it at the end人们会做的其他方式是使用数组并在最后加入它
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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.