Home >Web Front-end >JS Tutorial >jQuery implements cross-browser editable tables step by step, supporting IE, Firefox, Safari, Chrome, Opera_jquery

jQuery implements cross-browser editable tables step by step, supporting IE, Firefox, Safari, Chrome, Opera_jquery

WBOYOriginal: 2016-05-16 18:47:311299browse

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

< ;tr>

Click on the table to edit
Student number	Name
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;
}

table{}{ color: #4F6B72; border: 1px solid #C1DAD7; border-collapse: collapse; width: 400px ; } th{}{

width: 50%;

border: 1px solid #C1DAD7; 
} 
td{}{ 
width: 50%; 
border: 1px solid #C1DAD7; 
} 

The effect is much better now: 
editTable02.jpg 

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;

border-collapse: collapse; width: 400px; } editTable03.jpg

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:

Copy code The code is as follows:

$(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:

Copy the code The code is as follows:

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:

Copy code The code is as follows:

inputobj.click(function() { 
return false; 
}); 

 

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:

Copy code The code is as follows:

$(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:

Copy code The code is as follows:

inputobj.get(0) .select();

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:

Copy code The code is as follows:

inputobj.trigger("focus" ).trigger("select");

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:

Copy code The code is as follows:

 
//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); 
} 
}); 

The following is Complete js code:
Code11:

Copy code The code is as follows:

$( 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);
}
});
});
});

jQuery implements cross-browser editable tables step by step, supporting IE, Firefox, Safari, Chrome, Opera_jquery

Related articles