原生js操作table表格增删改查操作汇总_js实现表格的增删改查

js操作表格

 <table id="data-table" class="table table-striped table-bordered table-hover table-nowrap">
            <thead>
                <tr>
                    <th class="control-label col-xs-12 col-sm-2" style="text-align: center">序号</th>
                    <th class="control-label col-xs-12 col-sm-2" style="text-align: center">vlan_id</th>
                    <th class="control-label col-xs-12 col-sm-2" style="text-align: center">账号</th>
                    <th class="control-label col-xs-12 col-sm-2" style="text-align: center">MAC地址</th>
                    <th class="control-label col-xs-12 col-sm-2" style="text-align: center">密码</th>
                    <th class="control-label col-xs-12 col-sm-2" style="text-align: center">删除</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1、获取表格

 var table = document.querySelector('#data-table tbody');
1

2、获取行(点击行内的按钮,根据点击事件)

let currentRow = event.currentTarget.parentNode.parentNode
1

3、获取行(根据表格获取)

//获取最后一行
var lastRow = table.rows[table.rows.length - 1];
// 获取倒数第二行
var secondLastRow = lastRow.previousElementSibling; 
//获取第n行[0 - (row.length-1)]
var row = table.rows[n]
//获取所有行
var table = document.querySelector('#data-table tbody');
var rowList = table.getElementsByTagName("tr");
1
2
3
4
5
6
7
8
9

4、获取所有列

//第一种 根据标签选择器
let cells = currentRow.getElementsByTagName("td");
//第二种 根据table的方法
const cells = row.cells
1
2
3
4

5、获取每个cell的内容

  const table = document.getElementById('data-table')
       const rowList=table.getElementsByTagName('tr')
       let str=''
       for(let i=1;i<rowList.length-1;i++){
          const row = rowList[i]
          console.log(row)
          const cells = row.cells
          
          for(let j=2;j<cells.length-1;j++){
              console.log(cells[j].innerText)
              str+=cells[j].innerText
              str+=" "
          }
          str += "\n"
          
            console.log('str=',str)
       }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

6、清空表格

// 清空表格
    while (table.rows.length > 0) {
      table.deleteRow(0);
    }
1
2
3
4

7、创建新的表格行（按列插入）

  // 创建新的表格行
  var newRow = table.insertRow();
 // 将数据插入到新行的单元格中
  var cell1 = newRow.insertCell(0);
  cell1.innerHTML = data[i].name;

  var cell2 = newRow.insertCell(1);
  cell2.innerHTML = data[i].age;
1
2
3
4
5
6
7
8

8、插入数据

第一种 直接插入代码(按行插入)

         var newRow = '<tr><td class="control-label col-xs-12 col-sm-2" style="text-align: center" id="editNumber">'+ 0 +'</td>' +
                    '<td class="editVlanId control-label col-xs-12 col-sm-2" style="text-align: center" id="editVlanId">'+ 0 +'</td>' +
                    '<td class="editAccount control-label col-xs-12 col-sm-2" style="text-align: center" id="editAccount">' + phone +'</td>'+
                    '<td class="editMac control-label col-xs-12 col-sm-2" style="text-align: center" id="editMac">'+adress+'</td>'+
                    '<td class="editPassword control-label col-xs-12 col-sm-2" style="text-align: center" id="editPassword">'+password+'</td>'+
                    '<td class="editOperate control-label col-xs-12 col-sm-2" style="text-align: center" id="editOperate"><span class="update" οnclick="update()">修改</span>&nbsp;&nbsp;&nbsp;<span class="delete" οnclick="deleteRow()">删除</span></td></tr>'
		if(secondLastRow){
            secondLastRow.insertAdjacentHTML('afterend', newRow);
        }else{
            lastRow.insertAdjacentHTML('beforebegin', newRow);
        }
1
2
3
4
5
6
7
8
9
10
11

第二种 按cell插入数据

 // 清空表格
                    for(let i=1;i<table.rows.length-1;i++){
                        table.deleteRow(i);
                    }
                    if(dataArr.length>0){
                        for(let i=0;i<dataArr.length;i++){
                            //新建一行
                            var row = table.insertRow(i+1);
                            //将数据放到cell里
                            let cell0 = row.insertCell(0)
                            cell0.innerText=i+1
                            
                            let cell1 = row.insertCell(1)
                            cell1.innerText='0'
                           
                             let cell2 = row.insertCell(2)
                            cell2.innerText=dataArr[i][0]
                            
                            let cell4 = row.insertCell(3)
                            cell4.innerText=dataArr[i][2]
                            
                             let cell3 = row.insertCell(4)
                            cell3.innerText=dataArr[i][1]
                            
                            let cell5 = row.insertCell(5)
                            cell5.innerHTML='<span class="update" οnclick="update()">修改</span>&nbsp;&nbsp;&nbsp;<span class="delete" οnclick="deleteRow()">删除</span>'
                             
                            
                        }
                    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

插入到倒数第二行(根据table.rows的值)

// 获取表格元素
var table = document.getElementById('myTable');

// 获取倒数第二行的位置
var targetIndex = table.rows.length - 1;

// 遍历数据数组
for (var i = 0; i < data.length; i++) {
  // 创建新的表格行
  var newRow = table.insertRow(targetIndex);

  // 将数据插入到新行的单元格中
  var cell1 = newRow.insertCell(0);
  cell1.innerHTML = data[i].name;

  var cell2 = newRow.insertCell(1);
  cell2.innerHTML = data[i].age;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

9、更新表格行数据

 function update(e){
        if(editingRow != ''){
            alert('当前已有行在编辑！')
            return
        }
        
        const trNow = event.currentTarget.parentNode.parentNode
        editingRow=trNow
       
       const editNumber = trNow.querySelector('.editNumber')
        const editVlanId = trNow.querySelector('.editVlanId')
        const editAccount = trNow.querySelector('.editAccount')
        const editMac = trNow.querySelector('.editMac')
        const editPassword = trNow.querySelector('.editPassword')
        const editOperate = trNow.querySelector('.editOperate')
        
         trNow.innerHTML='<td class="control-label col-xs-12 col-sm-2" style="text-align: center" id="editNumber">'+ (editNumber?.innerText || 0) +'</td>' +
                    '<td class="editVlanId control-label col-xs-12 col-sm-2" style="text-align: center" id="editVlanId"><input value=' + (editVlanId?.innerText || "undefined") + '></td>' +
                    '<td class="editAccount control-label col-xs-12 col-sm-2" style="text-align: center" id="editAccount"><input value=' + (editAccount?.innerText || "undefined") + '></td>'+
                    '<td class="editMac control-label col-xs-12 col-sm-2" style="text-align: center" id="editMac"><input value=' + (editMac?.innerText || "undefined") + '></td>'+
                    '<td class="editPassword control-label col-xs-12 col-sm-2" style="text-align: center" id="editPassword"><input value=' + (editPassword?.innerText || "undefined")+ '></td>'+
                    '<td class="editOperate control-label col-xs-12 col-sm-2" style="text-align: center" id="editOperate"><span class="saveRow" οnclick="saveRow()">保存</span></td>'
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

10、删除表格行

//获取要删除的行
var currentRow = event.target.closest("tr");
 currentRow.remove();
1
2
3