请教如何获取复杂table的列数？

[winzond]

<table width="200" border="1">
  <tr>
    <td colspan="3">1</td>
    <td rowspan="3">2</td>
    <td rowspan="3">3</td>
  </tr>
  <tr>
    <td rowspan="2">4</td>
    <td colspan="2">5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

请教，这样的表格，甚至更复杂一些的表格，怎么才能知道4、6、7、2、3分别在第1、2、3、4、5列呢？

[winzond]

        $(document).ready(function () {
            var i = 0;
            var youbiao = 0;
            $("tr:first td").each(function () {
                if ($(this).attr("colspan") > 1) {
                    for (var j = 0; j < $(this).attr("colspan"); j++) {
                        $("tr:last td").eq(youbiao).attr("data-i", i + youbiao++);
                    };
                    i--;
                } else {
                    $(this).attr("data-i", i + youbiao);
                };
                i++;
            });
        });

改进一下

[winzond]

        $(document).ready(function () {
            var youbiao = 0;
            var tr2youbiao = 0;
            $("tr:first td").each(function (i) {
                if ($(this).attr("colspan") > 1) {
                    for (var j = 0; j < $(this).attr("colspan"); j++) {
                        $("tr:last td").eq(tr2youbiao++).attr("data-i", i + youbiao++);
                    };
                    youbiao--;
                } else {
                    $(this).attr("data-i", i + youbiao);
                };
            });
        });

    <table width="200" border="1">
        <tr>
            <td rowspan="2">1</td>
            <td rowspan="2">2</td>
            <td colspan="3">h1</td>
            <td rowspan="2">6</td>
            <td colspan="2">h2</td>
            <td rowspan="2">9</td>
            <td rowspan="2">10</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>

两行表格已经能判断了，任意行表格该怎么处理呢？是否可以用递归函数处理？但我递归函数没学精，请大神指教，谢谢！

[cn00439805]

支持无限级的，无限复杂的表格

<table width="200" border="1" id="table1">
        <tr>
          <td colspan="3">1</td>
          <td rowspan="3">2</td>
          <td rowspan="3">3</td>
        </tr>
        <tr>
          <td rowspan="2">4</td>
          <td colspan="2">5</td>
        </tr>
        <tr>
          <td>6</td>
          <td>7</td>
        </tr>
        <tr>
            <td>8</td>
            <td colspan="3">9</td>
            <td>10</td>
        </tr>
      </table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.js"></script>
<script>
    $(function(){
        let $table = $("#table1").clone()
        let $oldTds = $("#table1").find("td")
        let $tds = $table.find("td")
        $tds.css({border:"0 none",padding:0,margin:0})
        $table.css({width:"30030px",border:"0 none",borderCollapse:"collapse"})
        $table.appendTo('body')
        let unit = Infinity
        $tds.each((i,td) => {unit = Math.min(unit,$(td).width())})
        let fstLeft = 0
        $tds.each((i,td) => {
            if(i === 0){fstLeft = $(td).offset().left}
            var index = Math.round(($(td).offset().left - fstLeft)/unit)
            if($oldTds.eq(i).attr("colspan") > 1) return
            $oldTds.eq(i).attr("data-i", index + 1);
        })
        $table.remove()
    })
</script>

[winzond]

引用 3 楼 cn00439805 的回复:

支持无限级的，无限复杂的表格

<table width="200" border="1" id="table1">
        <tr>
          <td colspan="3">1</td>
          <td rowspan="3">2</td>
          <td rowspan="3">3</td>
        </tr>
        <tr>
          <td rowspan="2">4</td>
          <td colspan="2">5</td>
        </tr>
        <tr>
          <td>6</td>
          <td>7</td>
        </tr>
        <tr>
            <td>8</td>
            <td colspan="3">9</td>
            <td>10</td>
        </tr>
      </table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.js"></script>
<script>
    $(function(){
        let $table = $("#table1").clone()
        let $oldTds = $("#table1").find("td")
        let $tds = $table.find("td")
        $tds.css({border:"0 none",padding:0,margin:0})
        $table.css({width:"30030px",border:"0 none",borderCollapse:"collapse"})
        $table.appendTo('body')
        let unit = Infinity
        $tds.each((i,td) => {unit = Math.min(unit,$(td).width())})
        let fstLeft = 0
        $tds.each((i,td) => {
            if(i === 0){fstLeft = $(td).offset().left}
            var index = Math.round(($(td).offset().left - fstLeft)/unit)
            if($oldTds.eq(i).attr("colspan") > 1) return
            $oldTds.eq(i).attr("data-i", index + 1);
        })
        $table.remove()
    })
</script>

谢谢！测试成功！有些语法已经超出我所学了（自学的，年纪又偏大，没法），我理解是这样：1、首先克隆一个表格，以达到不改变原表格布局的目的；2、把表格拉得非常宽，这样就会自动把每一列调整成等宽，并获取这个宽度；3、获取td的左边距，左边距/宽度就算出它在第几列了。跨列的，直接返回执行下一次遍历，否则把得到的列数添加给原表格的属性。