在前端開發中,我們通常會遇到需要在表格中選擇單行的需求,那么如何利用jquery實現表格radio選擇行呢?
首先,我們需要在表格中添加一個radio單選框,用于選中每一行,代碼如下:
<table> <thead> <tr> <th></th> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> </thead> <tbody> <tr> <td><input type="radio" name="rowRadio"></td> <td>小明</td> <td>男</td> <td>18</td> </tr> <tr> <td><input type="radio" name="rowRadio"></td> <td>小紅</td> <td>女</td> <td>20</td> </tr> <tr> <td><input type="radio" name="rowRadio"></td> <td>小李</td> <td>男</td> <td>22</td> </tr> </tbody> </table>
然后,我們需要編寫jquery代碼實現選中表格中的單行,并給選中的行添加特定樣式,代碼如下:
$('input[type=radio][name=rowRadio]').change(function() { $('tbody tr').removeClass('selected'); $(this).closest('tr').addClass('selected'); });
以上代碼中,我們首先綁定了radio的change事件,然后將所有表格行的class都移除,再給選中的行添加selected樣式。
最后,我們需要編寫css代碼來定義selected樣式,用于區分選中的行,代碼如下:
.selected { background-color: #ccc; }
以上就是利用jquery實現表格radio選擇行的方法,希望對你有所幫助。
上一篇div name
下一篇div img 多出來