Making row editable when hit row edit button
Question
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>
3 answers
solution1
15 ACCPTED 2014-05-09 19:40:06
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 td s and change its contenteditable property like below
$.each(currentTD, function () {
$(this).prop('contenteditable', true)
});
solution2
2 2014-05-09 19:59:10
Try this:
$('.editbtn').click(function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.editbtn').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
$this.html('Edit');
tds.prop('contenteditable', false);
}
});
solution3
0 2017-04-30 22:58:07
Try this. I created right now. I hope this can help.
jQuery(document).ready(function() {
$('#edit').click(function () {
var currentTD = $(this).closest('tr');
if ($(this).html() == 'Edit') {
$(currentTD).find('.inputDisabled').prop("disabled",false);
} else {
$(currentTD).find('.inputDisabled').prop("disabled",true);
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.