javascript - 使用第一个列单元格输入值复制所有列单元格输入值

Question

我有一个由表单包装的 html 表格，每个单元格中都有一个输入元素。

我想知道是否有一种方法可以获得特定列的第一个单元格的输入值，并将该值粘贴到该列的其余单元格中。换句话说，用户将在第一个单元格的输入字段中键入内容，然后单击按钮将该条目复制到该列的其余单元格中。

Answer 1

假设您有一个每行都有一个按钮的表格，请为该按钮指定一个类，以便它可以分配一个事件:

<button type='button' class='copybtn'>copy</button>

不要使用 ID，因为您需要多个按钮；

$(".copybtn").click(function() {

您可以使用 var col = $(this).closest("td").index() 获取按钮的列 (加 1 因为 .index() 是从 0 开始的，但我们需要从 1 开始 :nth-child )。

使用以下方式获取列单元格:

var cells = $("table").find("tr > td:nth-child(" + col + ")");

处理此问题的各种方法 - 例如，获取上面的所有单元格，然后获取第一个用于输入，最后一个用于按钮，或者从第一行的第 n 个子级获取输入(如代码片段中所示)

获取值:var val = inp.val()

要复制值，取决于您的 HTML，您可以为每个目标单元格指定一个类:

cells.find("td.dest").text(val);

或者您可以获取所有单元格并排除第一个/最后一个:

tbl.find("tr:not(:first):not(:last) > td:nth-child(" + col + ")").text(val);

总共:

$(".copybtn").click(function() {
  // get 0-based column index
  var col = $(this).closest("td").index() + 1;
  var tbl = $(this).closest("table");
  var val = tbl.find("tr:first td:nth-child(" + col + ")").find("input").val();
  tbl.find("tr:not(:first):not(:last) > td:nth-child(" + col + ")").text(val);
});

input {
  width: 50px;
}

td {
  min-width: 20px;
  border: 1px solid #CCC;
  margin: 0;
  padding: 5px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='t'>
  <tbody>
    <tr>
      <td><input type='text' class='inp' /></td>
      <td><input type='text' class='inp' /></td>
      <td><input type='text' class='inp' /></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td><button type='button' class='copybtn'>copy</button></td>
      <td><button type='button' class='copybtn'>copy</button></td>
      <td><button type='button' class='copybtn'>copy</button></td>
    </tr>
  </tbody>
</table>