Use jQuery to implement editable tables_jquery

Today we learned the example of using jQuery to implement an editable table. The requirements for this example are as follows: click on a cell in the foreground table to modify its content, press Enter to save the modified content, and esc to undo the saved content. Principle: When you click a client table cell, add a text box in the cell, assign the original content in the cell to the text box, and then further modify the text box content. After modification, reassign the text box content to cell.

Source code:

Frontend code:

Copy code The code is as follows:

BR>






--%>

tr>




> ;






>


;

You can edit table items by clicking the mouse
Student number	Name
000001	Zhang San
000002	李思	000003	王五
Zhao Liu

css code:

Copy code

The code is as follows: body { } table {

border:1px solid #000000;

border-collapse:collapse ;/*Cell border merging*/
width:400px;
}
table td {
border:1px solid #000000;
width:50%;
}
table th {
border:1px solid #000000;
width:50%;
}
tbody th {
background-color:#426fae;
}


jquery code

Copy code

The code is as follows:

$(function () {
//Find all even rows in the table except the first tr
//Use even in order to return all tr ​​elements through tbody tr
$( "tbody tr:even").css("background-color", "#ece9d8");
//Find all student number cells
var numId = $("tbody td:even");

//Register mouse click event for the cell
numId.click(function () {
//Find the td corresponding to the current mouse click, this corresponds to the td that responded to the click
var tdObj = $(this);
//Determine whether there is a text box in td
if (tdObj.children("input").length>0) {
return false;
}
//Get the content in the table
var text = tdObj.html();
//Clear the content in td
tdObj.html("");
//Create Text box
//Remove the border of the text box
//Set the font size in the text box to be the same as the text in the table
//Set the background color of the text box to be the same as the background color of the table
. //The width of the text box is the same as the width of td
//Put the value in td into the text box
//Insert the text box into td
var inputObj = $("").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color ", tdObj.css("background-color")).width(tdObj.width()).val(text).appendTo(tdObj);
//After the text box is inserted, it gets focus first and then selects it
inputObj.trigger("focus").trigger("select")
//The click event cannot be triggered after the text box is inserted
inputObj.click(function () {
return false;
});
//Process the operation of the enter and esc keys on the text box
inputObj.keyup(function (event) {
//Get the key value of the currently pressed keyboard
var keycode = event.which;
//Handle carriage return
if (keycode==13) {
//Get the content in the current text box
var inputtext = $(this).val ();
//Modify the content in td to the content of the text box
tdObj.html(inputtext);
}
//Process the content of esc
if (keycode== 27) {
//Restore the content in td to the original content
tdObj.html(text);
}
});
});
});

Summary: Knowledge points that can be obtained through learning from this example:

1. HTML

1.table can contain thead and tbody

2. The content of the table header can be placed in th

3. table{} This writing method is called a label selector and can have an impact on the entire table.

4.table td{} represents all tds contained in the table.

2. In terms of jquery

$() can put 4 different parameters in the brackets

1. Put the parameter directly into function, indicating that the page is loaded: For example, the above example Line 1 in the jquery code $(function(){})

2. The parameter can be a css class selector and is packaged into a jquery object. For example: Line 4 of the jquery code in the above example $("tbody tr:even")

3. If the parameter is HTML text, you can create a dom node and package it into a jquery object. For example: Line 27 of the jquery code in the above example $("")

4. The parameter can be a dom object. This method is equivalent to replacing the dom object. into a jquery object. Line 11 of the jquery code in the above example var tdObj = $(this)

The jquery object in this example

1. Add css attributes after the jquery object to set the css attributes of the node. For example, line 4 in the jquery code in the above example $("tbody tr:even").css("background-color", "#ece9d8");

2.jquery object content contains selection The DOM node corresponding to the device is saved in an array.

3. Adding the html method after the jquery object can set or get the html content of the node. For example, line 17 of the jquery code in the above example var text = tdObj.html()

4. Adding the val method after the jquery object can get or set the value of the node. For example, in the above example, line 41 of the jquery code var inputtext = $(this).val()

5. Adding the width method after the jquery object can set or get the width of a node. For example, line 27 of the jquery code in the above example is tdObj.width()

6. Adding the appendTo method after the jquery object can append a node to all the child nodes of another node. For example, in the above example, line 27 appendTo(tdObj) in the jquery code

7. Adding the trigger method after the jquery object can trigger a js event to occur. For example, in the above example, line 29 of the jquery code inputObj.trigger("focus").trigger("select")

8. Adding the children method after the jquery object can obtain the child nodes of a certain node, which can be formulated Parameters to limit the content of child nodes. For example, line 13 of the jquery code in the above example tdObj.children("input").length

9. If the jquery object returned by the selector contains multiple dom nodes, register a similar click event on this object , all DOM nodes will be used for this event. For example, line 9 numId.click in the jquery code in the above example;