Basically, I want the the user to click the table and edit the text.
This is the Js Fiddle I followed:
/
Below you will be able see the code I have put together. I have followed a JS fiddle and thought of using this in my page.
When I double click the cell nothing happens, I am not sure why is not working.
Please help to find what's missing!
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<script type="text/javascript">
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
$(this).find('input').dblclick(function(e){
e.stopPropagation();
});
});
});
</script>
<script type="text/javascript" src="//ajax.googleapis/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<table class="editableTable">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Shahid</td>
<td>[email protected]</td>
<td>012-234-2432</td>
</tr>
</tbody>
</table>
<a href=''> ssiddique </a>
</body>
</html>
Basically, I want the the user to click the table and edit the text.
This is the Js Fiddle I followed:
http://jsfiddle/ddd3nick/ExA3j/22/
Below you will be able see the code I have put together. I have followed a JS fiddle and thought of using this in my page.
When I double click the cell nothing happens, I am not sure why is not working.
Please help to find what's missing!
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<script type="text/javascript">
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
$(this).find('input').dblclick(function(e){
e.stopPropagation();
});
});
});
</script>
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<table class="editableTable">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Shahid</td>
<td>[email protected]</td>
<td>012-234-2432</td>
</tr>
</tbody>
</table>
<a href='http://ssiddique.info'> ssiddique </a>
</body>
</html>
- When I double-click the cell in the table, It is not turning into a text box to get the input. jsfiddle/ddd3nick/ExA3j/22 ( Link to the JS fiddle ) – user2128912 Commented Jan 7, 2016 at 1:23
- 1 What browser are you using? Fiddle works in FF 42 – artm Commented Jan 7, 2016 at 1:25
- might wanna take a look at contentEditable – Uzi Commented Jan 7, 2016 at 1:26
- Working fine in Chrome – Tony L. Commented Jan 7, 2016 at 1:26
- @artm I tried the fiddle in Google Chrome.. It works , bt when I try the code on the local server nothing happens. – user2128912 Commented Jan 7, 2016 at 1:26
1 Answer
Reset to default 5- First include the jQuery library
- Than put your script
- You might want to take a look at contenteditable Elements
which would than look pretty much like this:
$(function() {
var $td = $("td");
$td.on({
"keypress" : function(e) {
if (e.which !== 13) { // On Return key - "save" cell
e.preventDefault();
$(this).prop("contenteditable", false);
}
},
"dblclick" : function() {
$td.not(this).prop("contenteditable", false);
$(this).prop("contenteditable", true);
}
});
});td, th { padding:5px; border: 1px solid #ddd; }
td[contenteditable=true] { outline: 2px solid #0af; }<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<p><b>Double-click</b> on a table cell to edit</p>r
<table>
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>000</td>
<td>Roko</td>
<td>[email protected]</td>
<td>021-321-4321</td>
</tr>
<tr>
<td>001</td>
<td>Shahid</td>
<td>[email protected]</td>
<td>012-123-1234</td>
</tr>
</tbody>
</table>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744373067a4571051.html
评论列表（0条）