Question

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前后拆分成两列？
效果如图,上面是原图，下面是拆分后的

Answer 1

 

jquery的，往里加了个table，拆分的话，动的单元格就多了，

宽度是30%，你自己可以调整一下

追问

不好意思，提问的时候有疏忽，漏掉了一点，就是第一行的下面还有一行的，原代码是这样的

追答

应该不要紧的，代码是查找出含有"VS"这两个字符的单元格，然后拆分内容，并插入一个表格
如果缺的那行不包含VS就无所谓了，

追问

嗯，多谢你的帮助，我测试了下，是正常的，可是问题还是有，因为数据是从数据库取出来的，比如产品1VS产品2在数据库里定义了颜色值，前台内容被拆分后，一边内容有颜色，一边内容无颜色了..

Answer 2

<script src="js/jquery-1.7.2.min.js"></script>
<script>
  $(function(){
      $('tr>td:not(:contains("VS"))').attr({'colspan':3});
        $('tr>td:contains("VS")').each(function(){
          var _1 = $(this).html();
          var _2 = _1.split("VS");
          $(this).html(_2[0]).after('<td>'+_2[1]+'</td>').after('<td>VS</td>');
      })
  });
</script>
<style>
  table{
    border-top: 1px solid #eeeeff;
    border-right: 1px solid #eeeeff;
  }
  td{
    border-left: 1px solid #eeeeff;
    border-bottom: 1px solid #eeeeff;
  }
</style>
<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>

追问

不好意思，提问的时候有疏忽，漏掉了一点，就是第一行的下面还有一行的，原代码是这样的

Answer 3

$("table td:not(:contains('VS'))").attr("colspan", "3");
$("table td:contains('VS')").each(function () {
    var text = $(this).text().split("VS");
    $(this).text(text[0]).after("<td>" + text[1] + "</td>").after("<td>VS</td>")
});

追问

不好意思，提问的时候有疏忽，漏掉了一点，就是第一行的下面还有一行的，原代码是这样的

追答

$("#tbl2 tr").each(function (i) {
    if (i == 0) {
        $(this).find("td:eq(3)").attr("colspan", "3");
        return;
    }
    if (i == 1) {
        $(this).find("td:eq(0)").attr("colspan", "7");
        return;
    }
    var td = $(this).find("td:eq(3)")
    if (td.text().indexOf('VS') != -1) {
        var text = td.text().split("VS");
        td.text(text[0]).after("<td>" + text[1] + "</td>").after("<td>VS</td>");
    } else {
        td.attr("colspan", "3");
    }
});

 

<table id="tbl2" width="100%" border="1" style="text-align: center;">

    <tr>

        <td>编号</td>

        <td>项目</td>

        <td>产品</td>

        <td>对比</td>

        <td>类别</td>

    </tr>

    <tr>

        <td>这里漏掉一行</td>

    </tr>

    ...

</table>