jquery Study Notes 2 to edit the form of actual combat

2010-06-27  来源:本站原创  分类:Web  人气:199 

1. First of all, look at the code.

1// Javascript must first be resolved by the content of some of the background color of the different even and odd lines
$(function(){
        //  Content area to find the table all the even lines
        $("tbody tr:even").css("background-color","#E3E9D8");

        //  We need to find a cell number for all school
        var numTd=$("tbody td:even");
        //  These cells up to the mouse click event
        numTd.click(function(){
                //  Find the current mouse clicks td, this is the response of the corresponding  click  That  td
                var tdObj=$(this);
                if(tdObj.children("input").length>0){
                        //  There are currently td  input,  Click processing does not execute
                        return false;
                }
                var text=tdObj.html();
                //  Empty the contents of the td
                tdObj.html("");

                //  Create a text box
                //  Remove the text box border
                //  Set the font size of text box  16px
                //  Make the text box the same width and the width of td
                //  Set the background color of the text box
                //  Need to put the contents of the current td in the text box
                //  Will be inserted into the td in the text box
                var inputObj=$("<input type='text'>").css("border-width","0")
                                .css("font-size","16px")
                                .width(tdObj.width())
                                .css("background-color",tdObj.css("background-color"))
                                .val(text)
                                .appendTo(tdObj);
                //  Insert after the text box is selected
                //inputObj.get(0).select();
                inputObj.trigger("focus").trigger("select");

                //  Enter the text box and deal with esc key operation
                inputObj.keyup(function(event){
                        //  Press the button to get the current key value
                        var keycode=event.which;
                        //  Enter the case handling
                        if(keycode==13){
                                //  Get the current contents of the text box
                                var inputtext=$(this).val();
                                //  Changes in the contents of the td for the content of the text box
                                tdObj.html(inputtext);
                        }
                        //  Handling the case of ESC
                        if(keycode==27){
                                //  To restore the contents of the td  text
                                tdObj.html(text);
                        }
                });
        });
});

2. Code Summary

(1)

<table>
   <thead>
                <tr>
                        <th colspan="2">  Mouse click the table you can edit items  </th>
                </tr>
   </thead>
   <tbody>
                <tr>
                        <th>  Student ID  </th>
                        <th>  Name </th>
                </tr>
   </tbody>
</table>

table can contain thead and tbody

The contents of the header can be placed thead and tbdoy of th tag.

(2)

table{
        border:1px solid black;
        /*  Fixed the border between the cells can not be combined  */
        border-collapse:collapse;
        width:400px;
}

By border-collapse: collapse in this way to make a table cell border merger

(3) when there is background color, th, th is the tr this defined background color will not work

(4) css () method can be used to set the css properties for the node, the parameter name is the css property name.

(5) jquery object selector includes a DOM node corresponding to the array is stored.

(6) get () method can get a jquery object contains a dom node

(7) $ () method argument is a DOM object, this method is equivalent to convert jquery object to DOM object

(8) children () method can get the child nodes of a node, you can specify parameters to restrict the content of child nodes.

(9) If the selector returns the jquery object contains multiple DOM nodes in this object, click this to register a similar incident,

All DOM nodes will be used for the event.

(10) html () method to set or get the html content of the node.

if(keycode==13){
        //  Get the current contents of the text box
        var inputtext=$(this).val();
        //  Changes in the contents of the td for the content of the text box
        tdObj.html(inputtext);
}
var text=tdObj.html();//  Html for the content of the node
//  Empty the contents of the td
tdObj.html("");

(11) val () method can set or get the value node value

(12) $ () method if the parameter is a correct html text, you can create a DOM node, and packaged into jquery object.

var inputObj=$("<input type='text'>")

(13) width ways to set or get the width of a node.

var inputObj=$("<input type='text'>").css("border-width","0")
                .css("font-size","16px")
                .width(tdObj.width())

(14) appendTo way to append a node to another node in the back of all child nodes

(15) to prevent the event the current node can pass the event to return false

if(tdObj.children("input").length>0){
        //  There are currently td  input,  Click processing does not execute
        return false;
}

(16) safari browser must focus first and then select the text box to select text. Other browsers can be selected directly select the text

(17) trigger () method can trigger the event to a javascript method

//  Insert after the text box is selected
//inputObj.get(0).select();
inputObj.trigger("focus").trigger("select");

(18) jquery event method in the parameters of a function can define the parameters of an event. jquery event would shield the browser differences

The event can be passed to us a target.

(19) jquery's event object has a property which can get the value of the keyboard keys.

(20) keycode = 13 Enter keycode = 27 ESC key

相关文章
  • jquery Study Notes 2 to edit the form of actual combat 2010-06-27

    1. First of all, look at the code. 1// Javascript must first be resolved by the content of some of the background color of the different even and odd lines $(function(){ // Content area to find the table all the even lines $("tbody tr:even").css

  • jQuery Study Notes - Overview 2010-08-16

    jquery study notes (written by little, to do more) jQuery object can not use the DOM of the method but if you want to jQuery no method of packaging had to use the DOM methodology in the following two methods: 1.jQuery object is an array object, you c

  • jQuery Study Notes - selector 2010-08-16

    JQuery is the foundation of selector in jQuery in the incident handling, traverse the DOM, and AJAX operations are dependent on the selector jQuery selector advantages: Concise written $("#id") //document.getElementById("id"); $("

  • jquery study notes can be edited in the form of actual combat 2 2010-06-27

    1. First of all, look at the code. 1// Javascript must first be resolved by the content of some of the background color of the different even and odd lines $(function(){ // Content area to find the table all the even lines $("tbody tr:even").css

  • JQuery Application 2: You can edit the form 2010-04-13

    <html> <head> <title>JQuery Dynamically edit a table </title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equi

  • JQuery Study Notes (1) Environmental structures 2010-06-21

    First, download jQuery Starterkit (from the official website, or csdn download) Open the two documents starterkit.html and custom.js starterkit.html to import these two js, to choose their own is Jquery1.2.6 or 1.3.2 or later <script src="jquery.j

  • Jquery Study Notes 4 2010-07-29

    Today to be a small example, to achieve the check box to select all. Concrete is that, when elected in all elections, check boxes are all selected, and when the cancellation of one button, check box, "Select All" button box also abolished. When

  • Jquery study notes (a) of the common functions 2011-05-18

    1. Checkbox select all, anti-choice, value 8 <SCRIPT LANGUAGE="JavaScript"> 9 <!-- 10 $("document").ready(function(){ 11 12 $("#btn1").click(function(){ 13 14 $("[name='checkbox']").attr("checked"

  • ajax js jquery study notes, continuously updated 2010-04-30

    ARL201003 1.javascript: var declaration variable scope is the current function Do not declare a variable, direct assignment, then automatically creates a variable but the scope is global. 2.jquery to obtain the value of the text box: var text =$("# t

  • jQuery Study Notes - Chinese garbage treatment 2010-07-23

    Solution Summary: Method 1, modify the jQuery source code Changes in the 1.3.2 version of the first 3737 line: s[ s.length ] = encodeURIComponent(key) + '=' + encodeURIComponent(value); Modified: s[ s.length ] = encodeURIComponent(key) + '=' + encode

  • JQuery Study Notes (1) 2010-07-26

    Because the project used the jquery, but its not very familiar with it, so start learning Jquery, brought a sharp --- Jquery, start learning, and to the blog to record their own learning process. As the rookie myself, from basic science, the prawns t

  • Jquery Study Notes 2 2010-07-27

    Today, do a little example of a web page there are a few pictures, when the mouse rolls over time, will show the pictures to enlarge, mouse leave, the picture disappears. First of all, ready to html page, the initial page code is as follows <!DOCTYPE

  • jQuery Study Notes (3) 2010-09-02

    In many cases, will be a headache to choose one or more HTML inside the element, the following are some of the most basic usage: jQuery element selector $ (This) the current HTML element $ ("P") select <p> element. $ ("P.intro")

  • JQuery Study Notes 学习笔记(一) 2014-03-15

    jquery是当前比较流行的js类库,学习它可以实现很多功能. 1. 使用jquery 到jquery.com下载jquery.js当前版本是1.4.2 新建一个html页面 <!DOCTYPE html><BR><html lang="en"><BR><head><BR> <meta http-equiv="Content-Type" content="text/html; c

  • jQuery Study Notes学习笔记 (二) 2015-02-04

    jquery简单选择器的使用方法.jquery中最基本的东西了. 1. 使用class与id选择HTML元素 选择id为"myDivId"的元素.由于id是唯一的,所以总是选择到1个或0个元素 $('#myDivId') 选择class为"myCssClass". 可以选择任何多个class为"myCssClass"的元素. 复制代码 代码如下: $('.myCssClass') 获取或设置元素的值 复制代码 代码如下: var myValue

  • jQuery Study Notes - ajax 2010-07-17

    <div> <h3> <a href="#">A</a> </h3> </div> <div> </div> $(document).ready(function () { $("#letter-a a").click(function () { $.get("jqueryGet", {"term":$(this).attr('hr

  • jQuery step by step, cross-browser can edit the form, support IE.Firefox.Safari 2010-08-19

    Editable forms to achieve the function, we must address the following issues: 1. Clear the data to modify what columns in the table (how to find these cells); 2. How do cells become editable; 3. How to deal with some key events cell; 4. To resolve cr

  • ROR Study Notes 1 2009-03-09

    Installed at the success of ROR environment (yes, I installed InstantRails-2.0-win), the first thing done is to create a simple DB demo, the steps are as follows: 1.Rails Appliction Medium Create New Rails App ... 2. Create Application Framework: rai

  • extjs Study Notes (5) 2010-06-18

    extjs study notes (e) of editable grid: Big Ben Source: blog garden :2009-10-22 01:46 Read: 2487 times the original link [Collection] Most of the time, we just use the grid for display of information, but sometimes also need to edit the information i

  • extjs Study Notes (6) 2010-06-18

    extjs Study Notes (6) grid in the preservation of data, add and delete a series of them, we learned how to edit the contents of the grid, but we do not edit the results of preservation, which in practical application is not meaningless. In some cases