-
2021-06-19 00:50:08js向table表格中插入添加新行和选择删除行-综合特效-网页特效-站长新动力-msxindl.com
#tab{
width:50%;
}
#tab td{
height:2em;
text-align:center;
}
js向table表格中插入添加新行和选择删除行。
第1行第1列 第1行第2列 第1行第3列 全(选/不选) var i=1,flag=true;
var tab=document.getElementById("tab");
var choose=document.getElementsByName("choose");
function add(){
i++;
var row=tab.insertRow(-1);
row.insertCell(0).innerHTML="第"+i+"行第1列";
row.insertCell(1).innerHTML="第"+i+"行第2列";
row.insertCell(2).innerHTML="第"+i+"行第3列";
row.insertCell(3).innerHTML="";
}
function del(){
var row=tab.rows;
for(var i=row.length-2;i>=0;i--){
if(choose[i].checked){
tab.deleteRow(i+1);
}
}
}
function chooseAll(){
if(choose.length>0){
if(flag){
for(var i=0;i
choose[i].checked=true;
}
flag=false;
}else{
for(var i=0;i
choose[i].checked=false;
}
flag=true;
}
}
}
更多相关内容 -
ant-design-vue 中 table插入详情行
2021-06-01 10:41:43为了页面的美观,这时候就需要在本行插入一行详情行,如上图,点击更多插入详情介绍。实现方法主要有两种。 方法一 ant-design-vue原文档提供的expandedRowRender插槽。可以在每行后面插入子行,也可以插入子table。...ant-design-vue 中 table插入详情行
在业务中当表格内容较多不能一次性完全展示时。为了页面的美观,这时候就需要在本行插入一行详情行,如上图,点击更多插入详情介绍。实现方法主要有两种。方法一
ant-design-vue原文档提供的expandedRowRender插槽。可以在每行后面插入子行,也可以插入子table。以下是部分代码,详情请点击查看原文档
<template> <a-table :columns="columns" :data-source="data"> <a slot="action" slot-scope="text" href="javascript:;">Delete</a> <p slot="expandedRowRender" slot-scope="record" style="margin: 0"> {{ record.description }} </p> </a-table> </template> <script> const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Address', dataIndex: 'address', key: 'address' }, { title: 'Action', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' } }, ]; const data = [ { key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.', }, { key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.', }, { key: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.', }, ]; export default { data() { return { data, columns, }; }, }; </script>
嵌套子表格 详情请点击查看
<template> <a-table :columns="columns" :data-source="data" class="components-table-demo-nested"> <a slot="operation" slot-scope="text">Publish</a> <a-table slot="expandedRowRender" slot-scope="text" :columns="innerColumns" :data-source="innerData" :pagination="false" > <span slot="status" slot-scope="text"> <a-badge status="success" />Finished </span> <span slot="operation" slot-scope="text" class="table-operation"> <a>Pause</a> <a>Stop</a> <a-dropdown> <a-menu slot="overlay"> <a-menu-item> Action 1 </a-menu-item> <a-menu-item> Action 2 </a-menu-item> </a-menu> <a> More <a-icon type="down" /> </a> </a-dropdown> </span> </a-table> </a-table> </template> <script> const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Platform', dataIndex: 'platform', key: 'platform' }, { title: 'Version', dataIndex: 'version', key: 'version' }, { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' }, { title: 'Creator', dataIndex: 'creator', key: 'creator' }, { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' }, { title: 'Action', key: 'operation', scopedSlots: { customRender: 'operation' } }, ]; const data = []; for (let i = 0; i < 3; ++i) { data.push({ key: i, name: 'Screem', platform: 'iOS', version: '10.3.4.5654', upgradeNum: 500, creator: 'Jack', createdAt: '2014-12-24 23:12:00', }); } const innerColumns = [ { title: 'Date', dataIndex: 'date', key: 'date' }, { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Status', key: 'state', scopedSlots: { customRender: 'status' } }, { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' }, { title: 'Action', dataIndex: 'operation', key: 'operation', scopedSlots: { customRender: 'operation' }, }, ]; const innerData = []; for (let i = 0; i < 3; ++i) { innerData.push({ key: i, date: '2014-12-24 23:12:00', name: 'This is production name', upgradeNum: 'Upgraded: 56', }); } export default { data() { return { data, columns, innerColumns, innerData, }; }, }; </script>
方法二
通过expandedRowRender这个插槽虽然实现了插入详情介绍,但是默认会渲染成children,如果我们原本数据就是树形数据的话,这样就会有冲突。如图
(ps:有哪位大佬可有解决这个冲突的方法可以评论下)。
我的解决方法是点击更多时,在每一行的子数据中的第一条数据插入一条新数据,然后进行列合并,这样就避免了详情行和子数据冲突问题。话不多说上主要代码。<a-table @expandedRowsChange="expandedRowsChange" @expand="expand" :expandedRowKeys="expandedRowKeys" :columns="jsoncolumns" :data-source="alldata.body_data.content.content" :bordered="true" :pagination="false" > </a-table> // js代码 <script> // columns一定要写到data中 data () { return { jsoncolumns: [ { title: '标签', dataIndex: 'name', width: '20%', customRender: (value, row, index) => { const newdata = row.key.split('-') if (newdata.pop() === 's') { return { children: <p style="margin: 0;width:100%;display: flex;justify-content: start;flex-wrap: wrap"> <span style="width:25%;marginBottom:20px">最大长度:{value.more.maxlength}</span> <span style="width:25%;marginBottom:20px">最小长度:{value.more.minlength}</span> <span style="width:25%;marginBottom:20px">最大值: {value.more.maximum}</span> <span style="width:25%;marginBottom:20px">最小值: {value.more.minimum}</span> <span style="width:100%;marginBottom:20px">其他限制: {value.more.pattern}</span> <span style="width:100%;marginBottom:20px">参数可能性及说明:: {value.more.newenum}</span> </p>, attrs: { colSpan: 6 } } } return value } }, { title: '类型', key: 'type', dataIndex: 'type', width: '15%', customRender: (value, row, index) => { const obj = { children: <span>{ value === 'M' ? '必选' : value === 'C' ? '条件必选' : '可选' }</span>, attrs: {} } const newdata = row.key.split('-') if (newdata.pop() === 's') { obj.attrs.colSpan = 0 } return obj } }, { title: '必选M/条件必选C/可选O', key: 'required', dataIndex: 'required', width: '15%', customRender: (value, row, index) => { const obj = { children: value, attrs: {} } const newdata = row.key.split('-') if (newdata.pop() === 's') { obj.attrs.colSpan = 0 } return obj } }, { title: '说明', dataIndex: 'description', key: 'description', width: '20%', customRender: (value, row, index) => { const obj = { children: value, attrs: {} } const newdata = row.key.split('-') if (newdata.pop() === 's') { obj.attrs.colSpan = 0 } return obj } }, { title: '详细说明', dataIndex: 'detail', key: 'detail', width: '20%', customRender: (value, row, index) => { const obj = { children: value, attrs: {} } const newdata = row.key.split('-') if (newdata.pop() === 's') { obj.attrs.colSpan = 0 } return obj } }, { title: '操作', dataIndex: 'action', width: '10%', customRender: (value, row, index) => { const obj = { children: <a>更多<a-icon type="down"/></a>, attrs: {} } const newdata = row.key.split('-') if (newdata.pop() === 's') { obj.attrs.colSpan = 0 } return obj }, customCell: this.more // 给本列添加点击事件 } ], } }, methods: { more (val) { return { on: { click: (event) => { const newval = val.children.find((v, i) => { // 查找是否有展开行 return v.key.split('-').pop() === 's' }) if (val.more) { if (!newval) { // 判断本行的详情行是否展开 const newenum = {} if (val.more.enum) { val.more.enum.forEach((v, i) => { newenum[v.value] = v.description }) val.more.newenum = JSON.stringify(newenum) } // 如果本行没有展开在子数据首部插入详情行,key值为改行key值-s val.children.unshift({ key: val.key + '-s', name: val }) } else { //如果展开就删除第一个元素,关闭详情行 val.children.shift() } } } } } }, } </script>
希望该文章可以帮助解决疑惑,有更好的方法或者有其他不了解的可以评论。
行列合并具体请看我下篇文章。 -
表格序号_如何在表格中插入或删除行时保持序号连续?
2020-12-24 03:59:29如图 8‑20所示为某公司人力资源部制作的工资表,工作人员设想在制作工资时在中间插入或删除一行记录时保持序号连续,应该如何操作?图8‑20工资表1解决方案先选中“序号”列,利用“编号”功能添加序号。2操作方法...如图 8‑20所示为某公司人力资源部制作的工资表,工作人员设想在制作工资时在中间插入或删除一行记录时保持序号连续,应该如何操作?
图8‑20工资表
1 解决方案先选中“序号”列,利用“编号”功能添加序号。
2 操作方法“编号”功能在表格中应用
步骤1 选中“序号”列。
步骤2 如图 8‑21所示,单击“开始”选项卡→“段落”组中的“编号”按钮,选择“定义新编号格式”命令,打开“定义新骗号格式”对话框。
图8‑21打开“定义新骗号格式”对话框
步骤3 如图 8‑22所示,在“编号样式”下拉列表框中选择一种编号样式,在“对齐方式”下拉列表框中选择编号对齐方式为“居中”,单击“确定”按钮。
图8‑22“定义新骗号格式”对话框
版权所有 转载须经Excel技巧网/Office学吧允许
【 Word 】:如何为Word文档中的段落排序?
Office学吧系列动画教程,最低6.5折。苹果用户,请点击阅读原文。
-
wps表格中怎么在多行之间每行插一行?
2021-06-28 02:10:402014-04-08wps中行间距怎么设置行距是从一行文字的底部到另一行文字底部的间距,如:段落顶部间距、段落底部间距、文本行垂直间距的相关设置。1。选定要修改的文字。2。在“格式”工具栏上,单击“行距”按钮旁的...2014-04-08
wps中行间距怎么设置
行距是从一行文字的底部到另一行文字底部的间距,如:段落顶部间距、段落底部间距、文本行垂直间距的相关设置。
1。选定要修改的文字。
2。在“格式”工具栏上,单击“行距”按钮旁的下拉三角符号,选择所需数字。
设置更加精确的行距值
1。在“格式”工具栏上,单击“行距”按钮旁的下拉三角符号,选择“其他”,或者在“格式”菜单中选择“段落”。
2。选择“缩进和间距”选项卡。
3。在“间距”中作下列相应的操作之一:
• 若要设置每个段落顶部的间距,请在“段前”框中选择或输入值。
• 若要设置每个段落底部下的间距,请在“段后”框中选择或输入值。
• 若要设置文本行之间的垂直间距,请单击“行距”框中...全部
行距是从一行文字的底部到另一行文字底部的间距,如:段落顶部间距、段落底部间距、文本行垂直间距的相关设置。
1。选定要修改的文字。
2。在“格式”工具栏上,单击“行距”按钮旁的下拉三角符号,选择所需数字。
设置更加精确的行距值
1。在“格式”工具栏上,单击“行距”按钮旁的下拉三角符号,选择“其他”,或者在“格式”菜单中选择“段落”。
2。选择“缩进和间距”选项卡。
3。在“间距”中作下列相应的操作之一:
• 若要设置每个段落顶部的间距,请在“段前”框中选择或输入值。
• 若要设置每个段落底部下的间距,请在“段后”框中选择或输入值。
• 若要设置文本行之间的垂直间距,请单击“行距”框中的选项,在“设置值”框中还可选择或输入倍数值。收起
-
jquery.dataTable()如何在行中间插入一行
2017-07-04 12:52:13jquery.dataTable()如何在行中间插入一行,不要用jquery写法,要用dataTable自带的方法。这样才能行序号加1 -
EXCEL电子表格一行中间画一条删除线怎么画/excel表格如何划掉数据
2021-08-05 01:47:01EXCEL表格里,有些字体中间被划掉了,怎么操作的?选中该单元格,右键设置单元格格式。勾选删除线即可。取消的话,就不勾。如何在Excel中的数字上划一横线选择数据,单击鼠标右键,“设置单元格格式”“字体”中的... -
element表格增加一行合计在表第一行
2022-01-06 09:55:08element表格增加一行合计在表第一行 -
Word利用快捷键在两张以上无缝表格之间或表格前插入文字
2021-03-07 08:50:05在制作 Word 文档过程中,偶尔会遇到这样一种情况,就是要在两张或多张无缝表格之间插入文字,由于输入文字前必须插入光标,恰恰在无缝表格之间不容易插入光标,应该怎么办呢?毫无疑问把表格分离,至于如何分离以及... -
【Aspose for .NET】Aspose.word操作表格:在表格中插入行
2020-08-06 14:17:34Aspose.word 在表格中插入行 参数说明:table :当前 document中的table对象 获取方式如下: Table labTable = (Aspose.Words.Tables.Table)doc.GetChild(NodeType.Table, 0, true); /// <summary> /// ... -
EXCEL里面制作好的表格,怎么在表格中加一行呢?
2020-12-30 16:00:42第二步:打开EXCEL以后,根据需要选择插入行的位置,比如需要在14行和第15行的位置插入一行,这时选中第十五行,右击,选择插入。第三步:上面的这一步还可以使用选项卡里面的插入项,点击插入下面的小箭头,选择... -
怎样在表格中新增一行和上排一样格式的表格。
2021-07-29 02:23:19怎样在表格中新增一行和上排一样格式的表格。以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!怎样在表格中新增一行和上排一样格式的表格。1、若在word... -
(一)Word中如何将表格断开,并且增加空的一行
2021-01-11 12:39:33在使用word中表格时,有时候希望从当中断开,并且在中间添加一行空白,方便添加文字,如下图所示: 将一个4行的表格,弄成2个2行的表格,并且当中要多出一行,那么快捷键如下: 选中要断开的那一行,ctr+shift... -
js table表格某一行新插入数据 和删除某一行数据
2020-09-04 09:19:11var x= document.getElementById("imp").insertRow(1); var y=x.insertCell(0); var z=x.insertCell(1); var q=x.insertCell(2); var w=x.insertCell(3); var e=x.insertCell(4);...//删除某一行 } -
excel表格末尾添加一行_WPS表格办公—表格隔开不同数据
2020-11-19 19:51:35我们在利用WPS表格与Excel表格进行日常办公时,经常需要制作各种各样的表格,如果我们看到数据排列起来太过眼花,领导让我们将相同数据中间添加一行隔开,该如何操作呢,今天我们就来教大家,如何在WPS表格与Excel... -
Excel中如何在每一行前插入标题行
2013-04-01 15:41:37Excel中如何在每一行前插入标题行 -
Vue.js 在v-for产生的表格中 点击其中一行中的按钮 在该行下方添加一行
2021-01-14 00:08:18Vue.js 在v-for产生的表格中 点击其中一行中的按钮 在该行下方添加一行添加的那行背景不一样 在添加的那行再点击 继续添加一行 背景颜色不一样 相当于在行下面添加子集行 不同级别的子集背景颜色不一样新增参数+{{... -
Excel表格中无法中间插入新行列! 提示:在当前工作表的最后一行或列中,存在非空单元格,解决方案
2021-08-26 13:26:44今天在做EXCEL表格插入一列时出现了提示:在当前工作表的最后一行或列中,存在非空单元格,所以无法插入新行或新列。一时间显得毫无办法,后仔细一想,我在插入一列时,后面的列相应往后移,如果最后一列里有数据,... -
vue table表格新增添加一行数据
2019-11-21 10:11:52表格样式并不能是难点 主要是点击新增按钮和删除按钮自增的编号的修改 <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#3d80f2',color:'#fff',fontSize:'16px',height:'... -
Layui数据表格中动态插入行&&插入下拉框
2019-06-17 15:31:33想要在已加载的layui数据表格动态的插入一行,首先要在加载表格的时候设置它的event值。因为我这里是点击序号就添加一行,所以我在序号中设置了它的event值!当然在静态表格当中也是一样的操作,在你想要点击的表头... -
excel怎么在不同内容中间插入行?
2018-06-19 11:05:05,1)然后拖动填充钮向下填充到最后一行然后选中F列,按F5,定位条件,公式,在公式下仅选中数字,确定,此时F列的1就已经被选中了,在任何一个已经选定的数字上右键-插入-整行,确定就可以了。... -
excel表格末尾添加一行_这样输入Excel公式,也太快了吧......
2020-11-18 11:37:381、无空行输入公式如果是连续的表格,双击公式右下角,即可快速把公式复制到最后一行2、有空行输入公式如果中间有断行,就先选取区域,按Ctrl+D填充3、自动复制上一行公式普通的表格,插入行后是无法复制上一行公式... -
动态新增表格一行HTML页面源代码
2010-05-06 16:49:51动态新增表格一行HTML页面源代码,用js实现的。 -
Word如何在表格里面插入行或者列
2021-11-26 13:46:28我们在Word里面制作表格时,有时绘制好的表格需要中间插入一行或者一列,那么这个怎么操作了?以最常用的极速办公speedoffice为列。 首先,光标放在需要添加行或者列的那一个单元格里面,如图 接着,右键鼠标,... -
Qt-在表格(QTableView)中插入图片
2021-02-11 07:24:00本例,利用Delegate 实现在QTableView中插入Pixmap图[文件] main.cpp ~ 273B 下载(10)/*** @file main.cpp* @brief* @author xiangxw* @version 0.0* @date 2011年月日*/#include#include"MyT... -
excel表格中怎么合计一行的数字(数字里面带有汉
2021-02-05 11:02:06话题:excel表格中怎么合计一行的数字(数字里面带有汉字)回答:这个可以设置单元格自定义格式0"汉字"或"汉字"0,计算时可以直接使用公式合计。话题:excel中 同一行中 有数字 有汉字 最后合计的时候 要合计汉字... -
易语言自动添加WORD表格源码-易语言
2021-06-13 03:31:58易语言自动添加WORD表格源码 -
Word、WPS中表格的第一行和第二行中间间距,如何去掉,使得跟其他行间距相同
2020-05-01 10:52:18Word、WPS中表格的第一行和第二行中间间距,如何去掉,使得跟其他行间距相同 Word或wps表格已经设计好了很多表格样式供大家使用。如图1 图1 当不想第一行和第二行的间距相同时,取消首行填充即可,如果不间距未变,... -
《非哥SAS编程》在任意位置插入一行数据
2020-04-18 20:22:09在SAS中如何在任意位置插入一行数据呢? 上代码: data test_data; set s; /*output;*/ if _n_ = 8 then do; do i=1 to 3; call missing(of x1-x46); x1='飞哥'; x2='男'; /*output;*/ end; ... -
java,表格,增加行.doc
2021-02-26 20:14:23java,表格,增加行java,表格,增加行篇一:jsp表格增加行//增加行function addRow(){//添加一行var mainTable = document.getElementById(yourtable);var newTr = mainTable.insertRow();var newTd0 = newTr.... -
使用POI往EXCEL中插入行
2021-02-28 18:35:47部分代码如下(POI的版本为3.2)public void insertRow() throws IOException {POIFSFileSystem fs = new POIFSFileSystem(new FileInputStream("workbook.xls"));HSSFWorkbook wb = new HSSFWorkbook(fs);...