To implement the editable table function, we need to solve the following problems: 1. Clarify which columns in the table the data to be modified are (how to find these cells); 2. How to make the cells editable Edited; 3. How to handle some key events of cells; 4. Solve cross-browser issues. We can solve the above problems step by step through jQuery. 1. Draw a table First we draw a table. " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Cross-browser editable table for jQuery
Click on the table to edit
Student number
Name
< ;tr>
000001
Zhang San
李思
000003
王五
000004
Zhao Liu
After drawing the table, it will be displayed as shown below: editTable01.jpg
Obviously it doesn’t look like a table, it has no borders and is ugly. So let's set some styles for this table first. Code2:
Copy code
The code is as follows: body{}{ font-size: 14px; }
But there are still overlapping borders between cells. You only need to add such an attribute to the label selector table to remove duplicate borders: border-collapse: collapse;
Copy code The code is as follows: table{}{ color: #4F6B72; border: 1px solid #C1DAD7;
2. Let the cells of the table The grid becomes an editable column After drawing the table, we select the numbered column in the table as an editable column. To make the cells in this column editable, you need to insert text boxes in these columns. We insert text boxes through the onclick event of the cells in this column. Code3:
Copy code
The code is as follows:
$(document).ready(function(){ //Find all the cells in the column of student number //Because the cells in the column of student number are in all TDs is an even number (0,2,4,6), so you can filter to the even-numbered cells in td through even var numTd = $("tbody td:even"); //Click these td, create a text box numTd.click(function(){ //Create a text box object var inputobj = $(""); //Get the currently clicked cell object var tdobj = $(this); //Remove the border of the text box inputobj.css("border","0"); //Make the width of the text box and the cell consistent inputobj.width(tdobj.width()); //Make the font size of the text box the same as the font size of the cell inputobj.css( "font-size",tdobj.css("font-size")); //Make the text box and cell font consistent inputobj.css("font-family",tdobj.css( "font-family")); //Make the background of the text box and cell consistent inputobj.css("background-color",tdobj.css("background-color")); //appendTo method adds the text box to td inputobj.appendTo(tdobj); }); });
Now the text box has been inserted into The cell is in. Since we want to edit the text box, the text box should have a value. The value of the text box comes from the data in the cell, and we need to clear the original data in the cell. Code4:
$(document).ready( function(){ //Find all cells in the student number column //Because the position of the cells in the student number column in all td is an even number (0, 2, 4, 6), so Through even, you can filter to even-numbered cells in td var numTd = $("tbody td:even"); //When you click these td, create a text box numTd.click( function(){ //Create a text box object var inputobj = $(""); //Get the currently clicked cell object var tdobj = $(this); //Get the text in the cell var text = tdobj.html(); //Clear the text in the cell tdobj.html("" ); //Remove the border of the text box inputobj.css("border","0"); //Make the width of the text box and cell consistent inputobj.width( tdobj.width()); //Make the font size of the text box the same as the font size of the cell inputobj.css("font-size",tdobj.css("font-size")); //Make the fonts of the text box and the cell consistent inputobj.css("font-family",tdobj.css("font-family")); //Make the text box and the cell the same The background remains consistent inputobj.css("background-color",tdobj.css("background-color")); inputobj.css("color","#C75F3E"); / /Assign a value to the text box inputobj.val(text); //The appendTo method adds the text box to td inputobj.appendTo(tdobj); }); }) ;
But the above code looks very cumbersome. jQuery has a very good advantage, that is, its code concatenation. The above code can be simplified by concatenating: Code5:
$(document).ready(function(){ //Find all cells in the student number column //Because the position of the cells in the student number column in all td is an even number (0 ,2,4,6), so you can filter to even-numbered cells in td through even var numTd = $("tbody td:even"); //When you click these td, create Text box numTd.click(function(){ //Create text box object var inputobj = $(""); //Get The currently clicked cell object var tdobj = $(this); //Get the text in the cell var text = tdobj.html(); //Clear the text of the cell tdobj.html(""); inputobj.css("border","0") .css("font-size",tdobj.css("font-size")) .css("font-family",tdobj.css("font-family")) .css("background-color",tdobj.css("background-color")) .css ("color","#C75F3E") .width(tdobj.width()) .val(text) .appendTo(tdobj); }); }) ;
Now the text box has been successfully inserted into the table and the cells can be edited. editTable04.jpg But there is an obvious bug, when you click the same cell again, the following effect will appear:
editTable05.jpg
What is the cause of the above bug? Because after a cell is inserted into the text box, the text box belongs to the cell. When we click on the text box, the click event of the cell will also be triggered. We need to prevent the click behavior of the text box (prevent event bubbling). Code6:
But when clicking the border of the cell, the above bug will still appear, then we make the following judgment: If the cell has been inserted Text box, click event will pop up. Code7:
$(document).ready( function(){ //Find all cells in the student number column //Because the position of the cells in the student number column in all td is an even number (0, 2, 4, 6), so Through even, you can filter to even-numbered cells in td var numTd = $("tbody td:even"); //When you click these td, create a text box numTd.click( function(){ //Create a text box object var inputobj = $(""); //Get the currently clicked cell object var tdobj = $(this); //Get the text in the cell var text = tdobj.html(); //If there is a text box in the current cell, jump out of the method directly //Note: Be sure to make a judgment before inserting the text box if(tdobj.children("input").length>0){ return false; } //Clear Cell text tdobj.html(""); inputobj.css("border","0") .css("font-size",tdobj.css("font-size ")) .css("font-family",tdobj.css("font-family")) .css("background-color",tdobj.css("background-color")) .css("color","#C75F3E") .width(tdobj.width()) .val(text) .appendTo(tdobj); inputobj.get( 0).select(); //Prevent the click event of the text box inputobj.click(function(){ return false; }); }); });
The above bug is solved, but I found that when I click on the cell, although the text changes color on the surface, it does not make me feel that it can be edited. Then I will make a little change. While inserting the text box, select the text in the text box. Code 8:
But the problem comes again. In the Safari browser, in order for the text box to be selected, it must appear that the text box has the focus. But here we just insert a text box and assign a value to the text box when we click on the cell. The text box does not gain focus. Solution: Trigger an event through jQuery's trigger method. Code9:
3. Text box key event processing Now that the above problems have been solved, let's add some key events to the text box. We know that the keyCode for obtaining keystrokes is different in different browsers, but jQuery helps us solve this problem. You only need to add the event parameter to the function of the event, and then in the method body, you can obtain the keyCode through the which attribute of the event object. The event.which attribute assimilates the methods of obtaining keyCode in different browsers. After obtaining the keyCode, I mainly do two key events: ESC key (key value: 27) and Enter key (key value: 13). Code10:
//Handle the operations of the enter and esc keys on the text box //The function of an event method in jQuery can define an event parameter, and jQuery will block the differences between browsers and pass it to us Available event objects inputobj.keyup(function(event){ //Get the key value of the current key //There is a which attribute on the jQuery event object to get the key value of the keyboard key var keycode = event.which; //Handle carriage return if(keycode==13){ //Get the content of the current text box var inputtext = $(this ).val(); //Modify the content of td to the content in the text box tdobj.html(inputtext); } //Handle the situation of esc if( keycode == 27){ //Restore the content in td to text tdobj.html(text); } });
$( document).ready(function(){ //Find all the cells in the column of student number //Because the position of the cells in the column of student number in all td is an even number (0,2,4 ,6), so you can filter to the even-numbered cells in td through even var numTd = $("tbody td:even"); //Create a text box when you click these tds numTd.click(function(){ //Create a text box object var inputobj = $(""); //Get the currently clicked unit Cell object var tdobj = $(this); //Get the text in the cell var text = tdobj.html(); //If there is a text box in the current cell, Just jump out of the method //Note: Be sure to make a judgment before inserting the text box if(tdobj.children("input").length>0){ return false; } //Clear the text of the cell tdobj.html(""); inputobj.css("border","0") .css("font-size",tdobj.css ("font-size")) .css("font-family",tdobj.css("font-family")) .css("background-color",tdobj.css("background- color")) .css("color","#C75F3E") .width(tdobj.width()) .val(text) .appendTo(tdobj); inputobj.get(0).select(); //Prevent the click event of the text box inputobj.click(function(){ return false; }); / /Handle the operation of the enter and esc keys on the text box //The function of an event method in jQuery can define an event parameter. jQuery will mask the differences between browsers and pass us a usable event object inputobj.keyup(function(event){ //Get the key value of the current key //There is a which attribute on the jQuery event object to get the key value of the keyboard key var keycode = event. which; //Handle carriage return if(keycode==13){ //Get the content of the current text box var inputtext = $(this).val(); //Modify the content of td to the content in the text box tdobj.html(inputtext); } //Handle the situation of esc if(keycode == 27){ //Restore the content in td to text tdobj.html(text); } }); }); });
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
But there is an obvious 
What is the cause of the above bug? Because after a cell is inserted into the text box, the text box belongs to the cell. When we click on the text box, the click event of the cell will also be triggered. 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
