Question

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

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

Answer 1

假设您有一个在每行上都有一个按钮的表，请为该按钮指定一个类，以便为其分配事件：

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

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

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

您可以使用var col = $(this).closest("td").index()获取按钮的列（因为.index()是从0开始的，所以添加1，但是我们需要从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>

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>

将所有列单元格输入值与第一个列单元格输入值复制

3 个答案: