Mic*_*ele 4 html javascript jquery
我是jQuery和JavaScript的新手.我正在尝试单击表格中的"编辑"按钮,使整行可编辑.由于某种原因,它不起作用.我认为它只是查看编辑按钮所在的单元格,但我不知道如何让它将整行更改为可编辑(编辑按钮字段除外).我尝试从td标签级别移动contenteditable到tr标签级别,但它没有修复它.我正在看这个链接作为一个例子,但我认为有些东西我不见了.这是我的代码的样子:
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnHide').click(function() {
//$('td:nth-child(2)').hide();
// if your table has header(th), use this
$('td:nth-child(3),th:nth-child(3)').hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.editbtn').click(function(){
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit');
if('td[contenteditable=true]')) {
'td[contenteditable=false]');
}
else if('td[contenteditable=false]')){
'td[contenteditable=true]');
}
//else not editable row
}); //moved this
});
</script>
</head>
<body>
<table id="tableone" border="1">
<thead>
<tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th><th class="col3">Header 4</th></tr>
</thead>
<tr class="del">
<td contenteditable="false">Row 0 Column 0</td> //changed to false after experiment
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 0 Column 1</td>
<td contenteditable="false">Row 0 Column 2</td>
</tr>
<tr class="del">
<td contenteditable="false">Row 1 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 1 Column 1</td>
<td contenteditable="false">Row 1 Column 2</td>
</tr>
</table>
<input id="btnHide" type="button" value="Hide Column 2"/>
</body>
Pra*_*een 15
单击按钮的代码太复杂了.我通过让它太容易理解来减少它.
$(document).ready(function () {
$('.editbtn').click(function () {
var currentTD = $(this).parents('tr').find('td');
if ($(this).html() == 'Edit') {
$.each(currentTD, function () {
$(this).prop('contenteditable', true)
});
} else {
$.each(currentTD, function () {
$(this).prop('contenteditable', false)
});
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
});
});
代码说明:
1)使用以下代码获取tr中的所有tds
var currentTD = $(this).parents('tr').find('td');
2)然后像往常一样迭代每个tds并改变它的contenteditable属性,如下所示
$.each(currentTD, function () {
$(this).prop('contenteditable', true)
});
| 归档时间： |
|
| 查看次数： |
49720 次 |
| 最近记录： |