我有一张桌子上有学生的详细信息.这些字段是只读字段,可以在单击编辑按钮时进行编辑.但是我在单击编辑按钮时一次选择该行的所有输入字段时遇到问题.
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Checklist</th>
<th>Id</th>
<th>Student Name</th>
<th>Address</th>
<th>Phone</th>
<th>Class</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkBox" id="editCheck" class="btn1" />
<input type="checkBox" id="deleteCheck" />
</td>
<td>1</td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td>12</td>
<td><button type="button" class="btn btn-info btn-xs" id="btn1">Edit</button></td>
<td><button type="button" class="btn btn-danger btn-xs" id="dbtn1">Delete</button></td>
</tr>
<tr>
<td>
<input type="checkBox" id="editCheck" class="btn2" />
<input type="checkBox" id="deleteCheck" />
</td>
<td>1</td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td>12</td>
<td><button type="button" class="btn btn-info btn-xs" id="btn2">Edit</button></td>
<td><button type="button" class="btn btn-danger btn-xs" id="dbtn2">Delete</button></td>
</tr>
</tbody>
</table>
这是jquery.我按下编辑按钮选中了复选框.
$(document).ready(function(){
$('.btn.btn-info.btn-xs').click(function(){
var newClass = $(this).attr('id');
$('.'+newClass).prop('checked','true');
});
});
</script>
解决方法
您只需将其添加到单击处理程序中即可
$(this).closest('tr').find('input').removeAttr('readonly');
找到包含单击按钮的tr,找到其所有输入元素,并删除其readonly属性.
实例：http://jsfiddle.net/zxsq0m5n/
顺便说一句,您可以使用相同的技巧来找到您的复选框,无需使用id / class将编辑按钮绑定在一起
$('.btn.btn-info.btn-xs').click(function(){
var $tr = $(this).closest('tr')
$tr.find('input:checkBox').first().prop('checked','true');
$tr.find('input').removeAttr('readonly');
});
