需要將單元格值複製到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>