Question

我有一个包含四列的表格，名称，年龄，国家和一个复选框。如果单击复选框（true），则该行的name值将显示在textarea中。

我不太确定如何实现这一目标。

一行：

<tr>
    <th scope="row">1</th>
    <td>James</td>
    <td>13</td>
    <td>France</td>
    <td><input type="checkbox"></td>
</tr>

如果该复选框为true，则应在文本区域中显示“ James”值。

谢谢大家。

Answer 1

我相信您需要对表中的多行执行此操作。

首先用Document.querySelectorAll()选中所有复选框，以将事件（ click ）附加到所有复选框。

Document方法querySelectorAll()返回一个静态（非实时）NodeList，它表示与指定选择器组匹配的文档元素的列表。

在事件（ click ）处理函数中，以所有选中的复选框为目标，以循环使用它们，以使用{{3 }}：

Array.prototype.map()方法创建一个新数组，其中填充了对调用数组中每个元素调用提供的函数的结果。

在同一 tr 元素内混合 th 和 td 也是一种不好的做法。您应将 th 放在 thead 内，并将 td 放在 tbody 元素内：

var cb = document.querySelectorAll('input[type=checkbox]');
cb.forEach(function(ck){
  ck.addEventListener('click', function(el){
    var checked = document.querySelectorAll(':checked');
    var tArea = document.getElementById('myText');
    tArea.value = Array.from(checked).map(c => c.closest('tr').querySelector('td:nth-child(2)').textContent);
    //or using spread syntax
    //tArea.value = [...checked].map(c => c.closest('tr').querySelector('td:nth-child(2)').textContent);
  });
});

table, th, td {
  border: 1px solid black;
}

<table>
  <thead>
    <tr>
      <th>Sl</th>
      <th>Name</th>
      <th>No</th>
      <th>Country</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>James</td>
      <td>13</td>
      <td>France</td>
      <td><input type="checkbox"></td>
    </tr> 
    <tr>
      <td scope="row">2</td>
      <td>John</td>
      <td>15</td>
      <td>Germany</td>
      <td><input type="checkbox"></td>
    </tr> 
  </tbody>
</table>
<textarea id="myText"></textarea>

Answer 2

尝试一下：

[...document.querySelectorAll("input[type='checkbox']")].forEach(function (v){
v.addEventListener("change", function(){
document.querySelector("textarea").value = (this).checked ? (this).parentElement.parentElement.querySelector("td").innerHTML:'';
})});

<table>
             <tr>
                <th scope="row">1</th>
                <td>James</td>
                <td>13</td>
                <td>France</td>
                <td><input type="checkbox"></td>
            </tr> 
             <tr>
                <th scope="row">1</th>
                <td>James</td>
                <td>13</td>
                <td>France</td>
                <td><input type="checkbox"></td>
            </tr> 
</table>
<textarea></textarea>

Answer 3

很少有javascript行可以满足您的需求。

let input = document.querySelector('input');

input.addEventListener('change', e=> {
  if(e.target.checked == true){
    // retreive tags
    let name = document.querySelector('.name');
    let textarea = document.querySelector('.textarea');
    // insert data
    textarea.innerText += name.innerText
  }
})

<table>
  <tr>
    <th scope="row">1</th>
    <td class="name">James</td>
    <td>13</td>
    <td>France</td>
    <td><input type="checkbox"></td>
  </tr>   
</table>

<textarea class="textarea"></textarea>

Answer 4

由于您的表可以有多行，每行都可以设置复选框，所以textarea可以得到零个，一个或多个名称。

因此，您需要监听change事件，然后迭代行以收集名称，以最终设置textarea的值：

let textarea = document.querySelector("textarea");
let table = document.querySelector("table");
table.addEventListener("change", function (e) {
    let names = [];
    for (let row of table.rows) {
        if (row.querySelector("input[type=checkbox]").checked) {
            names.push( row.children[1].textContent);
        }
    }
    textarea.value = names.join("\n");
});

<table><tr>
    <th scope="row">1</th>
    <td>James</td>
    <td>13</td>
    <td>France</td>
    <td><input type="checkbox"></td>
</tr><tr>
    <th scope="row">2</th>
    <td>Lucy</td>
    <td>14</td>
    <td>Germany</td>
    <td><input type="checkbox"></td>
</tr></table>
<textarea></textarea>

如果复选框为true，则在textarea中显示值

4 个答案: