Small valley practical Jquery (2) -- a table that can be edited, small valley jquery

Small valley practical Jquery (2) -- a table that can be edited, small valley jquery

Today, we implement a table example. By getting an odd number of rows in the table and setting the background color attribute, the background color of the odd and even rows is different. this table can be edited when clicked. Press enter to change it to the new input content. ESC to restore the original text. the table implementation logic is clear, but some minor bugs may occur during implementation. you can solve this problem one by one using jQuery functions.

Let's take a look at the HTML code:

 

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

The table can contain thead and tbody tags, and the content of the header is placed in th. The advantage of this write is that you can select the desired content through the tag selector, such as: tbody th {}


Js Code:
 
// You must first use Javascript to solve the difference in the background color of the odd and even rows in the content section $ (function () {// find all the odd rows in the content area of the table $ ("tbody tr: even "2.16.css (" background-color "," # ECE9D8 "); // find all student ID cells and save them as var numTd =$ (" tbody td: even "); numTd. click (function () {var tdObj = $ (this); if (tdObj. children ("input "). length> 0) {// The input text box in the current td. If you do not execute the click operation, return false;} var txt = tdObj.html (); // create a text box // remove the border of the text box // set the font to 16px in the text box // make the text box width the same as the width of td // set the background color of the text box // put the content in the text box var inputObj =$ ("<input type = 'text'>" Fig ("border-width ", "0" ).css ("font-size", "16px" ).width(tdobj.width())).css ("background-color", tdobj.css ("background-color" )).val(tdObj.html ()); // Insert the authorization box to tdobj.html (""); inputObj. appendTo (tdObj); // inputObj is selected after the text box is inserted. trigger ("focus "). trigger ("select"); inputObj. click (function () {return false ;}); // press enter in the text box and Press ESC to operate inputObj. keyup (function (event) {var keycode = event. which; // press enter if (keycode = 13) {var encode (inputtext) ;}// escif(keycode=0000271_effectdobj.html (txt );}});});});



In the $ function, $ ("tbody tr") can be used to return all tr nodes in the tbody. In addition, $ ("tbody tr: even ") returns all tr nodes with an even index value in the tbody.
In the code above, we can see the html method, which can set or obtain the html content of the node:
TdObj.html (inputtext); set the node content
Var txtjavastdobj.html (); to get the html content of a node

Var inputObj = $ ("<input type = 'text'> ");
Here, if the $ () method parameter is a common html text, you can create a DOM node and encapsulate it as a jQuery object. the subsequent series of CSS code is chained. Because most jQuery Methods return jQuery objects that execute this method, you can use this method to write the code for jQuery.


When you press ENTER or ESC in the text box, the system responds to the keyup event. In jQuery, the parameter function of an event method can define an event parameter, jQuery will shield the browser's event differences and pass them to us an available event object. This event object has a which attribute to get the key value of the keyboard key.



CSS code:
 
Table {border: 1px solid black;/* fixed the problem that borders between cells cannot be merged */border-collapse: collapse; width: 400px;} table td {border: 1px solid black; width: 50%;} table th {border: 1px solid black; width: 50%;} tbody th {background: # A38ae9 ;}

There is nothing to say about CSS code. Here we use the simplest CSS style and the amount of code is very small. the strength of jQuery has just been realized, and the next practice will be easier, hoping to learn more and increase the amount of code.





JQuery retrieves table objects
<Head>
<Title> JavaScript test </title>
<Style>
</Style>
<Script type = "text/javascript" src = "jquery-1.4.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("[Type = 'checkbox']"). click (function (){
Var I = $ (this). attr ('value ');
$ ("Td: eq (" + I + ")", $ ("# table1 tr"). toggle ();
});
});
</Script>
</Head>
<Html>
<Body>
Show/hide <br>
<Input type = "checkbox" name = "showhide" value = "0" checked> first column
<Input type = "checkbox" name = "showhide" value = "1" checked> second column
<Input type = "checkbox" name = "showhide" value = "2" checked> column 3
<Table id = "table1">
<Tr>
<Td> first column </td>
<Td> second column </td>
<Td> third column </td>
</Tr>
<Tr>
<Td> first column </td>
<Td> second column </td>
<Td> third column </td>
</Tr>
</Table>
</Body>
</Html>

How does jquery Delete table elements without deleting the first and second rows of a table?
$ ("Table tr"). eq (1). nextAll (). remove ();