Implement editable tables using jQuery
- 2020-03-30 03:02:49
- OfStack
Today you learned how to implement an editable table using jQuery as an example. The requirements for this example are as follows: click the cell in the foreground table to modify the contents, press enter to save the modified contents, and esc to undo the saved contents. Principle: when you click the cell of the client table, add a text box in the cell, and assign the original content in the cell to the text box, and then further modify the text box content, modify the text box content re-assign value to the cell.
Source:
Foreground code:
The CSS code:
Jquery code
Summary: the following knowledge points can be obtained through the study of this example:
One, HTML
1. The table can contain thead and tbody
2. The contents of the header can be put in th
3. Table {} this type of writing is called a label selector, which can affect the entire table.
4. Table td{} this way represents all td contained in the table.
Second, jquery
You can put four different arguments in the bracket of $()
1. Parameter directly put function to indicate that the page has been loaded: for example, $(function(){} in the first line of jquery code in the above example.
2. The parameter can be a CSS class selector and wrapped as a jquery object. For example: line 4 of jquery code $(" tbody tr:even ") in the example above
3. If the parameters are HTML text, you can create a dom node and wrap it as a jquery object. For example: line 27 $("< Input type = 'text' >" )
4. The parameter can be a dom object, which is equivalent to replacing a dom object with a jquery object. Line 11 of jquery code in the above example var tdObj = $(this)
The jquery object in this example
1. Add CSS properties after the jquery object, you can set the CSS properties of the node. For example, line 4 $("tbody tr:even"). CSS (" backback-color ", "#ece9d8");
2. The content of the jquery object contains the dom nodes corresponding to the selectors, which are saved in an array.
3. Jquery object can be followed by HTML method to set or get the HTML content of the node. For example, line 17 in the jquery code above, var text = tdobj.html ()
4. The val method is added after the jquery object to get or set the value value of the node. For example, var inputtext = $(this).val()
5. Add the width method after the jquery object to set or get the width of a node. For example, tdobj. width() in line 27 of the jquery code in the above example
6. ApppendTo method can append a node to all children of another node. For example, appendTo(tdObj) at line 27 in the jquery code
7. The trigger method can be added after the jquery object to trigger a certain js event. For example, line 29 in the jquery code inputobj. trigger("focus"). Trigger ("select")
8. Children can be obtained by adding children method after jquery object, and parameters can be set to limit the content of children nodes. For example, line 13 in the jquery code above, tdobj.children ("input").length
9. If the jquery object returned by the selector contains more than one dom node, register a click event on that object, and all dom nodes will be used for this event. For example, numid.click in line 9 of the jquery code in the example above;
Source:
Foreground code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jq2 -- tables that can be edited </title>
<link href="css/editTable.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/editTable.js"></script>
<%--<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<thead>
<tr>
<th colspan="2"> The mouse clicks the table item to be able to edit </th>
</tr>
</thead>
<tbody>
<tr>
<th> Student id </th>
<th> The name </th>
</tr>
<tr>
<td>000001</td>
<td> Zhang SAN </td>
</tr>
<tr>
<td>000002</td>
<td> Li si </td>
</tr>
<tr>
<td>000003</td>
<td> Cathy </td>
</tr>
<tr>
<td>000004</td>
<td> Zhao six </td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
The CSS code:
body {
}
table {
border:1px solid #000000;
border-collapse:collapse;
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
$(function () {
//Find all even rows in the table except the first tr
//Use even to return all tr elements through tbody tr
$("tbody tr:even").css("background-color", "#ece9d8");
//Find all the student number cells
var numId = $("tbody td:even");
//Register mouse click events for cells
numId.click(function () {
//Find the td corresponding to the current mouse click. This corresponds to the td responding to the click
var tdObj = $(this);
//Determines whether there is a text box in td
if (tdObj.children("input").length>0) {
return false;
}
//Gets the contents of the table
var text = tdObj.html();
//Clear out 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.
//Sets the background color of the text box to be the same as the background color of the table
//The width of the text field is the same as the width of td
//And put the td median into the text box
//Inserts a text box into td
var inputObj = $("<input type='text'>").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);
//Text box inserted after the first focus, then selected
inputObj.trigger("focus").trigger("select")
//The click event cannot be triggered after the text box is inserted
inputObj.click(function () {
return false;
});
//Handles carriage return and esc buttons on the text box
inputObj.keyup(function (event) {
//Gets the key value of the currently pressed keyboard
var keycode = event.which;
//Handle the return case
if (keycode==13) {
//Gets the contents of the current text box
var inputtext = $(this).val();
//Change the content in td to the content of the text box
tdObj.html(inputtext);
}
//Handle the contents of esc
if (keycode==27) {
//Restore the content in td to its original content
tdObj.html(text);
}
});
});
});
Summary: the following knowledge points can be obtained through the study of this example:
One, HTML
1. The table can contain thead and tbody
2. The contents of the header can be put in th
3. Table {} this type of writing is called a label selector, which can affect the entire table.
4. Table td{} this way represents all td contained in the table.
Second, jquery
You can put four different arguments in the bracket of $()
1. Parameter directly put function to indicate that the page has been loaded: for example, $(function(){} in the first line of jquery code in the above example.
2. The parameter can be a CSS class selector and wrapped as a jquery object. For example: line 4 of jquery code $(" tbody tr:even ") in the example above
3. If the parameters are HTML text, you can create a dom node and wrap it as a jquery object. For example: line 27 $("< Input type = 'text' >" )
4. The parameter can be a dom object, which is equivalent to replacing a dom object with a jquery object. Line 11 of jquery code in the above example var tdObj = $(this)
The jquery object in this example
1. Add CSS properties after the jquery object, you can set the CSS properties of the node. For example, line 4 $("tbody tr:even"). CSS (" backback-color ", "#ece9d8");
2. The content of the jquery object contains the dom nodes corresponding to the selectors, which are saved in an array.
3. Jquery object can be followed by HTML method to set or get the HTML content of the node. For example, line 17 in the jquery code above, var text = tdobj.html ()
4. The val method is added after the jquery object to get or set the value value of the node. For example, var inputtext = $(this).val()
5. Add the width method after the jquery object to set or get the width of a node. For example, tdobj. width() in line 27 of the jquery code in the above example
6. ApppendTo method can append a node to all children of another node. For example, appendTo(tdObj) at line 27 in the jquery code
7. The trigger method can be added after the jquery object to trigger a certain js event. For example, line 29 in the jquery code inputobj. trigger("focus"). Trigger ("select")
8. Children can be obtained by adding children method after jquery object, and parameters can be set to limit the content of children nodes. For example, line 13 in the jquery code above, tdobj.children ("input").length
9. If the jquery object returned by the selector contains more than one dom node, register a click event on that object, and all dom nodes will be used for this event. For example, numid.click in line 9 of the jquery code in the example above;