Introduction to the method of dynamically merging vertical cells in javascript (code)

不言
Release: 2019-02-13 10:11:31
forward
3112 people have browsed it

This article brings you an introduction to the method of dynamically merging vertical cells in JavaScript (code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Requirements

Merge cells with the same content in adjacent rows.

2. Concept

rowspan specifies the number of rows that the cell spans vertically. If rowspan is set to 3, this means that the cell must span three rows (one row by itself, plus two other rows)

3. Public method

/** * 单元格合并方法,增加rowspan属性 * @param data 要处理的数据 * @param nameList 合并的字段list */ function rowspanFun(data, nameList) { for (var i = 0; i 1) { data[startRow][name + 'Rowspan'] = 1; } else { data[j][name + 'Rowspan'] = 1; } mergeNum = 1; } } } } else { data[0][name + 'Rowspan'] = 1; } } return data; }
Copy after login

4 Calling public methods in .js

var data = [ {name: 'dwj', sex: '女', age: 20}, {name: 'dwj', sex: '男', age: 20}, {name: 'dwq', sex: '女', age: 20}, {name: 'other', sex: '女', age: 20} ]; rowspanFun(data, ['name', 'sex']);
Copy after login

Data processing results after calling the method

Introduction to the method of dynamically merging vertical cells in javascript (code)


        
Copy after login
{{item.name}} {{item.sex}} {{item.age}}
used in 5.html

Note: This html code uses ng syntax, please adjust it according to the js framework you use.

6. Result

Introduction to the method of dynamically merging vertical cells in javascript (code)

The above is the detailed content of Introduction to the method of dynamically merging vertical cells in javascript (code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!