enabled text box in the table with rowspan using jquery -
i stuck in problem, have following html structure. initially, text box disabled.
when tick checkbox in first column, want enable text box in line. problem can enable text boxs except "tag 02". believe there "rowspan=2" in row2, code cannot find td in tag02 line. post code below, me figure out problem? lot.
<html> <body> <table border="1" id="settbl" cellspacing="0" cellpadding="0" width="500"> <thead> <tr> <th></th> <th colspan="2">setting</th> <th>value</th> <th>units</th> <th> </th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"/></td> <td colspan="2">row1</td> <td><input type="text"/></td> <td>units</td> <td rowspan="10"><button>edit</button></td> </tr> <tr> <td rowspan="2"><input type="checkbox"/></td> <td rowspan="2">row2</td> <td>tag 01</td> <td><input type="text"/></td> <td>units</td> </tr> <tr> <td>tag 02</td> <td><input type="text"/></td> <td>units</td> </tr> <tr> <td><input type="checkbox"/></td> <td colspan="2">row3</td> <td><input type="text"/></td> <td>units</td> </tr> </tbody> </table> </body> </html> my code here:
function enablerows(){ $('#settbl tr').filter(':has(:checkbox:checked)').each(function() { $(this).find('input[type=text],select').each(function() { this.disabled = false;//only enable "row1","row2->tag01" , "row3". }); }); }
you doing search $('#settbl tr').filter(':has(:checkbox:checked)') means , return <tr> having check box checked. in code can see tag02's parent <tr> doesn't have check box . should put both <input> want checked inside same <tr> check box .
<tr> <td rowspan="2"><input type="checkbox"/></td> <td rowspan="2">row2</td> <td>tag 01</td> <td><input type="text"/></td> <td>units</td> </tr> <tr> <td>tag 02</td> <td><input type="text"/></td> <td>units</td> </tr> you can try codes.
<html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> function enablerows() { $('#settbl tr').filter(':has(:checkbox:checked)').each(function() { $(this).find('input[type=text],select').each(function() { this.disabled = false; }); }); } </script> </head> <body> <table border="1" id="settbl" cellspacing="0" cellpadding="0" width="500"> <thead> <tr> <th></th> <th colspan="2">setting</th> <th>value</th> <th>units</th> <th> </th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"/></td> <td colspan="2">row1</td> <td><input type="text" disabled /></td> <td>units</td> <td rowspan="10"><button>edit</button></td> </tr> <tr> <td ><input type="checkbox"/></td> <td > <table> <tr> <td> row2 </td> <tr> </tr> <td> row2 </td> </tr> </table> </td> <td> <table> <tr> <td> tag 01 </td> <tr> </tr> <td> tag 02 </td> </tr> </table> </td> <td> <table> <tr> <td> <input type="text" disabled /></td> </td> <tr> </tr> <td> <input type="text" disabled /></td> </td> </tr> </table> </td> <td> <table > <tr> <td> <td>units</td> </td> <tr> </tr> <td> <td>units</td> </td> </tr> </table> </td> </tr> <tr> <td><input type="checkbox"/></td> <td colspan="2">row3</td> <td><input type="text" disabled /></td> <td>units</td> </tr> </tbody> </table> <button onclick="enablerows();">enable rows</button> </body> </html>
Comments
Post a Comment