js、jquery 遍历table

最新推荐文章于 2019-02-15 09:58:07 发布

平静大海

最新推荐文章于 2019-02-15 09:58:07 发布

阅读量4.2k

点赞数

分类专栏： javascript jquery html 文章标签： jquery function table button border 测试

javascript 同时被 3 个专栏收录

59 篇文章 0 订阅

订阅专栏

jquery

29 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style type="text/css">
table
        {
            border-collapse: collapse;
        }
        td
        {
            border:solid 1px #CCC;
            width:20px;
            height:20px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function GetTableData(){
            var tableData=new Array();
            $("#testtable tr").each(function(trindex,tritem){
                tableData[trindex]=new Array();
                $(tritem).find("td").each(function(tdindex,tditem){
                    tableData[trindex][tdindex]=$(tditem).text();
                });
            });
            alert(tableData);
        }
    </script>
</head>
<body>
<input type="button" value="GetTableData" onclick="GetTableData();"/>
<table id="testtable">
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
    </tr>
    <tr>
        <td>a</td>
        <td>f</td>
        <td>h</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
        <td>m</td>
    </tr>
    <tr>
        <td>a</td>
        <td>n</td>
        <td>o</td>
        <td>b</td>
        <td>p</td>
    </tr>
</table>
</body>
</html>

需求

　　把含有rowspan、colspan的table还原。

　　例如原table为：

　　还原后的table为：

代码原理

　　对table进行遍历，如果td的rowspan属性值大于1，则给当前的td的父元素的兄弟元素添加td，如果td的colspan属性值大于1，则在当前的td元素后添加td

完整代码

//本文首发博客园:http://artwl.cnblogs.com(2012/02/08)
jQuery.fn.RevertTable=function(){
    $("tr",this).each(function(trindex,tritem){
        $(tritem).find("td").each(function(tdindex,tditem){
            var rowspanCount=$(tditem).attr("rowspan");
            var colspanCount=$(tditem).attr("colspan");
            var value=$(tditem).text();
            var newtd="<td>"+value+"</td>";
            if(rowspanCount>1){
                var parent=$(tditem).parent("tr")[0];
                while(rowspanCount-->1){
                    $($(parent).next()[0].children[tdindex]).before(newtd);
                    parent=$(parent).next();
                }
                $(tditem).attr("rowspan",1);
            }
            if(colspanCount>1){
                while(colspanCount-->1){
                    $(tditem).after(newtd);
                }
                $(tditem).attr("colspan",1);
            }
        });
    });
}

测试案例

小结

　　本文只提供了还原含有rowspan、colspan的table的方案之一，欢迎大家测试讨论。

　　至于合并表格单元格网上已经有了代码：

　　原文标题：jQuery colspan and rowspan table using cell break

　　原文地址：http://willifirulais.blogspot.com/2007/07/jquery-table-column-break.html

平静大海

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js、jquery 遍历table

DOCTYPE html>html>head> title>Demotitle> style type="text/css">table { border-collapse: collapse; } td { border:solid 1px
复制链接

扫一扫