div jquery循环遍历 jquery循环遍历表格

转载

桃太郎 2023-07-13 20:45:41

文章标签 div jquery循环遍历 i++ html 监听器 文章分类 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"> 
<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","我是新增的"); 
toAppendChild(mytable,3,3,input); 
} 
function listen(){ 
alert('恭喜你！监听器安装成功！'); 
} 
//--> 
</script> 
</head> 
<body>表格函数测试<br /> 
<div id="u"> 
</div> 
<input type="button" value="新建一个5X5的表格" onclick="createTable('u',5,5,'mytable');" /> 
<input type="button" value="显示表格边框" onclick="document.getElementById('mytable').setAttribute('border',1);" /> 
<input type="button" value="插入文本" onclick="giveText();" /> 
<input type="button" value="修改文本" onclick="updateText(mytable,3,3,'text')" /> <br /> 
<input type="button" value="添加子节点input" onclick="addInput();" /> 
<input type="button" value="删除第5行" onclick="removeRow(mytable,4);" /> 
<input type="button" value="设置单元格宽度" onclick="cellSetAttribute(mytable,0,0,'width','50')" /> 
<input type="button" value="添加单元格监听器" onclick="cellAddListener(mytable,2,2,'click',listen)" /> <br /> 
<input type="button" value="行合并" onclick="mergerRow(mytable,2,1,2); document.getElementById('u').innerHTML=document.getElementById('u').innerHTML;" /> 
<input type="button" value="列合并" onclick="mergerCell(mytable,1,2,3); document.getElementById('u').innerHTML=document.getElementById('u').innerHTML;" /> 
<input type="button" value="设置单元格背景色" onclick="cellsSetAttribute(mytable,'class','testclass'); document.getElementById('u').innerHTML=document.getElementById('u').innerHTML;" /> 
<input type="button" value="设置行高" onclick="rowSetAttribute(mytable,2,'height','50');" /> <br /> 
<input type="button" value="新增第4行监听器" onclick="rowAddListener(mytable,3,'click',listen);" /> 
<input type="button" value="新增一行" onclick="insertRow(mytable);" /> 
<input type="button" value="新增列" onclick="addCells(mytable);" /> 
</body> 
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。