javascript - how to copy all data in a row to all other rows -
javascript - how to copy all data in a row to all other rows -
<table id="ratecardlist"> <tr> <th> show time</th> <th> balcony </th> <th> box </th> <th> </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 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> </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> </td> </tr> . . . </table>
apply link in sec row. when click apply all, input values in row should re-create other rows input fields. how plz help.
e.g. after click apply all,
<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 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> </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> </td> </tr> . . . </table>
first, way you're handling click event not provide plenty context (e.g. clicked element) handler. ideally, decorate link id or class attribute , utilize register handler unobtrusively (through jquery's click() method, instance).
if you're stuck current strategy, should @ to the lowest degree pass clicked element handler:
<a href="#" onclick="applytoall(this);">apply all</a> from there, can implement function follows:
function applytoall(element) { // build array values of row, in document order. var $row = $(element).closest("tr"); var values = $row.find("input:text").map(function() { homecoming $(this).val(); }).get(); // apply values other rows. $row.nextall().each(function() { $(this).find("input:text").each(function(index) { $(this).val(values[index]); }); }); } this solution supports arbitrary number of input elements per row, not two.
javascript jquery jquery-ui
Comments
Post a Comment