elementui动态添加表格行（javascript 动态添加表格行）

本文目录

• javascript 动态添加表格行
• 动态表单的设计与实现（基于Vue ElementUI）
• html中如何动态添加表格的实例分析
• element ui如何动态渲染表格
• elementUI的table动态生成列
• javascript如何动态加载表格与动态添加表格行_javascript技巧
• 有关在vue中element-ui如何实现在table表格滚动加载方法
• element-ui 动态表头渲染表格

javascript 动态添加表格行

①。html有点错，radio的name相同，id不能相同，
②。如果value的值分别写为0和1，要写进表格的值为男和女的话，那么js中还要在判断下
③。如果要在当勾选了复选框后，“删除选中的行”按钮启用，没打勾就一直禁用的话，那js中还得加点内容。
利用楼上的那位改的：
《script type="text/javascript"》
function buttonDisplay(){
document.getElementById(’del’).disabled=false;
}
function AddAction()
{
var _table=document.getElementById("studentList");
var _tr=_table.insertRow(-1);
var _td=new Array(5);
for(var i=0;i《_td.length;i++)
{
_td=_tr.insertCell(-1);
}
_td.innerHTML="《input type=’checkbox’ name=’ck’ value=’’ onclick=’buttonDisplay()’/》";
_td.innerHTML=_tr.rowIndex;
_td.innerHTML=document.getElementById("studentName").value;
_td.innerHTML=document.getElementById("studentAge").value;
var gender = document.getElementsByName(’studentSex’);
var selectedGenderValue = ’’;
for(var i = 0;i《gender.length;i++){
if(gender.checked){
if(gender.value == 1) {
selectedGenderValue = ’男’;
}else if(gender.value == 0){
selectedGenderValue = ’女’;
}
}
}
_td.innerHTML = selectedGenderValue;
}
function TableDel()
{
var _table=document.getElementById("studentList");
var cks=document.getElementsByName("ck");
for(var i=cks.length-1;i》=0;i--)
{
if(cks.checked){
_table.deleteRow(cks.parentNode.parentNode.rowIndex);
document.getElementById(’del’).disabled="true";
}
}
}
《/script》

动态表单的设计与实现（基于Vue ElementUI）

在xxx信息管理这种业务场景中我认为最常见的操作就是对字段的处理(例如查询、等区域的表单、图表的列名、表格的列名)，而字段恰恰是最为 ’规范的’，它有自己的名称、类型

用对象或者说map这种结构而不用数组是为了可以精准对某个字段进行设置 而数组需要先遍历查找到这个字段再进行设置

可通过 formData 这个外部传入的对象来对数据进行统一的设置与读取

例如有的字段可以查询但不能，我们可以引入一个场景的概念就可以轻易解决这个问题

名称既可以显示又可以与查询而性别只能与查询但不能显示，useScene是使用场景如果字段不支持这个场景那么字段不予显示(可自行实现禁用场景)

重点就在于m_canUse的实现，它用eval取巧的实现了一个场景逻辑字符串转布尔值的一个骚操作

看到这里可能有的朋友会很不解，为什么我要构造一个如此复杂的useScene,直接定义 canUpdate canQuery 这种布尔值变量来指定场景不就行了吗?
实际上需求是非常复杂多变的，场景可以说是无限的甚至是相互交织关联的、我们可能会根据用户的操作动态显示字段的显示隐藏，例如提交后显示提交人、提交时间等字段、撤销了就不予显示

我们可以在用户做某些操作时来动态设置sceneMap的状态来达到控制表单的显示、隐藏、禁用，当状态越复杂时你就越能感觉到它的威力

可以在动态表单内部监听表单的事件(可查阅相关UI库文档)、当表单事件触发时对外传递事件(携带当前操作的字段信息、$event信息或arguments)

有时我们想在任意两个字段之间插入一个非通用的ui组件，我们可以通过具名插槽来实现

这是一个动态表单的简易实现，需要大家结合自身的业务场景去填充各种各样的表单和相关的参数、事件

html中如何动态添加表格的实例分析

这篇文章主要介绍了HTML中表格动态添加的实例代码，需要的的朋友参考下吧
废话不多说了，直接给大家贴代码了，具体代码如下所示：
《html》
《head》《title》Table《/title》《/head》
《body》
《table border="1"》
《thead》
《tr》
《td》First Name《/td》
《td》Last Name《/td》
《td》 《/td》
《/tr》
《thead》
《tbody id="tb"》
《tr id="1st"》
《td》张《/td》
《td》三《/td》
《td》《input type="button" value="Add" onclick="add()"》
《input type="button" value="Del" onclick="del(this)"》《/td》
《/tr》
《/tbody》
《/table》
《/body》
《/html》
《script》
function add() {
var trObj = document.createElement("tr");
trObj.id = new Date().getTime();
trObj.innerHTML = "《td》《input name=’firstName’/》《/td》《td》《input name=’lastName’/》《/td》《td》《input type=’button’ value=’Add’ onclick=’add()’》 《input type=’button’ value=’Del’ onclick=’del(this)’》《/td》";
document.getElementById("tb").appendChild(trObj);
}
function del(obj) {
var trId = obj.parentNode.parentNode.id;
var trObj = document.getElementById(trId);
document.getElementById("tb").removeChild(trObj);
}
《/script》 上面的代码中，首先在body中构造了一个table，为了方便后续的操作，我们给table添加了thead 和 tbody 标签，thead标签标示的是表格头，tbody标签标示的是表格主体。
示例中的表格，共有三列，第一列 first name，第二列 last name，第三列为操作列。
操作列中，包含两个操作，一个是给表格添加行，一个是删除当前行。添加行和删除行的操作分别绑在两个按钮上，点击按钮时，触发相应的添加行/ 删除行 操作。
添加行方法
function add() {
var trObj = document.createElement("tr");
trObj.id = new Date().getTime();
trObj.innerHTML = "《td》《input name=’firstName’/》《/td》《td》《input name=’lastName’/》《/td》《td》《input type=’button’ value=’Add’ onclick=’add()’》 《input type=’button’ value=’Del’ onclick=’del(this)’》《/td》";
document.getElementById("tb").appendChild(trObj);
}第一行，创建tr元素，即创建一个表格行。
第二行，trObj.id = new Date().getTime(); 给改行添加id 属性，并给属性赋值，取当前系统的毫秒数，这个主要是删除的时候需要。
第三行，trObj.innerHTML = "《td》《input name=’firstName’/》《/td》《td》《input name=’lastName’/》《/td》《td》《input type=’button’ value=’Add’ onclick=’add()’》
《input type=’button’ value=’Del’ onclick=’del(this)’》《/td》"; 给表格行赋值，通过innerHTMML属性，设置《tr》标签和《/tr》 标签间的html代码内容，也就是要添加的行内容。
第四行，document.getElementById("tb").appendChild(trObj); 将创建好的表格行添加到表格主体中。
删除行方法
function del(obj) {
var trId = obj.parentNode.parentNode.id;
var trObj = document.getElementById(trId);
document.getElementById("tb").removeChild(trObj);
}删除方法中传递了一个参数，在添加行方法中，我们可以看到删除方法del 中传递了this参数，页面代码中的this指代的是当前的HTML元素，即this所在的《input 》域。
第一行，var trId = obj.parentNode.parentNode.id; 获取当前元素的父节点的父节点的id，即要删除的行的id 。
第二行，var trObj = document.getElementById(trId); 获取要删除的行元素。
第三行，document.getElementById("tb").removeChild(trObj); 在表格主体中删除该行。
瑕疵
上面的代码基本实现了动态给表格增加行和删除行的功能，但是代码还有瑕疵，主要有这么两点：
1 表格在增加行前和增加行后，表格宽度发生变化
增加行前
增加行后
增加行后，表格列变宽了
2 浏览器默认打开的页面中文出现乱码
需要 设置字符编码修改页面编码格式后才能正常显示

element ui如何动态渲染表格

例如：我们表头需要第一层的datetime和data下面的属性
解决办法：
1 《!-- 表格 --》 2 《el-table 3 id="out-table" 4 :data="tabeldata" 5 style="width: 100%;" 6 tooltip-effect="dark" 7 stripe 8 border10 》13 《el-table-column prop="datetime" label="日期" fixed》14 《template slot-scope="scope"》15 《!-- scope.row.datetime表示获取tabeldata下每一行的也就是每一项中datetime的数据 --》16 《span》{{ scope.row.datetime }}《/span》17 《/template》18 《/el-table-column》19 《!-- 详细信息 --》20 《!-- tableHead就是获取的第二层data数据的属性，也就是表头 --》21 《el-table-column22 v-for="(item, index) in tableHead"23 :label="item"24 :key="index"25 》26 《template slot-scope="scope"》27 《!-- scope.row.data }}29 《/template》30 《/el-table-column》31 《/el-table》
其中，日期是固定的每个表都有，所以我们可以直接写；而剩下的表头，是第二层data数据下面的，通过动态渲染
怎么获取第二层data下每一项的属性，也就是头
1 //获取data数据，放入tableData1中 2 $.each(result.data, function (index, element) { 3 tableData1.push(result.data) { 9 header.push(j);10 }11 }

elementUI的table动态生成列

我们将表头和tbody分开

在data里面configHeader和configTable都是我最终想要的数据结构,这里我只是列举一个样式,因为前面3列是写死的props后面的都是动态生成的,所以我取的configTable对数据做处理,然后获取相同的key存放到configHeader里面

数据绑定生成动态列

注意:这里会有一个小问题,因为后台返回的configTable的key里面有中文,那么就相当于是用中文做key,这样并不好会有的数据绑定不上去,我这边后期可以改为英文了,尽管有建议说用symbol处理一下数据,我试过了但是结果并不是很理想,所以开发联调时要记得跟后台说一下数据结构的规范

javascript如何动态加载表格与动态添加表格行_javascript技巧

一、动态加载表格
1.首先在html中为表格的添加位置设置id
即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下

2.在javascript中写添加表格的语句
若在当前html文件中，则写在标签内部，如
代码如下:

document.getElementById("tbl").innerHTML="" //此处添加的表格可根据自己需要创建


若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句
代码如下:
document.getElementById("tbl").innerHTML=""

然后再引入自己的html文件
代码如下:


二、 动态添加表格行
1.首先在html中为表格行的添加位置设置id，此位置必须是内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下
代码如下:


//tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。


*\n
2.在javascript内容中，要先创建行和单元格，再在中添加行，如下

row=document.createElement("tr"); //创建行
td1=document.createElement("tr"); //创建单元格
td1.appendChild(document.createTextNode("content")); //为单元格添加内容
row.appendChild(td1); //将单元格添加到行内
document.getElementById("rows").append(row); //将行添加到中

三、我的小发现（也许别人早知道了、、、）
1. 我自己做了一下测试，html中写
",测试可以添加内容。
3.思考：从上面两个测试似乎可以得出点什么结论，该如何总结还没想好，哪样的标签可以直接通过innerHTML直接添加呢？

有关在vue中element-ui如何实现在table表格滚动加载方法

下面我就为大家分享一篇vue element-ui table表格滚动加载方法，具有很好的参考价值，希望对大家有所帮助。
添加全局注册事件，用来监听滚动事件
window.Vue.directive(’loadmore’, {
bind(el, binding) {
const selectWrap = el.querySelector(’.el-table__body-wrapper’)
selectWrap.addEventListener(’scroll’, function() {
let sign = 100
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrollDistance 《= sign) {
binding.value()
}
})
}
})sign 用于标记位置
直接让scrollDistance === sign 并不能保证每次都会触发，所以用区间表示。后续会处理频繁触发问题。
添加事件
给需要无线加载的表格添加自定义事件，v-loadmore=”loadMore”。在methods中定义触发的事件
loadMore () {
if (this.loadSign) {
this.loadSign = false
this.page++
if (this.page 》 10) {
return
}
setTimeout(() =》 {
this.loadSign = true
}, 1000)
console.log(’到底了’, this.page)
}
}this.loadSign 用于标记page是否继续递增
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何通过Vue.js实现select下拉列表，具体操作如下
如何解决iview 的select下拉框选项错位的问题，具体操作如下
如何解决vue 更改计算属性后select选中值不更改的问题，具体操作如下

element-ui 动态表头渲染表格

在ElementUI官方文档中，描述的动态渲染只是单纯的将已知字段名称的JSON数据通过prop属性填充到页面中，下为官方文档内容

其中，表格的key值都是固定的。但是针对key值不固定的json数据的渲染，官方文档并未给出明确信息。最近在写项目的时候涉及到的一项需求就是把后台请求到的json数据渲染到页面，但key值并不固定，导致不能按照官方文档提出的方式进行直接渲染。

下面实例为如何根据数据数据schema来动态创建表格，其中header和data_list的数据可以通过后台获取，进而实现表格的动态创建