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;
 }

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