鍍金池/ 問答/HTML/ js 根據(jù)data動態(tài)生成table表格,每行后面有一個刪除按鈕,這個刪除按鈕怎

js 根據(jù)data動態(tài)生成table表格,每行后面有一個刪除按鈕,這個刪除按鈕怎么綁定事件,并且可以在點擊時獲取當(dāng)前行的索引值?

var tablePlugin = {
  tableDate: [],
  initTable:function(){
    var tableTbody = document.getElementById('tableTbody');
    var tr = this.tableTrModule(this.tableDate);
    console.log(tr);
    tableTbody.innerHTML = tr;
  },
  tableTrModule:function(data){
    var dataLen = data.length;
    var tr = "";
    if (dataLen == 0){
      tr = "<td>暫無內(nèi)容</td>";
    } else{
      for(var i =0;i<data.length;i++){
        tr += "<tr><td>"+data[i].No+"</td><td>"+data[i].name+"</td><td>"+data[i].sex+"</td><td>"+data[i].achievement+"</td><td><input type='button' value='刪除' onclick='deleteRow("+i+")'/></td></tr>"
      }
    }
    return tr;
  },
  addRow:function(){
    console.log('新增')
  },
  deleteRow:function(index){
    console.log(index);
  }
}
回答
編輯回答
愛礙唉

把你的deleteRow方法定義到全局

function deleteRow(index){

console.log(index);

}

2018年5月17日 21:44
編輯回答
懶洋洋
var tablePlugin = {
  tableDate: [],
  initTable:function(){
    var tableTbody = document.getElementById('tableTbody');
    var tr = this.tableTrModule(this.tableDate);
    console.log(tr);
    tableTbody.addEventListener('click', function(e) {
        if (e.target.tagName === 'INPUT') {
            var tr = e.target.parentNode.parentNode
            var index = [...tr.parentNode.childNodes].indexOf(tr)
            console.log(index)
        }
    })
    tableTbody.innerHTML = tr;
  },
  tableTrModule:function(data){
    var dataLen = data.length;
    var tr = "";
    if (dataLen == 0){
      tr = "<td>暫無內(nèi)容</td>";
    } else{
      for(var i =0;i<data.length;i++){
        tr += "<tr><td>"+data[i].No+"</td><td>"+data[i].name+"</td><td>"+data[i].sex+"</td><td>"+data[i].achievement+"</td><td><input type='button' value='刪除'/></td></tr>"
      }
    }
    return tr;
  },
  addRow:function(){
    console.log('新增')
  },
  deleteRow:function(index){
    console.log(index);
  }
}
2018年2月16日 15:51