如何將所有數據連續複製到所有其他行

Question

<table id="ratecardlist"> 
    <tr> 
     <th> Show Time</th> 
     <th> Balcony </th> 
     <th> Box </th> 
     <th> &nbsp; </th> 
    </tr> 
    <tr> 
     <td>10.30AM</td>   
     <td><input type="text" name="bal:1:3" value="100" /> </td> 
     <td><input type="text" name="box:1:5" value="200" /> </td> 
     <td><a href="#" onClick="applytoAll();">Apply To All</a></td> 
    </tr> 
    <tr> 
     <td>1.30PM</td>   
     <td><input type="text" name="bal:3:3" value="400" /> </td> 
     <td><input type="text" name="box:3:5" value="450"/> </td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>6.30PM</td>   
     <td><input type="text" name="bal:5:3" value="600" /> </td> 
     <td><input type="text" name="box:5:5" value="600" /> </td> 
     <td>&nbsp;</td> 
    </tr> 
     . 
     . 
     . 
</table> 

應用於所有鏈接將始終在第二行。當我單擊應用於全部時，此行中的輸入值應複製到其他行輸入字段。如何做到這一點幫助。

例如 後點擊應用到所有，

<table id="ratecardlist"> 
    <tr> 
     <th> Show Time</th> 
     <th> Balcony </th> 
     <th> Box </th> 
    </tr> 
    <tr> 
     <td>10.30AM</td>   
     <td><input type="text" name="bal:1:3" value="100" /> </td> 
     <td><input type="text" name="box:1:5" value="200" /> </td> 
     <td><a href="#" onClick="applytoAll();">Apply To All</a></td> 
    </tr> 
    <tr> 
     <td>1.30PM</td>   
     <td><input type="text" name="bal:3:3" value="100" /> </td> 
     <td><input type="text" name="box:3:5" value="200"/> </td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>6.30PM</td>   
     <td><input type="text" name="bal:5:3" value="100" /> </td> 
     <td><input type="text" name="box:5:5" value="200" /> </td> 
     <td>&nbsp;</td> 
    </tr> 
     . 
     . 
     . 
</table> 

Answer 1

首先，你處理click事件不會提供足夠的情況下（例如在點擊的元素）的處理方式。理想情況下，您可以用id或class屬性來修飾鏈接，並使用該屬性不加區分地註冊處理程序（例如，通過jQuery的click()方法）。

如果你堅持你目前的策略，你至少應該在點擊的元素傳遞到處理程序：

<a href="#" onClick="applyToAll(this);">Apply To All</a> 

從那裏，你可以實現的功能如下：

function applyToAll(element) 
{ 
    // Build an array with the values of this row, in document order. 
    var $row = $(element).closest("tr"); 
    var values = $row.find("input:text").map(function() { 
     return $(this).val(); 
    }).get(); 

    // Apply the values to the other rows. 
    $row.nextAll().each(function() { 
     $(this).find("input:text").each(function(index) { 
      $(this).val(values[index]); 
     }); 
    }); 
} 

該解決方案每行支持任意數量的輸入元素，而不僅僅是兩個。

Answer 2

假設你正在使用jQuery：

$('#ratecardlist a').click(function(){ 
    var balVal = $(this).closest('tr').find('td[name^=bal]').val(); 
    var boxVal = $(this).closest('tr').find('td[name^=box]').val(); 
    $('#ratecardlist td[name^=bal]').val(balVal); 
    $('#ratecardlist td[name^=box]').val(boxVal); 
}); 

Answer 3

$(function(){ 
    $('#applyToAll').click(function(){ 
     var ctx = $(this).closest('tr'); 
     $('input[name^="bal"]').val($('input[name^="bal"]', ctx).val()); 
     $('input[name^="box"]').val($('input[name^="box"]', ctx).val()); 
     return false; 
    }); 
}); 

這裏是code demo。

Answer 4

這是原油，但應該工作：

function applyToAll() 
{ 
var bal_val = this.parentNode.parentNode.childNodes[1].childNodes[0].value; 
var box_val = this.parentNode.parentNode.childNodes[2].childNodes[0].value; 
var inps = this.parentNodes.parentNode.parentNode.getElementsByTagName('input'); 

for (i=0; i<inps.length; i++) 
{ 
    inp = inps[i]; 
    inp.value = bal_val; 
    inp = inps[i+1]; 
    inp.value = box_val; 
    i++; 
} 
}