需要将单元格值复制到html表中的另一个单元格

Question

我正在使用简单的html代码，我想将第一个单元格的值复制到所有其他单元格。 this how html table looks 也试图自动填充剩余日期时，我给在第一小区

添加以下

Answer 1

假设你想要这个，所以我希望这是有益

function bindData(target) { 
 
    var inputs = document.querySelectorAll(target); 
 

 
    if (inputs) { 
 
    for (var k = 0; k < inputs.length; k++) { 
 
     inputs[k].addEventListener('keyup', function() { 
 
     var fields = document.querySelectorAll(this.dataset.bind); 
 
     var value = this.value; 
 
     if (fields) { 
 
      for (var i = 0; i < fields.length; i++) { 
 
      fields[i].value = value; 
 
      } 
 
     } 
 

 
     }); 
 
    } 
 
    } 
 

 
} 
 

 
bindData('[data-bind]');

<table> 
 
    <tr> 
 
    <td> 
 
     <input data-bind=".date" type="text"> 
 
    </td> 
 
    <td> 
 
     <input class="date" type="text"> 
 
    </td> 
 
    <td> 
 
     <input class="date" type="text"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input data-bind=".name" type="text"> 
 
    </td> 
 
    <td> 
 
     <input class="name" type="text"> 
 
    </td> 
 
    <td> 
 
     <input class="name" type="text"> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

所以我的代码输入你想根据第一输入改变数值为后者的输入/选择每行。给他们id s，所以我们可以用jQuery添加事件：<input id="date-proto"><select id="name-proto">。对于每行的其余部分，请分别添加一个类：<input class="date-clone"><input class="name-clone">。现在事件监听器：$('#date-proto').keyup(function() {$(.date-clone).val($(this).val());});$('#name-proto').change(function() {$(.name-clone).val($(this).val());});。通常我会发现keyup的文字输入事件更符合我的需求，您可以试试change并查看会发生什么。

Answer 3

This is the code i am working on... 

<form><table> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function() { 
    $("#datepicker").datepicker(); 
$("#datepicker1").datepicker(); 
$("#datepicker2").datepicker(); 
$("#datepicker3").datepicker(); 
$("#datepicker4").datepicker(); 
$("#datepicker5").datepicker(); 
$("#datepicker6").datepicker(); 

    }); 
    </script> 
<Th>Date</th> 
<Td><input id="datepicker"/></td> 
<Td><input id="datepicker1"/></td> 
<Td><input id="datepicker2"/></td> 
<Td><input id="datepicker3"/></td> 
<Td><input id="datepicker4"/></td> 
<Td><input id="datepicker5"/></td> 
<Td> <input id="datepicker6"/></td> 
</tr> 
<tr> 
<th>Emp Name</th> 
<td><input type="text" name="cell1"></td> 
<td><input type="text" name="cell1"></td> 
<td><input type="text" name="cell1"></td> 

</tr> 
<th>Name:</Th> 
<td> 
<input type="text" name="source"></td> 
<br><td> 
</td> <td> 
<input type="text" name="dest1"></td> 
<br> 
<input type="checkbox" name="copy" onclick="copy(this.form)"> 
<em>Check this box if you wanna copy.</em> 
<P> 

<br><br><td> 
</td><td><input type="text" name="dest2"></td> 
</td> 
<br><td> 
</td><td> 
<input type="text" name="dest3"></td></td> 
</form> 
<script>function FillBilling(t) { 
    if(t.copy.checked == true) { 
    t.dest1.value = t.source.value; 
    t.dest2.value = t.source.value; 
    t.dest3.value = t.source.value; 
    } 
}</script>