【分享】jquery简单的table合并单元格, 随便散个分。

<!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></title>
    <style type="text/css">
        #table1
        {
            border-collapse: collapse;
        }
        #table1 tr td
        {
            width: 200px;
            border: solid 1px blue;
            height: 20px;
            
        }
    </style>    <script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>    <script type="text/javascript">
        $(document).ready(function() {
            var arrPos = new Array(0, 15, 24, 17, 26);  //合并单元格的位置（首为0，先行后列的顺序）
            var arrNum = new Array(3, 2, 4, 2, 5);     //不同位置合并单元格对应的个数
            var col = 4;                            //列的个数            $("#table1 tr td").each(function(i) {
                var n = arrPos.length;
                for (var j = 0; j < n; j++) {
                    if (i == arrPos[j]) {
                        $(this).attr({ rowspan: arrNum[j] }); //合并单元格
                    }                    var index = arrPos[j] + col;
                    var maxIndex = index + col * (arrNum[j] - 2);
                    for (var k = index; k <= maxIndex; k += col) {
                        if (i == k) {
                            $(this).remove(); //删除对应的单元格
                        }
                    }
                }
            });
        }); 
    </script></head>
<body>
    <table id="table1" cellpadding="0" cellspacing="0" border="0">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
    </table>
</body>
</html>

解决方案 »

  1.   

    what the fuck is this ?
      

  2.   

    MergeTableGird.js 有写好的合并，
    $(document).ready(function(){  
         $("#DataTable").rowspan(0);
      });一句话就OK了。
      

  3.   

    表格太大 可能就不好！再加之jquery本身就是遍历 
      

  4.   

    是简单了点.
      var arrPos = new Array(0, 15, 24, 17, 26); //合并单元格的位置（首为0，先行后列的顺序）
    这种位置的指定,很不直观.只是由于代码的"原生态"(each的i计数),缺乏加工.
    实际上,用行列两项值去指定,转换一下也很容易,定位就更方便了,毕竟代码是要给人用的,也要方便人的使用才好.
    另外效率上有点慢,也可能是我这边加载JQ.JS(是引用网上的)的速度慢吧.
      

  5.   

    juery 还不错 啊！！！！ 学习中！！
      

  6.   

    JQuery确实很好用.。  但还是要多去了解其核心.。 不能忘了基本的东西.。