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

Question

我创建了一个动态表。我有一个 td 具有 onchange 属性。所以每一行都有这个带有 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

您需要使用 event listeners而不是属性，所以改变这个:

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

为此:

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