如何用js或jq循环遍历出这个easyui基础表格

JavaScript030

如何用js或jq循环遍历出这个easyui基础表格,第1张

//先遍历每一行

$("tr").each(function(i){

    //i=0 表示第一行

    //再开始在每一行里遍历每一列

    $(this).find("td,th").each(function(j){

        //j=0 表示为第一列

        var str="第"+eval(i+1)+"行第"+eval(j+1)+"列的内容为:"+$(this).text()

    })

})

上面的代码,就是基础的遍历表格的代码了,希望能帮助到你!

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>循环填充数据</title>

<style type="text/css">

td{

width: 50px

height: 50px

}

</style>

</head>

<body>

<table border="1" cellspacing="0" cellpadding="0">

<tr><th colspan="6">数据表格</th></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>

</table>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

//模拟后台数据,数据量可变

var data = [{

message:"数据1"

},

{

message:"数据2"

},

{

message:"数据3"

},

{

message:"数据4"

},

{

message:"数据5"

},

{

message:"数据6"

},

{

message:"数据7"

},

{

message:"数据8"

},

{

message:"数据9"

},

{

message:"数据10"

}

]

var tdarr = $("td")//获取表格数量

var num1 = Math.floor(tdarr.length / data.length)//取商 表格数量除以后台数据数量

var num2 = tdarr.length % data.length//取余 表格数量除以后台数据数量

//console.log("num1:"+num1)

//console.log("num2:"+num2)

//将能整除的部分循环填充后台数据

for(var i=0i<num1i++){

$.each(data,function(index){

//console.log(index+i*data.length)

//console.log(data[index].message)

$(tdarr[index+i*data.length]).text(data[index].message)

})

}

//如果不能整除即取余不为0,则再循环补填未填充的表格

for(var i=0i<num2i++){

$(tdarr[data.length*num1+i]).text(data[i].message)

}

</script>

</body>

</html>