点击行编辑按钮时可以编辑行 [英] Making row editable when hit row edit button
问题描述
我是jQuery和JavaScript的新手。我试图点击我的表格中的编辑按钮，并使整行可编辑。由于某种原因，它无法正常工作。我认为它只是查看编辑按钮所在的单元格，但我不确定如何将整行更改为可编辑（编辑按钮字段除外）。我尝试从td标签级别将contenteditable移动到tr标签级别，但它没有解决它。我在看这个链接作为一个例子，但我认为有一些我错过了。这是我的代码的样子：
< head>
< title>< / title>
< script type =text / javascriptsrc =js / jquery-1.11.0.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（'＃btnHide'）。click（function（）{
// $（'td：nth-child（2） '）.hide（）;
//如果你的表有header（th），使用这个
$（'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]'）;
}
//否则不可编辑的行
}）; //移动了这个
}）;
< / script>
< / head>
< body>
< table id =tableoneborder =1>
< thead>
< tr>< th class =col1> Header 1< th class =col2> Header 2< th class =col3>标题3< th class =col3>标题4< / th>< / tr>
< / thead>
< tr class =del>
< td contenteditable =false>行0列0< / td> //实验后变为假
< td>< button class =editbtn>编辑< /按钮>< / td>
< td contenteditable =false>第0行第1列< / td>
< td contenteditable =false>第0行第2列< / td>
< / tr>
< tr class =del>
< td contenteditable =false>第1列0< / td>
< td>< button class =editbtn>编辑< /按钮>< / td>
< td contenteditable =false>第1行第1列< / td>
< td contenteditable =false>第1行第2列< / td>
< / tr>
< / table>
< input id =btnHidetype =buttonvalue =Hide Column 2/>
< / body>
你用按钮单击的代码太复杂了。
$（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）
}）;
}
$ b $（this）.html（$（this）.html（）=='编辑'？'保存'：'编辑'）
}）;
}）;
代码解释：
$ b <1> Get （tr）中的所有tds使用下面的代码：
var currentTD = $（this）.parents（'tr'）。找到（ 'TD'）;
2）然后像往常一样迭代每个 td s并更改它的 contenteditable 属性，如下所示
<$ c （currentTD，function（）{
$（this）.prop（'contenteditable'，true）
}）;
I'm new to jQuery and JavaScript. I'm trying to click on my Edit button in my table and make the entire row editable. For some reason it's not working. I think it's only looking at the cell the edit button is in, but I'm not sure how to make it change the entire row to be editable (except the edit button field). I tried moving contenteditable to the tr tag level from the td tag level but it didn't fix it. I was looking at this link as an example, but I think there's something I'm missing. Here is what my code looks like:
<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>
You code with the button click is too complicated. I have reduce it by making it too easy to understand.
$(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')
});
});
Code Explained:
1) Get the all the tds within the tr using the below code
var currentTD = $(this).parents('tr').find('td');
2) Then as usual iterate through each tds and change its contenteditable property like below
$.each(currentTD, function () {
$(this).prop('contenteditable', true)
});
这篇关于点击行编辑按钮时可以编辑行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
