Problems with JS and jquery table Traversal

I encountered such a problem when I used scripting to traverse the table over the past two days. I originally hoped that if the new value is the same as the value in the table, I would not allow it to be added. A prompt is displayed.

It is easy to implement traversal using jquery's each method. However, the problem is that this is the closure environment.CodeStill execute.

To solve this problem, you can only use the for statement of the JS script to traverse the table.

 

Now we have put both traversal methods here.

Jquery traversal table:

$ ("# Tblist label"). Each (function (){
VaR thisobj = This. parentnode. parentnode;
VaR TDS = $ (thisobj). Children (); // all columns
If ($ ('# wareid '). val () = TDs. eq (3 ). text () & $ ('# vendorcode '). val () = TDs. eq (1 ). text ())
{
Alert ("this data has been added to the list below. Do not add it again. ");
Return false;
}
});

 

 

JS traversal table:

VaR objtable = Document. getelementbyid ("tblist ");
If (objtable)
{
For (VAR I = 0; I <objtable. Rows. length; I ++)
{
If ($ ('# wareid '). val () = objtable. rows [I]. cells [3]. firstchild. nodevalue & $ ('# vendorcode '). val () = objtable. rows [I]. cells [1]. firstchild. nodevalue)
{
Alert ("this data has been added to the list below. Do not add it again. ");
Return false;
}
}
}

 

Go to a function set for another JS operation table:

 

 

 

A set of functions for creating and operating tables in JavaScript.

 

A set of functions for creating and operating tables in JavaScript.

 

When Ajax is used, JavaScript is often used to operate the Dom. When a data list is involved, many tables are used. Here, a group function set is written to operate tables. Of course, there are still many shortcomings, but some simple operations are still very convenient.

// Hide Columns
Function sethiddenrow (TB, icol ){
For (I = 0; I <otable. Rows. length; I ++ ){
TB. Rows [I]. cells [icol]. style. Display = otable. Rows [I]. cells [icol]. style. Display = "NONE "? "Block": "NONE ";
}
}

 

// Hide rows
Function sethiddenrow (TB, irow ){
TB. Rows [irow]. style. Display = otable. Rows [irow]. style. Display = "NONE "? "Block": "NONE ";
}
// Create a table
Function createtable (ID, rows, cells, tbid ){
VaR TB = Document. createelement ("table ");
VaR tbody = Document. createelement ("tbody ");
For (VAR I = 0; I <rows; I ++ ){
VaR TR = Document. createelement ("TR ");
For (var j = 0; j <cells; j ++ ){
VaR cell = Document. createelement ("TD ");
Tr. appendchild (cell );
}
Tbody. appendchild (TR );
}
TB. appendchild (tbody );
TB. setattribute ("ID", tbid); // you can specify the ID of the created table.
Document. getelementbyid (ID). appendchild (TB );
}
// Insert text
Function inserttext (TB, row, CEL, text ){
TXT = Document. createtextnode (text );
TB. Rows [row]. cells [Cel]. appendchild (txt );
}
// Modify the text
Function updatetext (TB, row, CEL, text ){
TB. Rows [row]. cells [Cel]. firstchild. nodevalue = text;
}
// Add a subnode
Function toappendchild (TB, row, CEL, child ){
TB. Rows [row]. cells [Cel]. appendchild (child );
}
// Delete a row
Function removerow (TB, row ){
TB. lastchild. removechild (Tb. Rows [row]);
}
// Set cell attributes
Function cellsetattribute (TB, row, Col, attributename, attributevalue ){
TB. Rows [row]. cells [col]. setattribute (attributename, attributevalue );
}
// Add listeners to cells
Function celladdlistener (TB, row, CEL, event, fun ){
If (window. addeventlistener)
{
// Event code of other browsers: Mozilla, Netscape, and Firefox
// The Order of the added events is the execution sequence. // note that you can use addeventlistener to add events with on instead of on.
// IMG. addeventlistener ('click', delrow (this), true );
TB. Rows [row]. cells [Cel]. addeventlistener (event, fun, true );
}
Else
{
// Add the add method to the original ie Event code
// IMG. attachevent ('onclick', delrow (this ));
TB. Rows [row]. cells [Cel]. attachevent ("On" + event, fun );
}
}
// Add a row
Function insertrow (otable ){
VaR TR = Document. createelement ("TR ");
For (I = 0; I <otable. Rows [0]. cells. length; I ++ ){
VaR TD = Document. createelement ("TD ");
Tr. appendchild (TD );
}
Otable. lastchild. appendchild (TR );
}
// Set attributes for rows
Function rowsetattribute (TB, row, attributename, attributevalue ){
TB. Rows [row]. setattribute (attributename, attributevalue );
}
// Add a listener to the row
Function rowaddlistener (TB, row, event, fun ){
If (window. addeventlistener)
{
// Event code of other browsers: Mozilla, Netscape, and Firefox
// The Order of the added events is the execution sequence. // note that you can use addeventlistener to add events with on instead of on.
// IMG. addeventlistener ('click', delrow (this), true );
TB. Rows [row]. addeventlistener (event, fun, true );
}
Else
{
// Add the add method to the original ie Event code
// IMG. attachevent ('onclick', delrow (this ));
TB. Rows [row]. attachevent ("On" + event, fun );
}
}
// Add a column
Function addcells (TB ){
For (I = 0; I <TB. Rows. length; I ++ ){
VaR TD = Document. createelement ("TD ");
TB. Rows [I]. appendchild (TD );
}
}
// Modify cell attributes in batches
Function cellssetattribute (otable, attributename, attributevalue ){
For (I = 0; I <otable. Rows. length; I ++ ){
For (j = 0; j <otable. Rows [I]. cells. length; j ++ ){
Otable. Rows [I]. cells [J]. setattribute (attributename, attributevalue );
}
}
}
// Merge only supports one-way merge
// Merge rows
Function mergerrow (TB, row, cell, num ){
For (VAR I = (row + 1), j = 0; j <(num-1); j ++ ){
TB. Rows [I]. removechild (Tb. Rows [I]. cells [Cell]);
}
TB. Rows [row]. cells [Cell]. setattribute ("rowspan", num );
// Document. getelementbyid ('C'). innerhtml = Document. getelementbyid ('U'). innerhtml;
}
// Merge Columns
Function mergercell (TB, row, cell, num ){
For (VAR I = (cell + 1), j = 0; j <(num-1); j ++ ){
TB. Rows [row]. removechild (Tb. Rows [row]. cells [I]);
}
TB. Rows [row]. cells [Cell]. setattribute ("colspan", num );
// Document. getelementbyid ('C'). innerhtml = Document. getelementbyid ('U'). innerhtml;
}
Test demo
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> new document </title>
<Meta name = "generator" content = "editplus"/>
<Meta name = "author" content = ""/>
<Meta name = "keywords" content = ""/>
<Meta name = "Description" content = ""/>
<Style>
. Testclass {background-color: yellow ;}
</Style>
<SCRIPT type = "text/JavaScript" src = "Stone. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
<! --
Function givetext (){
For (VAR I = 0; I <5; I ++ ){
For (var j = 0; j <5; j ++ ){
Inserttext (mytable, I, j, I * 5 + J );
}
}
}
Function addinput (){
VaR input = Document. createelement ("input ");
Input. setattribute ("type", "text ");
Input. setattribute ("value", "I am adding ");
Toappendchild (mytable, 3, 3, input );
}
Function listen (){
Alert ('Congratulations! Listener installed successfully! ');
}
// -->
</SCRIPT>
</Head>
<Body>

Test Table functions <br/>
<Div id = "U">
</Div>
<Input type = "button" value = "Create a 5x5 Table" onclick = "createtable ('U', 5, 5, 'mytable');"/>
<Input type = "button" value = "show table borders" onclick = "document. getelementbyid ('mytable'). setattribute ('border', 1);"/>
<Input type = "button" value = "insert text" onclick = "givetext ();"/>
<Input type = "button" value = "Modify text" onclick = "updatetext (mytable, 3, 3, 'text')"/> <br/>
<Input type = "button" value = "add subnode input" onclick = "addinput ();"/>
<Input type = "button" value = "Delete row 5th" onclick = "removerow (mytable, 4);"/>
<Input type = "button" value = "set cell width" onclick = "cellsetattribute (mytable, 'width', '50')"/>
<Input type = "button" value = "add cell listener" onclick = "celladdlistener (mytable, 2, 2, 'click', listen)"/> <br/>
<Input type = "button" value = "Row merge" onclick = "mergerrow (mytable, 2, 1, 2); document. getelementbyid ('U '). innerhtml = document. getelementbyid ('U '). innerhtml; "/>
<Input type = "button" value = "column merge" onclick = "mergercell (mytable, 1, 2, 3); document. getelementbyid ('U '). innerhtml = document. getelementbyid ('U '). innerhtml; "/>
<Input type = "button" value = "set cell background color" onclick = "cellssetattribute (mytable, 'class', 'testclass'); document. getelementbyid ('U '). innerhtml = document. getelementbyid ('U '). innerhtml; "/>
<Input type = "button" value = "set row height" onclick = "rowsetattribute (mytable, 2, 'height', '50');"/> <br/>
<Input type = "button" value = "add 4th row listener" onclick = "rowaddlistener (mytable, 3, 'click', listen);"/>
<Input type = "button" value = "add a row" onclick = "insertrow (mytable);"/>
<Input type = "button" value = "add column" onclick = "addcells (mytable);"/>
</Body>
</Html>