思路:
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;
}

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

JS table内容转成二维数组,支持colspan和rowspan的更多相关文章

  1. qrcode.js插件将你的内容转换成二维码格式

    ---qrcode.js插件将你的内容转换成二维码格式--- 我之前一直想知道二维码是怎么生成,所以就了解了一下, 最后还是不知道它的原理, 但是,我知道怎么生成. 现在就让我带你制作一个你喜爱的二维 ...

  2. JS框架_(Qrcode.js)将你的内容转换成二维码格式

    百度云盘 传送门 密码:304e 输入网址点击按钮生成二维码,默认为我的博客首页 二维码格式演示 <!DOCTYPE html> <html lang="en"& ...

  3. numpy中三维数组转变成二维数组

    numpy中reshape()函数对三维数组进行转换成二维数组,见下面例子: >>>a=np.reshape(np.arange(18),(3,3,2)) >>> ...

  4. java list map转换成二维数组

    /** * *@Title: ListToArray *@Description: list列表转换成二维数组 *@Author: Administrator *@Since: 2018年1月7日下午 ...

  5. php将一个二维数组按照某个字段值合并成一维数组,如果有重复则将重复的合并成二维数组

    版权声明:本文为博主原创文章,未经博主允许不得转载. 最近工作中碰到一个问题,用PHP将一个二维数组按照二维数组中的各个项中的某个特定字段值合并成一维数组,如果有重复则将重复的合并成二维数组,生成的二 ...

  6. js将一个具有相同键值对的一维数组转换成二维数组

    这两天,一个前端朋友在面试的笔试过程中遇到了一道类似于"用js实现将一个具有相同code值的一维数组转换成相同code值在一起的二维数组"的题目.他面试过后,把这个问题抛给了我,问 ...

  7. 用js刷剑指offer(二维数组中的查找)

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  8. PHP多个一维数组合并成二维数组的简易方法

    当我们需要进行数组遍历数据的时候,需要将多个一维数组进行二维的转换,方法很简单.如下: <?php $a= array('张三','李四','王五'); $b= array ('23','24' ...

  9. java将一维数组拆分成二维数组

    package staticFactory; public class Array { public static void main(String[] args) { String[] a=new ...

随机推荐

  1. MongoDB 分片键的选择与案例

    MongoDB版本:3.6 一.分片键类别 1.升序片键 升序片键例如:日期时间字段.自增字段. 2.随机分发片键 随机分发片键例如:用户名.邮件名.UUID.MD5值或者是其它的一些没有规律的值的列 ...

  2. SUSE12Sp3-kafka安装

    1.安装java jdk sudo mkdir -p /usr/local/java #创建目录 将jdk-8u201-linux-x64.tar.gz上传到该目录 cd /user/local/ja ...

  3. [Swift]LeetCode503. 下一个更大元素 II | Next Greater Element II

    Given a circular array (the next element of the last element is the first element of the array), pri ...

  4. Truncated incorrect DOUBLE value: 'd'的解决方法(jdbc)

    今天写jdbc中dao的增删改查时遇到了一个问题,花费了好长时间,不过还好,有我峰哥出头,问题解决了,在这做个分享,对峰哥表达一下感激之情 网上搜索到的对“Truncated incorrect DO ...

  5. DMA的基本概念

    DMA允许外围设备和主内存之间直接传输 I/O 数据, DMA 依赖于系统.每一种体系结构DMA传输不同,编程接口也不同. 数据传输可以以两种方式触发:一种软件请求数据,另一种由硬件异步传输. 在第一 ...

  6. python-正则表达式练习

    1.匹配普通URL ^(http://)([a-z]+)\.([a-z]+)\.(com|cn|net|edu)(/(\w)+)+(.+) 2.匹配type返回的字符串中的类型 import re r ...

  7. Python内置函数(2)——all

    英文文档: all(iterable) Return True if all elements of the iterable are true (or if the iterable is empt ...

  8. Java开发需掌握的常用Linux命令(持续更新)

    linux命令是对Linux系统进行管理的命令.对于Linux系统来说,无论是中央处理器.内存.磁盘驱动器.键盘.鼠标,还是用户等都是文件,Linux系统管理的命令是它正常运行的核心,与之前的DOS命 ...

  9. Spring Boot分布式系统实践【扩展1】shiro+redis实现session共享、simplesession反序列化失败的问题定位及反思改进

    前言 调试之前请先关闭Favicon配置 spring:     favicon:       enabled: false 不然会发现有2个请求(如果用nginx+ 浏览器调试的话) 序列化工具类[ ...

  10. leetcode — scramble-string

    import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/scramble-string/ * * Given ...