Element Table行的动态合并及数据编辑示例
目录
- 正文
- 思路
- 1：第二列和第三列第四列根据名称进行合并
- 2：可以动态编辑第三列和第四列解决
- 3：第一列的数据是根据第三列相加得来的
- 4：弹出个输入框
- 完整代码
正文
先描述一下需求,看下图
1：动态合并行，如图所示，第一列全部合并，第二列和第三列第四列根据名称进行合并
2：可以动态编辑第三列和第四列，并且只能编辑属于此合并行的第三列和第四列，比如第一个编辑按钮点击后，只有前三行可以编辑
3：第一列的数据是根据第三列相加得来的
4：点击快捷填写，可以快速填写第三列和第四列
思路
1：第二列和第三列第四列根据名称进行合并
后台根据名称进行排序，前台通过循环解析名称来知道哪一行需要合并，这个从网上找了一个自己改了下。
第一列特殊情况根据上面的思路做简单修改
element代码: span-method="cellMerge"
<el-table
border
:data="tableData3"
height="100%"
width="100%"
:cell-style="cellStyle"
:row-style="getRowClass"
:header-row-style="getRowClass"
:header-cell-style="getRowClass"
:span-method="cellMerge"
>
vue代码：
//合并单元格,此方法需要后台进行名字进行排序
cellMerge({ row, column, rowIndex, columnIndex }) {
let length = this.tableData3.length;
//第0列比较特殊，单独合并
if (columnIndex === 0) {
const _row = this.spanArrOne[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
//1 2 5列进行合并
if (columnIndex === 1 || columnIndex === 2 || columnIndex === 5) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
//1 2 5列合并的数据
getSpanArr(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].name === data[i - 1].name) {
this.spanArr[this.pos] += 1; //需要合并的行数
this.spanArr.push(0); //新增被合并的行
} else {
this.spanArr.push(1);
this.pos = i; //新的需要合并的第几行数
}
}
}
},
//0列合并的数据
getSpanArrOne(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArrOne.push(1);
this.posOne = 0;
} else {
this.spanArrOne[this.posOne] += 1; //需要合并的行数
this.spanArrOne.push(0); //新增被合并的行
}
}
console.log(this.spanArrOne, " this.spanArrOne");
},
2：可以动态编辑第三列和第四列解决
添加template模块，里面添加input输入框和span标签，通过属性进行控制，我是通过取出后台数据，遍历后添加了自定义属性editing来控制的，为了只能编辑通过名称合并的第三列和第四列，我添加了属性flagNum，名字相同的行flagNum一样，我这边打印出来的是 0-2行是0 3到5行是3 6到9行是6以此类推，可以发现其规律就是第一个开头的行，当你点击第一个编辑按钮的时候，传的index就是0，所以根据flagNum匹配0-2行可以编辑，下面的是一样的逻辑
element代码;
<el-table-column prop="value1" label="XXX" min-width="15%" align="center">
<template slot-scope="scope">
<template v-if="scope.row.editing">
<el-input class="edit-input" v-model="scope.row.value1"></el-input>
</template>
<span v-else>{{ scope.row.value1 }}</span>
</template>
</el-table-column>
vue代码：
//判断可编辑作用域 用到的数据spanArr4Edit
getSpanArr4Edit(data) {
let ctx = this;
var flagNum = 0;
for (var i = 0; i < data.length; i++) {
//首先不能编辑
ctx.$set(data[i], "editing", false);
if (i === 0) {
ctx.spanArr4Edit.push(flagNum);
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].name === data[i - 1].name) {
ctx.spanArr4Edit.push(flagNum); //还是同一个记录
} else {
ctx.spanArr4Edit.push(i);
flagNum = i;
}
}
//与编辑相对应
ctx.$set(data[i], "flagNum", flagNum);
}
//最终赋值
ctx.tableData3 = data;
console.log(ctx.spanArr4Edit, "this.spanArr4Edit");
},
handleEdit(index, row) {
let ctx = this;
this.setEditFlag(index, 1);
console.log(index);
},
/编辑输入框显示与隐藏0 隐藏 1显示
setEditFlag: function(index, flag) {
let ctx = this;
let datalength = ctx.tableData3.length;
let flagNum = ctx.spanArr4Edit[index];
for (let i = 0; i < datalength; i++) {
if (flag == 1) {
if (flagNum === ctx.tableData3[i].flagNum) {
//循环遍历改变可编辑的标记
this.$set(ctx.tableData3[i], "editing", true);
}
} else {
//循环遍历改变可编辑的标记
this.$set(ctx.tableData3[i], "editing", false);
}
}
}
3：第一列的数据是根据第三列相加得来的
可以用监听器深度监听后台传过来的数据
代码：
watch: {
tableData3: {
handler(newValue, oldValue) {
let ctx = this;
let length = oldValue.length;
var num = 0;
if (length > 0) {
for (let i = 0; i < length; i++) {
//取出编辑后的对象数据
num = Number(num) + Number(ctx.tableData3[i].value1);
}
if (num != 0) {
//赋值对象数据
ctx.tableData3[0].all = num;
} else {
ctx.tableData3[0].all = "";
}
}
},
deep: true //深度监听对象里面的属性
}
},
4：弹出个输入框
此逻辑比较简单，就是弹出个输入框，点击确认把值带到这个页面进行填写
直接上代码：
//快捷填写保存
addSubmit: function() {
let ctx = this;
//赋值数据,取出哪一行需要进行赋值
let idx = this.quickFlag;
let datalength = ctx.tableData3.length;
//每次快捷填写某一个区域，所以此变量在此定义
var initFlag = 0;
for (let i = 0; i < datalength; i++) {
if (idx === ctx.tableData3[i].flagNum) {
if (initFlag == 0) {
//value1 只赋值一次就行
this.$set(ctx.tableData3[i], "value1", this.addform.w);
}
initFlag++;
this.$set(ctx.tableData3[i], "value2", this.addform.q);
}
}
this.dialogQuick = false;
ctx.$message.success("操作成功");
console.log(this.addform, "this.addform");
},
-----------------------------------分割线------------------------------------------------
完整代码
<template>
<div class="waterApplyTable">
<el-table
border
:data="tableData3"
height="100%"
width="100%"
:cell-style="cellStyle"
:row-style="getRowClass"
:header-row-style="getRowClass"
:header-cell-style="getRowClass"
:span-method="cellMerge"
>
<el-table-column prop="title" :label="title" align="center">
<el-table-column prop="all" label="xx" min-width="20%">
<template slot-scope="scope">
<span>{{ scope.row.all }}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="xx" min-width="15%" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="value1" label="xx" min-width="15%" align="center">
<template slot-scope="scope">
<template v-if="scope.row.editing">
<el-input class="edit-input" v-model="scope.row.value1"></el-input>
</template>
<span v-else>{{ scope.row.value1 }}</span>
</template>
</el-table-column>
<el-table-column prop="value2" label="xx" min-width="15%" align="center">
<template slot-scope="scope">
<template v-if="scope.row.editing">
<el-input class="edit-input" v-model="scope.row.value2"></el-input>
</template>
<span v-else>{{ scope.row.value2 }}</span>
</template>
</el-table-column>
<el-table-column prop="value3" label="xx" min-width="15%" align="center"></el-table-column>
<el-table-column prop="editing" label="操作" min-width="20%" align="center">
<template slot-scope="scope">
<el-button
type="primary"
v-if="!scope.row.editing"
@click.native="handleEdit(scope.$index, scope.row)"
>编辑</el-button>
<el-button type="primary" v-else @click.native="savemodify(scope.$index, scope.row)">保存</el-button>
<el-button type="primary" @click.native="clickTodo(scope.$index, scope.row)">快捷填写</el-button>
</template>
</el-table-column>
</el-table-column>
</el-table>
<el-dialog
class="dialog"
:visible="dialogQuick"
top="15vh"
@close="dialogQuickClose"
width="20%"
title="快捷填写"
:append-to-body="true"
>
<el-form :model="addform" class="demo-form-inline">
<el-form-item label="x">
<el-input v-model.trim="addform.w"></el-input>
</el-form-item>
<el-form-item label="xx">
<el-input v-model.trim="addform.q"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addSubmit">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "waterApplyTable",
props: {
total: {
type: Number,
default: 100
}
},
data() {
return {
rules: {},
page: 1,
pageSize: 20,
pageCount: 10,
formInline: {
area: "青岛市",
year: "2018-2019"
},
tableData3: [],
dialogQuick: false,
addform: {},
spanArr: [],
pos: "",
spanArrOne: [],
posOne: "",
spanArr4Edit: [],
pos4Edit: "",
//快捷填写flag,记录哪一行数据的快捷填写
quickFlag: "",
title:'我是表头',
};
},
watch: {
tableData3: {
handler(newValue, oldValue) {
let ctx = this;
let length = oldValue.length;
var num = 0;
if (length > 0) {
for (let i = 0; i < length; i++) {
num = Number(num) + Number(ctx.tableData3[i].value1);
}
if (num != 0) {
ctx.tableData3[0].all = num;
} else {
ctx.tableData3[0].all = "";
}
}
},
//immediate: true,
deep: true //深度监听对象里面的属性
}
},
created() {
this.getData();
},
mounted() {
// this.getData();
},
methods: {
getData() {
this.getTableDataList();
},
// 列表，
getTableDataList() {
let ctx = this;
// ctx.$api
// .getTableDataList()
// .then(res => {
// ctx.total = res.totalRows;
// ctx.pageCount = ctx.total / ctx.pageSize + 1;
// ctx.tableData = res.rows;
// })
// .catch(() => {
// });
let _data = [
{
all: "",
name: "名字1",
value1: "",
value2: "",
value3: "2017年-10月"
},
{
all: "",
name: "名字1",
value1: "",
value2: "",
value3: "2017年-11月"
},
{
all: "",
name: "名字1",
value1: "",
value2: "",
value3: "2017年-12月"
},
{
all: "",
name: "名字2",
value1: "",
value2: "",
value3: "2017年-10月"
},
{
all: "",
name: "名字2",
value1: "",
value2: "",
value3: "2017年-11月"
},
{
all: "",
name: "名字2",
value1: "",
value2: "",
value3: "2017年-12月"
},
{
all: "",
name: "名字3",
value1: "",
value2: "",
value3: "2017年-10月"
},
{
all: "",
name: "名字3",
value1: "",
value2: "",
value3: "2017年-11月"
},
{
all: "",
name: "名字3",
value1: "",
value2: "",
value3: "2017年-12月"
},
{
all: "",
name: "名字4",
value1: "",
value2: "",
value3: "2017年-10月"
},
{
all: "",
name: "名字4",
value1: "",
value2: "",
value3: "2017年-11月"
},
{
all: "",
name: "名字4",
value1: "",
value2: "",
value3: "2017年-12月"
}
];
//进行赋值，为了后面编辑用，此方法位置不要动
ctx.getSpanArr4Edit(_data);
console.log(ctx.tableData3, "ctx.tableData3");
ctx.getSpanArr(ctx.tableData3);
ctx.getSpanArrOne(ctx.tableData3);
},
//改变分页事件已办理
clickChangePage(currPage) {
this.getGateStationList(currPage);
},
cellStyle({ row, column, rowIndex, columnIndex }) {
return "padding:0px";
},
getRowClass({ row, column, rowIndex, columnIndex }) {
return "height:0";
},
searchData: function() {
let searchVal = this.formInline.searchVal;
},
setClass(gateState) {
if (gateState == 0) {
return "stateClass-a";
}
return "stateClass-b";
},
dialogQuickClose: function() {
this.dialogQuick = false;
},
//前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性
//index 0开始
objectSpanMethod: function({ row, column, rowIndex, columnIndex }) {
let length = this.tableData3.length - 1;
// //合并第一列
// if (columnIndex === 0) {
// console.log(columnIndex, "columnIndex");
// alert(columnIndex);
// if (rowIndex % length === 0) {
// return {
// rowspan: length + 1,
// colspan: 1
// };
// } else {
// return {
// rowspan: 0,
// colspan: 0
// };
// }
// }
//合并第一列
if (columnIndex === 0) {
alert(columnIndex);
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
//合并第二三列
},
//合并单元格,此方法需要后台进行名字进行排序
cellMerge({ row, column, rowIndex, columnIndex }) {
let length = this.tableData3.length;
//第0列比较特殊，单独合并
if (columnIndex === 0) {
const _row = this.spanArrOne[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
//1 2 5列进行合并
if (columnIndex === 1 || columnIndex === 2 || columnIndex === 5) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
//1 2 5列合并的数据
getSpanArr(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].name === data[i - 1].name) {
this.spanArr[this.pos] += 1; //需要合并的行数
this.spanArr.push(0); //新增被合并的行
} else {
this.spanArr.push(1);
this.pos = i; //新的需要合并的第几行数
}
}
}
},
//0列合并的数据
getSpanArrOne(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArrOne.push(1);
this.posOne = 0;
} else {
this.spanArrOne[this.posOne] += 1; //需要合并的行数
this.spanArrOne.push(0); //新增被合并的行
}
}
console.log(this.spanArrOne, " this.spanArrOne");
},
//编辑用到的数据
getSpanArr4Edit(data) {
let ctx = this;
var flagNum = 0;
for (var i = 0; i < data.length; i++) {
//首先不能编辑
ctx.$set(data[i], "editing", false);
if (i === 0) {
ctx.spanArr4Edit.push(flagNum);
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].name === data[i - 1].name) {
ctx.spanArr4Edit.push(flagNum); //还是同一个记录
} else {
ctx.spanArr4Edit.push(i);
flagNum = i;
}
}
//与编辑相对应
ctx.$set(data[i], "flagNum", flagNum);
}
//最终赋值
ctx.tableData3 = data;
console.log(ctx.spanArr4Edit, "this.spanArr4Edit");
},
//快捷填写
clickTodo: function(index, row) {
this.dialogQuick = true;
this.quickFlag = index;
this.addform = {};
},
//快捷填写保存
addSubmit: function() {
let ctx = this;
//赋值数据,取出哪一行需要进行赋值
let idx = this.quickFlag;
let datalength = ctx.tableData3.length;
//每次快捷填写某一个分水口，所以此变量在此定义
var initFlag = 0;
for (let i = 0; i < datalength; i++) {
if (idx === ctx.tableData3[i].flagNum) {
if (initFlag == 0) {
//value1 只赋值一次就行
this.$set(ctx.tableData3[i], "value1", this.addform.w);
}
initFlag++;
this.$set(ctx.tableData3[i], "value2", this.addform.q);
}
}
this.dialogQuick = false;
ctx.$message.success("操作成功");
console.log(this.addform, "this.addform");
},
handleEdit(index, row) {
let ctx = this;
this.setEditFlag(index, 1);
console.log(index);
// this.prevValue = JSON.parse(JSON.stringify(row));//保存之前的数据
},
handleCancle(index, row) {
row.editing = false;
// let prevContent = this.prevValue.bookname;
// this.$set(row,"bookname",prevContent);
},
savemodify(index, row) {
this.setEditFlag(index, 0);
console.log(row, "row");
console.log(this.tableData3, "改变后的table数据");
console.log(
JSON.stringify(this.tableData3),
"JSON.stringify(this.tableData3)"
);
},
//提交数据到后台
submitToServe() {
let ctx = this;
let dataResult = JSON.parse(JSON.stringify(this.tableData3));
var result = 0;
//调用后台保存方法
// ctx.$api.addWaterApply(dataResult).then(res => {
// if (res.code == "0") {
// result =1;
// }
// });
console.log(dataResult, "提交到后台的数据");
//return result;
return 1;
},
//编辑输入框显示与隐藏0 隐藏 1显示
setEditFlag: function(index, flag) {
let ctx = this;
let datalength = ctx.tableData3.length;
let flagNum = ctx.spanArr4Edit[index];
for (let i = 0; i < datalength; i++) {
if (flag == 1) {
if (flagNum === ctx.tableData3[i].flagNum) {
//循环遍历改变可编辑的标记
this.$set(ctx.tableData3[i], "editing", true);
}
} else {
//循环遍历改变可编辑的标记
this.$set(ctx.tableData3[i], "editing", false);
}
}
}
},
filters: {
iswarnFlt(val) {
return val == 0 ? "否" : "是";
}
}
};
</script>
<style lang="scss" scoped>
.waterApplyTable {
height: 100%;
}
</style>
以上就是Element Table行的动态合并及数据编辑示例的详细内容，更多关于Element Table行动态合并编辑的资料请关注我们其它相关文章！
相关推荐
-
element-ui table行点击获取行索引（index）并利用索引更换行顺序
1)将每一行的索引插入操作行中,即为每一行数据添加一个属性index 使用el-table已经给处的方法:tableRowClassName html中: <el-table :row-class-name="tableRowClassName"></el-table> js中:只需放入methods中即可,el-table会自动触发(不知道为什么贴源码不行啊) 点击进行事件操作: 在el-table-column中加入slot,可以拿到当前点击列所属的行,并完
-
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
前言 运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便 效果 实现方式 template部分 <el-table v-loading="loading" :default-sort="{prop: 'sortNum', order: 'ascending'}" :data="list" border align="left" > <el-tab
-
关于vue中element-ui form或table lable换行的问题
element-ui form或table lable换行问题 今天在写项目,突然遇到个需求,需要将form里面的lable换行,百度了下,发现了一个办法,特此记录下来 First,我们先要在我们的lable里面进行以下操作 :label="'机组: \n(xxx用)'" 双引号嵌套单引号 在需要换行的文字中间 加入\n 换行符 Second,再添加css的样式 /deep/ .el-form-item__label{ white-space:pre-line; } //如果是tabl
-
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
1.表格动态添加,也可删除 <template> <div class="TestWord"> <el-button @click="addLine">添加行数</el-button> <el-button @click="save">保存</el-button> <el-table :data="tableData" style="wid
-
vue+element获取el-table某行的下标,根据下标操作数组对象方式
1.在vue中对数组中的某个对象进行操作时(替换.删除),都需要用到该对象在数组中的下标. 前端代码: scope.$index :获取当前行的下标 scope.row:获取当前行的对象 效果图: 思路:通过点击事件将该对象在数组中的下标传递到方法中,然后对数组进行操作 即可根据下标删除数组中对应的对象. 补充知识:vue-element-upload 文件上传打开选择文件弹框前进行提示或操作 在项目中使用文件上传功能时,需求是不能直接弹出弹框,要先二次确认或进行提示.引申开来,即可在打开选择文
-
vue+elementui实现动态添加行/可编辑的table
本文实例为大家分享了vue+elementui实现动态添加行.可编辑的table的具体代码,供大家参考,具体内容如下 HTMl代码块: <el-col :span="24"> <el-form-item label="与承租户同户籍成员:" :label-width="formLabelWidth"> <el-table :data="zichandetail.members&quo
-
Element Table行的动态合并及数据编辑示例
目录 正文 思路 1:第二列和第三列第四列根据名称进行合并 2:可以动态编辑第三列和第四列解决 3:第一列的数据是根据第三列相加得来的 4:弹出个输入框 完整代码 正文 先描述一下需求,看下图 1:动态合并行,如图所示,第一列全部合并,第二列和第三列第四列根据名称进行合并 2:可以动态编辑第三列和第四列,并且只能编辑属于此合并行的第三列和第四列,比如第一个编辑按钮点击后,只有前三行可以编辑 3:第一列的数据是根据第三列相加得来的 4:点击快捷填写,可以快速填写第三列和第四列 思路 1:第二列和第
-
vue+element table表格实现动态列筛选的示例代码
需求:在用列表展示数据时,出现了很多项信息需要展示导致表格横向特别长,展示就不够明晰,用户使用起来可能会觉得抓不住自己的重点. 设想实现:用户手动选择表格的列隐藏还是展示,并且记录用户选择的状态,在下次进入该时仍保留选择的状态. 效果图如下: 原: 不需要的关掉默认的勾选: 实现代码: HTML部分就是用一个多选框组件展示列选项 用v-if="colData[i].istrue"控制显示隐藏,把列选项传到checkbox里再绑定勾选事件. <el-popover placemen
-
element表格行列的动态合并示例详解
目录 效果图 代码详解 数据结构 行合并 列合并 完整代码+注释 效果图 合并行 合并列 element的table提供了合并行或者列的方法,并且有一个示例,传送入口:element.eleme.cn/#/zh-CN/com… 但是实际应用中,后台数据的返回格式和指定合并肯定是动态且没有规律的.element的示例过于简单,并且也没有什么太多的解释.实操中就碰到了这个问题.现在记录下来. 代码详解 实操中,需要合并的代码通常就是子数据需要进行合并,因为后台返回的格式都是父数据中包裹着子数据,这种
-
element 动态合并表格的步骤
前言 element 官方的例子太简单了,不满足实际的需求 数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢 需求 动态合并表格,数据来源于数据库 正文 一开始,我的数据源是单独的数组,表格数据合并了几个数据, 我根据各个数组的长度,来决定每一行的合并数 结果:有些数据是正常的,但有些又合并出错了.计算的方式不对 尝试二 dataPretreatment() 用这个方法 计算出每一行的行数 dataPretreatment(){ //表格数据列合并预处理,生成一个与行数相
-
vue element table表格相同名称列合并方式
目录 element table表格相同名称列合并 对table表格相同内容行的合并 element table表格相同名称列合并 <template> <div> <el-table show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" :data="tableData" row-key="id"
-
el-table表格动态合并行及合并行列实例详解
目录 前言 1.合并行 2.合并行列 总结 前言 在写项目的时候有时候会经常遇到把行和列合并起来的情况,因为有些数据是重复渲染的,不合并行列会使表格看起来非常的混乱,如下: 而我们想要的数据是下面这种情况,将重复的行进行合并,使表格看起来简单明了,如下: 1.合并行 所谓的合并行就是将多行相同的数据变成一行来显示,直接上代码,页面的布局比较简单 <template> <div class="table"> <el-table :data="tab
-
jQuery实现动态操作table行
JQuery 实现动态操作 table 行,供大家参考,具体内容如下 实现效果:可动态实现table添加行和删除行,如下图. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Html动态Table</title> <script src="https://apps.bdimg.
-
ASP.NET GridView 实现课程表显示(动态合并单元格)实现步骤
GridView,ASP.NET中很常用的数据显示控件,这里,我将用这个控件来实现课程表的显示.首先说说课程表的显示与普通记录的显示有何不同?这里所说的普通记录是指直接从数据库中查询出来的.没有经过任何处理的记录.通常,我们用GridView显示这些普通记录,只需直接将这些记录表绑定到GridView中即可.但是,课程表的显示可不是这么简单,它需要将普通记录继续加工,需要根据记录中具体的数据来确定数据需要显示在哪一行.哪一列,而且需要根据课程开始时间和结束时间动态合并单元格,最后才是数据的显示.
-
jquery 动态合并单元格的实现方法
如下所示: ////在table的第二行的位置添加一行: var tbl_elm = $("#dgList"); $('<tr><td colspan=\'2\'>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1)) ////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .Tab