desc: 'cc',
value: 'dd',
defVal: 'ee'
}, {
name: 'aa1',
xpath: 'bb1',
desc: 'cc1',
value: 'dd1',
defVal: 'ee1'
}]
4 具体方法：
deleteRow(index, rows) {//移除一行
rows.splice(index, 1);//删掉该行
},
addRow(tableData,event){//新增一行
//之前一直想不到怎么新增一行空数据，最后幸亏一位朋友提示：表格新增一行，其实就是源数据的新增，从源数据入手就可以实现了，于是 恍然大悟啊！
tableData.push({ name: '', xpath: '',desc:'',value:'',defVal:'' })
},tableDbEdit(row, column, cell, event) {//编辑单元格数据
//当鼠标双击单元格里面具体单元格的时候，即可对数据进行编辑操作，其实就是添加了一个输入框，最终将输入框中的数据保存下来就行了。
event.target.innerHTML = "";
let cellInput = document.createElement("input");
cellInput.value = "";
cellInput.setAttribute("type", "text");
cellInput.style.width = "60%";
cell.appendChild(cellInput);
cellInput.onblur = function() {
cell.removeChild(cellInput);
event.target.innerHTML = cellInput.value;
};
}
效果如下
————————分割线———————–
之前实现的都是input框的方式，昨天又做了个优化，增加了下拉框的方式，并且新增了提交表单时，能够将数据传到后端的功能。
首先我们知道，select标签的格式，比较特殊，没有input那么直接，每次只需要修改，展示它本身的value属性的值就OK了，select的标签格式如下：
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>那么， 我的修改之后的编辑方法如下：
tableDbEdit(row, column, cell, event) {
event.target.innerHTML = "";
let cellInput = '';
let name = column.property.trim();//拿到当前的属性值
//新建一个option元素
let option = document.createElement('option')
let option2 = document.createElement('option')
if(name==="fildtp"){
cellInput = document.createElement("select");
//为option赋值和内容
option.value="1";
option.text="字符";
option2.value="2";
option2.text="数字";
//将option元素直接添加为子元素
cellInput.appendChild(option);
cellInput.appendChild(option2);
cell.appendChild(cellInput);
cellInput.onblur = function() {
cell.removeChild(cellInput);
//将单元格的内容填充为所选中元素的内容，而不是值
