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

2013-07-09
JQ和JS动态拆分表格的方法[解决办法]拆分单元格的方法；htmlheadscriptfunction split() {var cell1
JQ和JS动态拆分表格的方法
                                                                            
[解决办法]
拆分单元格的方法；
<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（因不是每行的此列都需要拆分），然后移除掉单元格，添加新的单元格；
如何判断单元格是不是要划分就不说咯^_^
[解决办法]
给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的样式
[解决办法]
给你个最简单的思路。
        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);
                }
            });
        }

[解决办法]
遍历所有的 td内容，如果发现了td内容有需要要拆分的话，就马上这样写
$(this).innerHTML = "<table><tr><td>产品1</td><td>VS</td><td>产品2</td><tr><tablle>";
很简单吧？
热点排行
Bad Request.
JavaScript

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