HTML table in operation js

First, access to every tr

1, by a table id acquisition, such as id = "tables"

Obtaining a first row tr, the index starting from 0, by EQ (), which method index can be changed manually, as in the second row is 1, it may be cyclic tr, which is the loop variable EQ

$ ( "# TR the Tables") EQ (0);. 
// through each row

for (var i = 0; i < $("#tables tr").length; i++) {
$("#tables tr").eq(i);
}

2, obtaining tr, id = "tbodys" tbody through, the respective values can be set aa index itself, the keyword "find", child

$("#tbodys").find('tr').eq(aa);

3, acquiring operation Bank tr, tr if an element to be operated inside the Bank, such as button or delete rows within the Edit button, <input type = "text" onclick = "TrDemo (this);" />,

It is recommended that the click event write in internal label, pass this in the past, static line can be written directly in the js click event, operating with $ (this), dynamic lines such is invalid and must pass this within the label before they can operate, keyword: " Closest "

function TrDemo(temp) {
   $(temp).closest('tr')
}

4, get on line tr, keyword: prev previous line

$(this).closest('tr').prev()

5, gets the next row tr, keyword: the Next next line

$(this).closest('tr').next()

6, acquires the last row tr, keywords Last , used here tbody operation example, id = "tbodys"

$("#tbodys").find('tr:last')

Two, td acquisition mode of operation

by obtaining td tr, tr according to the above operation, the write operation is not here detailed tr, substituting $ ( "# tr")

1, to obtain a row each td, keyword "children"

$ ( "# TR") Children ( 'TD') EQ (AA).. // AA can set any value of the index they need 

// traverse TD
 for ( var I = 0; I <$ ( "# TR") .children ( 'TD') length;. I ++ ) { 
   $ ( . "#tr") Children ( 'TD' ) .EQ (I) 
}

2, to obtain the value td inside

// If td Internal no children, that direct access td value is text (), aa free to set their own desired td index values
 $ ( "# tr"). Children ( 'td'). Eq (aa). text (); 

// if the interior has children, according to hierarchy can be acquired using find ( '# id') / find ( '. class') acquisition, id, and fill in their class may be set according 
// Get such a value of the first text box inside td, ID = "TXT"
 $ ( "# TR") . .children ( 'td') EQ (0) .find ( '# TXT') Val ().;

3, the operation of the line elements, the elements which form are obtained according to the above process and can be operated, the specific operation and normal operation as after jquery acquired

Here an example of a hidden form elements and set within td read-only text box id = "txt"

//隐藏
$("#tr").children('td').eq(aa).find('#txt').css("display","none");

//只读
$("#tr").children('td').eq(aa).find('#txt').attr("disabled","disabled");

三、添加/删除tr，关键字：添加（append），删除（remove）

tr的删除也是可以按照上面所述的tr操作中，获取某一行的上一行或者下一行或者本行进行删除，这里用$("#tbodys")代表tbody，$("#tr")代表要操作的行，

//添加
//先将要添加行的html代码拼接好，赋值到变量中，这里我就不拼接了，用trhtml代替
var tr=trhtml;
$("#tbodys").append(tr);

//删除行
$("#tr").remove();

HTML table in operation js

Guess you like