установить динамическое имя функции JavaScript из переменной

Question

установить динамическое имя функции JavaScript из переменной

1

У меня создана динамическая таблица. И у меня есть td, у которого есть атрибут onchange. Таким образом, каждая строка имеет этот td с функцией onchange.

У меня есть набор переменных, таких как 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. Мой код отлично работает, если я использую только одну функцию (не используя "quotes").

Надеюсь, я не смущаюсь. Предложи мне. Благодарю.

user3280899 25 окт. 2018, в 13:37

Источник

0

Возможно, посмотрите на: stackoverflow.com/questions/359788/…
T. Dirks 25 окт. 2018, в 11:23
0

упомяните ошибку, которую вы получаете .. также измените код DTab.setAttribute ('onchange', 'call_function (this.value)'); в DTab.setAttribute ('onchange', call_function (this.value)); вызовы функций не должны быть в кавычках
Jayanth 25 окт. 2018, в 11:39
0

Привет @Jayanth - я получаю следующее сообщение об ошибке: dynamic_Table.html: 1 Uncaught ReferenceError: функция call_function не определена в HTMLInputElement.onchange - она не принимает переменную как call_function_1 .... если у меня есть DTab.setAttribute ('onchange ',' call_function_1 (this.value) '); - это работает отлично ... Но мне нужно использовать (DTab.setAttribute ('onchange', 'call_function (this.value)');) динамическую переменную в качестве имени функции.
user3280899 25 окт. 2018, в 11:50

Показать ещё 1 комментарий

Теги:

javascript

1 ответ

Ещё вопросы

Возможно, посмотрите на: stackoverflow.com/questions/359788/…
упомяните ошибку, которую вы получаете .. также измените код DTab.setAttribute ('onchange', 'call_function (this.value)'); в DTab.setAttribute ('onchange', call_function (this.value)); вызовы функций не должны быть в кавычках
Привет @Jayanth - я получаю следующее сообщение об ошибке: dynamic_Table.html: 1 Uncaught ReferenceError: функция call_function не определена в HTMLInputElement.onchange - она не принимает переменную как call_function_1 .... если у меня есть DTab.setAttribute ('onchange ',' call_function_1 (this.value) '); - это работает отлично ... Но мне нужно использовать (DTab.setAttribute ('onchange', 'call_function (this.value)');) динамическую переменную в качестве имени функции.

rafaelcastrocouto · Accepted Answer · 2018-10-25T09-35-00.000Z

1

Лучший ответ

Вам нужно использовать прослушиватели событий вместо атрибутов, поэтому измените это:

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

к этому:

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

rafaelcastrocouto 25 окт. 2018, в 09:35

0

Привет @rafaelcastrocouto - используя приведенный выше код, я не получаю сообщение об ошибке, также он не принимает call_function :-(.
user3280899 25 окт. 2018, в 13:23
0

Мой плохой, я забыл отредактировать имя события onchange чтобы change . Я обновил ответ, плз попробуйте сейчас.
rafaelcastrocouto 25 окт. 2018, в 14:14
0

Не повезло ... получаю эту ошибку - Uncaught TypeError: call_function не является функцией в HTMLInputElement. <Anonymous>
user3280899 25 окт. 2018, в 16:21
0

Извините, я думал, что ваша переменная была глобальной переменной по вашему вопросу, но, похоже, это не так; Поэтому вам нужно привязать свою функцию к событию, чтобы избежать этой ошибки.
rafaelcastrocouto 25 окт. 2018, в 18:22
0

Привет @rafaelcastrocouto - получаю ту же ошибку. Я включил фрагмент кода. Пожалуйста, запустите фрагмент кода, когда у вас появится шанс и вы увидите ошибку. Спасибо большое за вашу помощь.
user3280899 26 окт. 2018, в 06:57
0

Теперь я понимаю это лучше! Вы присваиваете строку переменной call_function . Вместо этого присвойте его функции, которую он сам (да, в JS функции являются значениями). Так что измените это: var call_function = "call_function"+ tempRow; к этому: var call_function = window["call_function"+ tempRow];
rafaelcastrocouto 26 окт. 2018, в 11:59
1

Привет @rafaelcastrocouto - Большое спасибо за ваше время. Мне нужно больше узнать о JavaScript. Хороших выходных.
user3280899 26 окт. 2018, в 15:31

Показать ещё 5 комментариев