JS操作表格常用操作及事件委派

版权声明：本文为博主原创文章，转载请标明出处和链接！ https://blog.csdn.net/junmoxi/article/details/84892314

JS操作表格常用操作及事件委派

1. 点击添加一行表格

function addRow() {
     // 获取当前有多少行(查找第一列序号值)
     last_num = $("#myTabletr:last-child").children("td").find("input").val();
     if (last_num == null) {
         last_num = 1;
     }
     else {
         last_num = parseInt(last_num);
         last_num += 1;
     }
     // 获取表格对象
     let table = document.getElementById("myTable");
     // 插入一行
     let row = table.insertRow();
     // 插入四列
     let cell0 = row.insertCell();//序号
     let cell1= row.insertCell(); //名称
     let cell2 = row.insertCell();//年龄
     let cell3 = row.insertCell();//操作
     // 插入列的内容
     cell0.innerHTML = '<input readonly="true" value='+ last_num +'>';
     cell1.innerHTML = '<input name="username"placeholder="输名称">';
     cell2.innerHTML = '<input name="age" placeholder="输入年龄">';
     cell3.innerHTML = '<a class="btn-link deleteRowInfo">删除</a>';
 }

2. 删除一行

 $(document).on('click','.deleteRowInfo',function() {
   // 获取当前点击的哪一行
   let currentTrIndex = $(this).parent().parent().index();
   // 获取表格对象
   let table = document.getElementById("myTable");
   // 删除行
   table.deleteRow(index);
   // 更新序号
   $("#myTable").find("tr").each(function(index,item){
      let tdArr = $(this).children();
      tdArr.eq(0).find("input").val(index + 1);
   });
});

3. 获取表格中的值转为JSON字符串

 function getData() {
    let data = [];
    $("#myTable").find("tr").each(function (i) {
        data[i] = new Object();
        data[i].username= $(this).find("input[name='username']").val()
        data[i].age= $(this).find("input[name='age']").val()
    });
    // 转为json字符串
    let strData = JSON.stringify(data);
    return strData;
}

4. 添加一列

姓名	派大星	海绵宝宝
年龄	22	25

 $(".addBtn").click(function () {
   // 获取模态框中输入值
   let username= $(".username").val();
   let age= $(".age").val();
   // 第一行添加一列
   $("#usernameTr").append('<td>'+username+'<i class="icon-delete deleteCellInfo hidden"></i></td>');
   // 第二行添加一列
   $("#ageTr").append('<td>'+age+'</td>');
});

5. 删除一列

// 当鼠标移动到每一列时会有个删除按钮显示，点击这个删除按钮，删除此列
 $(document).on('click','.deleteCellInfo',function() {
     // 获取当前点击的是第几列
     var currentCell =$("#usernameTr td i").index(this) + 1;
     // 获取表格对象
     let table=document.getElementById("myTable");
     // 删除第一行中此列
     table.rows[0].deleteCell(currentCell);
     // 删除第二行中此列
     table.rows[1].deleteCell(currentCell);
 });

6. 事件委派

因为是动态添加的表格，所以没办法直接为新添加的元素添加事件监听，这个时候就需要用到了事件委派。其实也就是为页面渲染完成后添加的新元素加上事件。

上面新添加列，我们为每一个新添加的列都添加一个鼠标移入移出事件，当鼠标移入到此列上时将删除图标显示出来。

jQuery写法：使用delegate

// 鼠标移入时将删除hidden属性将删除图标显示出来
$('#usernameTr').delegate('td', 'mouseover', function(ev){
     $(this).find("i").removeClass("hidden");
 });
 // 鼠标移出时将删除图标隐藏
 $('#usernameTr').delegate('td', 'mouseout', function(ev){
     $(this).find("i").addClass("hidden");
 });