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

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 个子项获取输入（如在 sn-p 中）

获取值：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>

Answer 2

如果我理解正确，你需要这样的东西：

const copy=(id) => {
  var value = document.getElementById("col"+id+"-input").value
  var list = document.getElementsByClassName("col"+id+"-input")
  for (i = 0; i < list.length; i++)
    list[i].value = value
}

document.getElementById("col1-button").addEventListener("click", ()=>copy(1))
document.getElementById("col2-button").addEventListener("click", ()=>copy(2))
document.getElementById("col3-button").addEventListener("click", ()=>copy(3))

<table>
  <tr>
    <td><input id="col1-input" class="col1-input"><button id="col1-button">OK</button><br>
      <td><input class="col1-input"></td>
      <td><input class="col1-input"></td>
      <td><input class="col1-input"></td>
      <td><input class="col1-input"></td>
  </tr>
  <tr>
    <td><input id="col2-input" class="col2-input"><button id="col2-button">OK</button><br>
      <td><input class="col2-input"></td>
      <td><input class="col2-input"></td>
      <td><input class="col2-input"></td>
      <td><input class="col2-input"></td>
  </tr>
  <tr>
    <td><input id="col3-input" class="col3-input"><button id="col3-button">OK</button><br>
      <td><input class="col3-input"></td>
      <td><input class="col3-input"></td>
      <td><input class="col3-input"></td>
      <td><input class="col3-input"></td>
  </tr>
</table>

Answer 3

试试这个... JQuery 解决方案。

祝你好运！

$(function() {
 
  $('button').on('click', function() {
    var inputVal = $(this).prev().val();
    
    // Plus one because arrays start at zero    
    var colIndex =  $(this).parent().parent().children().index($(this).parent()) + 1;
    
    $('table tr td:nth-child('+colIndex+')').not(':first')
      .html(inputVal);
    
  });
  
 
}); 

body { margin: 10px; }
table { max-width: 600px; }
td { min-width: 280px; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <table class="table table-bordered">
    <tr>
      <td><input type="text"><button type="button">Copy</button></td>
      <td><input type="text"><button type="button">Copy</button></td>
      <td><input type="text"><button type="button">Copy</button></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</form>