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(',') + '\n';
    }

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

 

 

聲明：本文為原創文章，如需轉載，請注明來源並保留原文鏈接