我创建了一个动态表。而且我有一个具有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属性。如果我仅使用一个函数（不使用“”引号），则我的代码工作正常。
希望我不会感到困惑。建议我。谢谢。
答案 0 :(得分：1)
您需要使用event listeners而不是属性，因此请进行以下更改：
DTab.setAttribute('onchange', 'call_function(this.value)');
对此：
DTab.addEventListener('change', function (event) { call_function(event.target.value) }.bind(call_function) );