Menu
Make table cells editable on click. On click – the cell should become “editable” (textarea appears inside), we can change HTML. There should be no resize, all geometry should remain the same. Buttons OK and CANCEL appear below the cell to finish/cancel the editing.
After creating a table in JavaScript, you can insert and combine rows and columns or format the table by adjusting table cell widths, colors, and alignment. You can use the contenteditable attribute on the cells, rows, or table to edit a table.
You can use the contenteditable attribute on the cells, rows, or table in question.
Updated for IE8 compatibility
<table>
<tr><td><div contenteditable>I'm editable</div></td><td><div contenteditable>I'm also editable</div></td></tr>
<tr><td>I'm not editable</td></tr>
</table>
Just note that if you make the table editable, in Mozilla at least, you can delete rows, etc.
You'd also need to check whether your target audience's browsers supported this attribute.
As far as listening for the changes (so you can send to the server), see contenteditable change events
HTML5 supports contenteditable,
<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>
To quote the mdn entry on contenteditable
The attribute must take one of the following values:
true or the empty string, which indicates that the element must be editable;
false, which indicates that the element must not be editable.
If this attribute is not set, its default value is inherited from its parent element.
This attribute is an enumerated one and not a Boolean one. This means that the explicit usage of one of the values true, false or the empty string is mandatory and that a shorthand ... is not allowed.
// wrong not allowed
<label contenteditable>Example Label</label>
// correct usage
<label contenteditable="true">Example Label</label>.
I have three approaches,
Here you can use both <input> or <textarea> as per your requirements.
1. Use Input in <td>.
Using <input> element in all <td>s,
<tr><td><input type="text"></td>....</tr>
Also, you might want to resize the input to the size of its td. ex.,
input { width:100%; height:100%; }
You can additionally change the colour of the border of the input box when it is not being edited.
2. Use contenteditable='true' attribute. (HTML5)
However, if you want to use contenteditable='true', you might also want to save the appropriate values to the database. You can achieve this with ajax.
You can attach keyhandlers keyup, keydown, keypress etc to the <td>. Also, it is good to use some delay() with those events when user continuously types, the ajax event won't fire with every key user press. for example,
$('table td').keyup(function() {
clearTimeout($.data(this, 'timer'));
var wait = setTimeout(saveData, 500); // delay after user types
$(this).data('timer', wait);
});
function saveData() {
// ... ajax ...
}
3. Append <input> to <td> when it is clicked.
Add the input element in td when the <td> is clicked, replace its value according to the td's value. When the input is blurred, change the `td's value with the input's value. All this with javascript.
This is a runnable example.
$(function(){
$("td").click(function(event){
if($(this).children("input").length > 0)
return false;
var tdObj = $(this);
var preText = tdObj.html();
var inputObj = $("<input type='text' />");
tdObj.html("");
inputObj.width(tdObj.width())
.height(tdObj.height())
.css({border:"0px",fontSize:"17px"})
.val(preText)
.appendTo(tdObj)
.trigger("focus")
.trigger("select");
inputObj.keyup(function(event){
if(13 == event.which) { // press ENTER-key
var text = $(this).val();
tdObj.html(text);
}
else if(27 == event.which) { // press ESC-key
tdObj.html(preText);
}
});
inputObj.click(function(){
return false;
});
});
});<html>
<head>
<!-- jQuery source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<table align="center">
<tr> <td>id</td> <td>name</td> </tr>
<tr> <td>001</td> <td>dog</td> </tr>
<tr> <td>002</td> <td>cat</td> </tr>
<tr> <td>003</td> <td>pig</td> </tr>
</table>
</body>
</html>I am using this for editable field
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Citation</th>
<th class="text-center">Security</th>
<th class="text-center">Implementation</th>
<th class="text-center">Description</th>
<th class="text-center">Solution</th>
<th class="text-center">Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pt-3-half" contenteditable="false">Aurelia Vega</td>
<td class="pt-3-half" contenteditable="false">30</td>
<td class="pt-3-half" contenteditable="false">Deepends</td>
<td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="spain" class="border-none"></td>
<td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="marid" class="border-none"></td>
<td>
<span class="table-remove"><button type="button"
class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>
</td>
</tr>
</tbody>
</table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With