js 、jquery周遊表格遇到的問題

這兩天用腳本語言周遊表格的時候遇到那麼一個問題，我本來希望如果我新加入的數值，與表格中的數值一緻，就禁止他加入，彈出提示。

用jquery的each方法周遊的話，很容易實作，可是，問題是，這個是閉包環境，彈出提示後，後面的代碼仍然執行。

為了解決這個問題隻能用js腳本的for語句周遊表格了。

現在把兩種周遊方式都放這裡了

jquery周遊表格：

$("#tbList label").each(function(){

var thisObj = this.parentNode.parentNode;

var tds = $(thisObj).children(); //所有列

if($(\'#wareId\').val()==tds.eq(3).text()&&$(\'#vendorCode\').val()==tds.eq(1).text())

{

alert("該資料已加入下方清單，請勿重複加入。");

return false;

}

});

js周遊表格：

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("該資料已加入下方清單，請勿重複加入。");

return false;

}

轉一篇其他js操作表格的函數集合：

一組JS建立和操作表格的函數集合

在用AJAX的時候，經常要用JS操作DOM，當涉及到資料清單的時候，那用表格比較多，這裡寫了組函數集合，專門用來操作表格，當然，目前還有很多不足，但是對一些簡單操作還是很友善的。

//隐藏列

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";

}

//隐藏行

function setHiddenRow(tb,iRow){

tb.rows[iRow].style.display = oTable.rows[iRow].style.display == "none"?"block":"none";

}

//建立表格

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);//設定建立的TABLE的ID

document.getElementById(id).appendChild(tb);

}

//插入文本

function insertText(tb,row,cel,text){

txt=document.createTextNode(text);

tb.rows[row].cells[cel].appendChild(txt);

}

//修改文本

function updateText(tb,row,cel,text){

tb.rows[row].cells[cel].firstChild.nodeValue=text;

}

//添加子節點

function toAppendChild(tb,row,cel,child){

tb.rows[row].cells[cel].appendChild(child);

}

//删除某行

function removeRow(tb,row){

tb.lastChild.removeChild(tb.rows[row]);

}

//單元格設定屬性

function cellSetAttribute(tb,row,col,attributeName,attributeValue){

tb.rows[row].cells[col].setAttribute(attributeName,attributeValue);

}

//單元格添加監聽器

function cellAddListener(tb,row,cel,event,fun){

if(window.addEventListener)

{

//其它浏覽器的事件代碼: Mozilla, Netscape, Firefox

//添加的事件的順序即執行順序 //注意用 addEventListener 添加帶on的事件，不用加on

// img.addEventListener(\'click\', delRow(this), true);

tb.rows[row].cells[cel].addEventListener(event,fun, true);

}

else

{

//IE 的事件代碼在原先事件上添加 add 方法

// img.attachEvent(\'onclick\',delRow(this));

tb.rows[row].cells[cel].attachEvent("on"+event,fun);

}

//新增行

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);

}

//行設定屬性

function rowSetAttribute(tb,row,attributeName,attributeValue){

tb.rows[row].setAttribute(attributeName,attributeValue);

}

//行添加監聽器

function rowAddListener(tb,row,event,fun){

if(window.addEventListener)

{

//其它浏覽器的事件代碼: Mozilla, Netscape, Firefox

//添加的事件的順序即執行順序 //注意用 addEventListener 添加帶on的事件，不用加on

// img.addEventListener(\'click\', delRow(this), true);

tb.rows[row].addEventListener(event,fun, true);

}

else

{

//IE 的事件代碼在原先事件上添加 add 方法

// img.attachEvent(\'onclick\',delRow(this));

tb.rows[row].attachEvent("on"+event,fun);

}

//新增列

function addCells(tb){

for (i=0;i<tb.rows.length;i++){

var td= document.createElement("td");

tb.rows[i].appendChild(td);

}

//批量修改單元格屬性

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);

}

//合并隻支援單向合并

//行合并

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;

}

//列合并

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;

}

測試DEMO

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

<head>

<title> new document </title>

<style>

.testclass{background-color:yellow;}

</style>

<!--

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","我是新增的");

toAppendChild(mytable,3,3,input);

}

function listen(){

alert(\'恭喜你！監聽器安裝成功！\');

}

//-->

</script>

</head>

<body>

表格函數測試<br />

</div>

</body>

</html>