Ad
How To Make A HTML Table Cell Into A Editable Text Box
Basically, I want the the user to click the table and edit the text.
This is the Js Fiddle I followed:
http://jsfiddle.net/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.com/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>
Ad
Answer
- 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.com/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>
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad