JQ和JS动态拆分表格的方法

<table width="100%" border="0" style="text-align:center;">
  <tr>
    <td>编号</td>
    <td>项目</td>
    <td>产品</td>
    <td>对比</td>
    <td>类别</td>
  </tr>
  <tr>
    <td>1</td>
    <td>项目1</td>
    <td>产品</td>
    <td>产品1VS产品2</td>
    <td>类别</td>
  </tr>
  <tr>
    <td>2</td>
    <td>项目2</td>
    <td>产品</td>
    <td>产品3</td>
    <td>类别</td>
  </tr>
  <tr>
    <td>3</td>
    <td>项目3</td>
    <td>产品</td>
    <td>产品4VS产品5</td>
    <td>类别</td>
  </tr>  
  ....
</table>
表格代码如上，请问如何用JS或者JQ把对比栏里的VS前后拆分成下图这种效果？

解决方案 »

  1.   

    拆分单元格的方法；
    <html>
    <head>
    <script>
    function split() {
      var cell1 = document.createElement("td");
      cell1.setAttribute("style", "background-color: grey;");
      cell1.innerHTML = "Product1";  var cell2 = document.createElement("td");
      cell2.innerHTML = "VS";  var cell3 = document.createElement("td");
      cell3.setAttribute("style", "background-color: grey;");
      cell3.innerHTML = "Product2";  myTable.rows[0].removeChild(myTable.rows[0].cells[0]);  var typeCell = myTable.rows[0].cells[0];  typeCell.parentNode.insertBefore(cell1, typeCell);
      typeCell.parentNode.insertBefore(cell2, typeCell);
      typeCell.parentNode.insertBefore(cell3, typeCell);
    };
    </script>
    </head>
    <body>
    <table id="myTable" border=0>
      <tr>
        <td colspan="3" style="background-color: grey;">Product1VSProduct2</td>
        <td>Type</td>
      </tr>
      <tr>
        <td colspan="3" style="background-color: grey;">Product3</td>
        <td>Type</td>
      </tr>
    </table>
    <input type="button" onclick="split()" value="split">
    </body>
    </html>
    想法就是原先定义colspan（因不是每行的此列都需要拆分），然后移除掉单元格，添加新的单元格；
    如何判断单元格是不是要划分就不说咯^_^
      

  2.   

    给td加一个colspan即可，
    <table border=2 width="50%">
      <tr>
        <td colspan=2> 狮子 </td>  </tr>
      <tr><td>狮子</td>
        <td> 斑马 </td>
    </tr>
    </table>
    或者把 产品1 VS 产品2 3个内容分别用span装起来，然后把span的样式改一下，这样就不用修改td的样式
      

  3.   

    给你个最简单的思路。
            function spilt() {
                //遍历行
                $("table tr").each(function () {
                    //获取第4列的值
                    var yy = $(this).children("td").eq(3).html();
                    var arr = new Array();
                    //按照VS拆分
                    arr = yy.split('VS');
                    //满足条件。如产品1VS产品2，则改变单元格内容
                    if (arr.length == 2) {
                        var newTable = "<table width='100%' border='1' style='text-align: center;'><tr><td>" + arr[0].toString() + "</td><td>VS</td><td>" + arr[0].toString() + "</td></tr></table>";
                        $(this).children("td").eq(3).html(newTable);
                    }
                });
            }
      

  4.   

    遍历所有的 td内容，如果发现了td内容有需要要拆分的话，就马上这样写
    $(this).innerHTML = "<table><tr><td>产品1</td><td>VS</td><td>产品2</td><tr><tablle>";
    很简单吧？
      

  5.   

    就是原先的表格不动他，只是在需要拆分的td中 添加一个table，是一个一行三列的tabla即可