JS table内容转成二维数组，支持colspan和rowspan

思路：
1.先初始化colspan的数据到数组
2.根据rowspan和colspan计算th和td的矩阵二次填充数组

说明：
需要引用到第三方库jQuery，table中的th和td行和列跨度必须正确

<!-- 演示数据部分 -->
<table id="expTable" class="table table_hover  table_border table_center">
    <tbody>
        <tr class="head">
            <th>客户</th>
            <th class="bb_header">期初余额</th>
            <th colspan="2">订单金额</th>
            <th>收款金额</th>
            <th>收款账户</th>
            <th>客户余额</th>
            <th>备注</th>
        </tr>
        <tr>
            <td rowspan="2">新月</td>
            <td>21</td>
            <td rowspan="3">22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td></td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
            <td></td>
        </tr>
        <tr>
            <td>合计</td>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>-</td>
            <td>45</td>
            <td></td>
        </tr>

    </tbody>
</table>

//获取table内容并转成二维数组（支持colspan和rowspan）
function getTabArray(tabId) {
    var data = [];
    if ($(tabId + ' tr').length == 0) {
        return data;
    }
    //填充数组
    $(tabId + ' tr').each(function () {
        var arr = [];
        $(this).children('th,td').each(function () {
            arr.push($(this).text().trim());
            if ($(this).attr('colspan')) {
                for (var i = 0, len = parseInt($(this).attr('colspan')) - 1; i < len; i++) {
                    arr.push('');
                }
            }
        });
        data.push(arr);
    });
    //二次填充
    var yIndex = 0;
    $(tabId + ' tr').each(function () {
        var xIndex = 0;
        $(this).children('th,td').each(function () {
            var t_yIndex = 0;
            if ($(this).attr('rowspan')) {
                t_yIndex = parseInt($(this).attr('rowspan'));
            }

            for (var i = 1, len = t_yIndex; i < len; i++) {
                var arr = data[yIndex + i];
                arr.splice(xIndex, 0, '');
            }

            if ($(this).attr('colspan')) {
                xIndex += parseInt($(this).attr('colspan'));
            } else {
                xIndex++;
            }
        });
        yIndex++;
    });
    return data;
}

//测试调用显示到console
getCvsData()
function getCvsData() {
    var data = getTabArray('#expTable');
    var cvsLines = '';
    for (var i = 0, len = data.length; i < len; i++) {
        cvsLines += data[i].join(',') + '
';
    }

    //debug
    for (var i = 0, len = data.length; i < len; i++) {
        console.info(data[i].join(','));
    }
    return cvsLines;
}

声明：本文为原创文章，如需转载，请注明来源并保留原文链接