从变量设置动态javascript函数名称

Question

我创建了一个动态表。 我有一个具有 onchange 属性的 td 。 所以每一行都有这个带有 onchange 函数的 td。

我有一组变量，如 call_function_1、call_function_2、call_function_3 等。

 var arrHead = new Array(); arrHead = ['', 'Title', 'Title2', 'Title3']; function createTable() { var empTable = document.createElement('table'); empTable.setAttribute('id', 'empTable'); var tr = empTable.insertRow(-1); for (var h = 0; h < arrHead.length; h++) { var th = document.createElement('th'); th.innerHTML = arrHead[h]; tr.appendChild(th); } var div = document.getElementById('cont'); div.appendChild(empTable); } function addRow() { var empTab = document.getElementById('empTable'); var rowCnt = empTab.rows.length; var tr = empTab.insertRow(rowCnt); tr = empTab.insertRow(rowCnt); if (rowCnt == 1) { var tempRow = rowCnt; } else if (rowCnt == 3) { var tempRow = +rowCnt - +1; } else if (rowCnt == 5) { var tempRow = +rowCnt - +2; } else if (rowCnt == 7) { var tempRow = +rowCnt - +3; } else if (rowCnt == 9) { var tempRow = +rowCnt - +4; } var call_function = "call_function"+ tempRow; var call_function = window[call_function]; for (var c = 0; c < arrHead.length; c++) { var td = document.createElement('td'); td = tr.insertCell(c); if (c == 0) { var button = document.createElement('input'); button.setAttribute('type', 'button'); button.setAttribute('value', 'Remove'); button.setAttribute('onclick', 'removeRow(this)'); td.appendChild(button); } else if (c == 1) { var ele = document.createElement('input'); ele.setAttribute('type', 'text'); ele.setAttribute('value', ''); td.appendChild(ele); } else if (c == 2) { var ele = document.createElement('input'); ele.setAttribute('type', 'text'); ele.setAttribute('value', ''); td.appendChild(ele); } else if (c == 3) { var DTab = document.createElement('input'); DTab.setAttribute('type', 'text'); DTab.setAttribute('value', ''); DTab.setAttribute('name', 'school'); DTab.setAttribute('id', 'school'); DTab.addEventListener('change', function (event) { call_function(event.target.value) }.bind(call_function) ); td.appendChild(DTab); } } } function removeRow(oButton) { var empTab = document.getElementById('empTable'); empTab.deleteRow(oButton.parentNode.parentNode.rowIndex); } function sumbit() { var myTab = document.getElementById('empTable'); var values = new Array(); for (row = 1; row < myTab.rows.length - 1; row++) { for (c = 0; c < myTab.rows[row].cells.length; c++) { var element = myTab.rows.item(row).cells[c]; if (element.childNodes[0].getAttribute('type') == 'text') { values.push( element.childNodes[0].value ); } } } console.log(values); } function call_function1(val) { var root = document.getElementById("showDiv"); var table = document.createElement('table'); table.className = "mytable"; var tblB = document.createElement('tbody'); table.appendChild(tblB); var rowcnt = val; headerList = ["One", "Two"]; var tr = document.createElement('tr'); for (var j = 0; j < 3; j++) { var th = document.createElement('th'); var text = document.createTextNode(headerList[j]); th.appendChild(text); tr.appendChild(th); } tblB.appendChild(tr); for (var i = 0; i < rowcnt; i++) { var tr = document.createElement('tr'); tblB.appendChild(tr); var td = document.createElement('td'); var curClmn = i+1; //tr.appendChild(td); for (var j = 0; j < 6; j++) { var input = document.createElement("input"); input.type = "text"; if (curClmn >= 1 && j == 0) { input.name = "cellfirst" + curClmn ; input.value = 0; input.id = "cellfirst" + curClmn; } else if (curClmn >= 1 && j == 1) { input.name = "cellsecond" + curClmn; input.value = 0; input.id = "cellsecond" + curClmn ; } const td = document.createElement('td'); td.appendChild(input); tr.appendChild(td); } } root.appendChild(table); } function call_function2(val) { var root = document.getElementById("showDiv"); var table = document.createElement('table'); table.className = "mytable"; var tblB = document.createElement('tbody'); table.appendChild(tblB); var rowcnt = val; headerList = ["One", "Two"]; var tr = document.createElement('tr'); for (var j = 0; j < 3; j++) { var th = document.createElement('th'); var text = document.createTextNode(headerList[j]); th.appendChild(text); tr.appendChild(th); } tblB.appendChild(tr); for (var i = 0; i < rowcnt; i++) { var tr = document.createElement('tr'); tblB.appendChild(tr); var td = document.createElement('td'); var curClmn = i+1; //tr.appendChild(td); for (var j = 0; j < 6; j++) { var input = document.createElement("input"); input.type = "text"; if (curClmn >= 1 && j == 0) { input.name = "cellfirst" + curClmn ; input.value = 0; input.id = "cellfirst" + curClmn; } else if (curClmn >= 1 && j == 1) { input.name = "cellsecond" + curClmn; input.value = 0; input.id = "cellsecond" + curClmn ; } const td = document.createElement('td'); td.appendChild(input); tr.appendChild(td); } } root.appendChild(table); }

 <style> table { width: 30%; font: 13px ; } table, th, td { border: solid 1px #DDD; border-collapse: collapse; padding: 2px 3px; text-align: center; } </style>

 <!DOCTYPE html> <html> <head> <title>Dynamically Add Remove Table Rows in JavaScript</title> </head> <body onload="createTable()"> <p> <input type="button" id="addRow" value="Add New Row" onclick="addRow()" /> </p> <div id="cont"></div> <table class="QTLTable" style="border-color:#d3d3d3;border-width:0px;"> <tr><td colspan="2" style="border:2px;align:center;border-color:#d3d3d3;"> <div id="showDiv" style="visibility:visible" style="border: 1px; height:200px; align: center;" ></div> </td></tr> </table> <p><input type="button" id="bt" value="Sumbit Data" onclick="sumbit()" /></p> </body> </html>

当我使用这个DTab.setAttribute('onchange', '"call_function"(this.value)'); - 我收到错误。

我如何将此变量设置为 td 的 onchange 属性。 如果我只使用一个函数（不使用 "" 引号），我的代码工作正常。

希望我不会混淆。 建议我。 谢谢。

Answer 1

您需要使用事件侦听器而不是属性，因此请更改以下内容：

  DTab.setAttribute('onchange', 'call_function(this.value)');

对此：

  DTab.addEventListener('change', function (event) { call_function(event.target.value) }.bind(call_function) );