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>

以下是我的表-

我想对所选行执行进一步的操作，在代码中，我只想使用alert输出所选行。该怎么做？

预期输出-

如果选中了第一行，则

Ram Sahi hai    Ravan:No

Answer 1

var selecteddata+=x[i].value+"\n";行将引发错误，因此请在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 个答案: