事件函数未正确显示动态表-使用rowindex出现问题

Question

var T_No = "";
  var T_Name = "";
  var T_Mean = "";
  var T_value = "";

  var data_t_info = {
  T1_No: "Row_1",
  T1_T_Name: "8",
  T1_Mean: "089",
  T1_value:"2",
  T2_No: "Row_2",
  T2_T_Name: "90",
  T2_Mean: "78",
  T2_value:"1" 
  }

  var T1_info = [
    {
        "T1_One": "2",
        "T1_Two": "3",
        "T1_Three": "1",
        "T1_Four": "324"            
    },
    {
        "T1_One": "3",
        "T1_Two": "0",
        "T1_Three": "70",
        "T1_Four": "0"
    }
  ]

  var T2_info = [
    {
        "T2_One": "0",
        "T2_Two": "65",
        "T2_Three": "63",
        "T2_Four": "89"
    }
  ]		

  var number_of_t = 2;
  var rowIndex = 0;
  var val ="Edit";

  var myHead = new Array();    	
  myHead = ['T No','Name', 'Mean','Value',''];
  function createTable() {
        var myTable = document.createElement('table');
        myTable.setAttribute('id', 'myTable'); 
        var tr = myTable.insertRow(-1);    
        for (var h = 0; h < myHead.length; h++) {
            var th = document.createElement('th');     
            th.innerHTML = myHead[h];
            tr.appendChild(th);
    }    
        var div = document.getElementById('main_Div');
        div.appendChild(myTable);    
    if (number_of_t !=0 || number_of_t != null) {
      var mytTab = document.getElementById('myTable'); 
      for (var i= 0; i < number_of_t; i++) {
        var rowCnt = mytTab.rows.length;  

        var tr = mytTab.insertRow(rowCnt);  
        var j = i+1;
  if (typeof data_t_info["T"+(j)+"_No"] !== 'undefined') {
   var curT_No = data_t_info["T"+(j)+"_No"];
      } else {
      var curT_No = "-"
       } 
  if (typeof data_t_info["T"+(j)+"_T_Name"] !== 'undefined')         {
  var curT_T_Name = data_t_info["T"+(j)+"_T_Name"];
          } else {
            var curT_T_Name = "-"
          }
  if (typeof data_t_info["T"+(j)+"_Mean"] !== 'undefined') {
            var curT_Mean = data_t_info["T"+(j)+"_Mean"];
          } else {
            var curT_Mean = "-"
          }
          if (typeof data_t_info["T"+(j)+"_value"] !== 'undefined') {
            var curT_value = data_t_info["T"+(j)+"_value"];
          } else {
            var curT_value = "-"
          }
          var T_No = curT_No;
          var T_Name = curT_T_Name
          var T_Mean = curT_Mean;
          var T_value = curT_value;

      if ((val !== "Create") && (val === "Edit")) {
        var create_dyn_table = "create_dyn_table"+ j;
        }
        else {
          var create_dyn_table = "create_dyn_table"+ rowCnt;
        }

        var create_dyn_table = window[create_dyn_table];						
          for (var c = 0; c < myHead.length; c++) {
          var td = document.createElement('td');       
          td = tr.insertCell(c);    
          if (c == 0) {
            var ele = document.createElement('input');
            ele.setAttribute('type', 'text');
             ele.setAttribute('value', T_No);
            ele.setAttribute('name', 't_no');    
            td.appendChild(ele);
          }
          else if (c == 1) {
            var ele = document.createElement('input');
            ele.setAttribute('type', 'text');
            ele.setAttribute('value', T_Name);
            td.appendChild(ele);
          }
          else if (c == 2) {
            var ele = document.createElement('input');
            ele.setAttribute('type', 'text');
             ele.setAttribute('type', 'text');
            ele.setAttribute('value', T_Mean);
            td.appendChild(ele);
          }
          else if (c == 3) {
            var ele = document.createElement('input');
            ele.setAttribute('type', 'text');
             ele.setAttribute('type', 'text');
            ele.setAttribute('value', T_value);

            ele.addEventListener('change', function (event) { create_dyn_table(event.target.value) }.bind(create_dyn_table) );
            td.appendChild(ele);
          }
          else if (c == 4) {         
            var button = document.createElement('input');
            button.setAttribute('type', 'button');
             button.setAttribute('value', 'Remove');

            button.setAttribute('onclick', 'removeRow(this)');

            td.appendChild(button);
          }
        }
      }
    }
  }

    function addRow(val) {
  var val = val;
        var mytraitTab = document.getElementById('myTable');    	
        var rowCnt = mytraitTab.rows.length;    
    var tr = mytraitTab.insertRow(rowCnt);    

    if ((val !== "Create") && (val === "Edit")) {
        var create_dyn_table = "create_dyn_table"+ rowIndex;
        }
        else {
        var create_dyn_table = "create_dyn_table"+ rowCnt;
        }

  var create_dyn_table = window[create_dyn_table];

    var T_No = "Row_"+rowCnt;    		
        for (var c = 0; c < myHead.length; c++) {
            var td = document.createElement('td');       
            td = tr.insertCell(c);    
            if (c == 0) {
                var ele = document.createElement('input');
                ele.setAttribute('type', 'text');
                 ele.setAttribute('value', T_No);
        ele.setAttribute('readonly', true);
        ele.setAttribute('name', 't_no');    
                td.appendChild(ele);
            }
      else if (c == 1) {
                var ele = document.createElement('input');
                ele.setAttribute('type', 'text');
                ele.setAttribute('value', T_Name);
                td.appendChild(ele);
            }
      else if (c == 2) {
                var ele = document.createElement('input');
                ele.setAttribute('type', 'text');
      ele.setAttribute('value', T_Mean);
                td.appendChild(ele);
    }
    else if (c == 3) {
                var ele = document.createElement('input');
                ele.setAttribute('type', 'text');
      ele.setAttribute('value', T_value);
      ele.setAttribute('name', 't_value');
      ele.setAttribute('id', 't_value');

      ele.addEventListener('change', function (event) { create_dyn_table(event.target.value) }.bind(create_dyn_table) );

                td.appendChild(ele);
            }
      else if (c == 4) {         
                var button = document.createElement('input');
                button.setAttribute('type', 'button');
               button.setAttribute('value', 'Remove');

                button.setAttribute('onclick', 'removeRow(this)');

                td.appendChild(button);
            }

        }
    }    


    function removeRow(button) {
        var myTab = document.getElementById('myTable');
        myTab.deleteRow(button.parentNode.parentNode.rowIndex);

        [].slice.call(myTab.rows).map(
             function (item,index) {  
                if (item.firstChild.firstChild.nodeType == 1) {
                    item.firstChild.firstChild.value = "Row_" + index
                };
                return true; 
             });
    }

 
  function create_dyn_table1(val) {
  var curTVal = val;
    var root = document.getElementById("T1_Div");
    var table = document.createElement('table');
    var tblB = document.createElement('tbody');
    table.appendChild(tblB);

    var rowcnt = val;

    headerList = ["Row_1:One", "Two", "Threee", "Four"];

    var tr = document.createElement('tr');			  

     // Header row			   
      for (var j = 0; j < 4; j++) {
      var th = document.createElement('th'); //column
      var text = document.createTextNode(headerList[j]); //cell
      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 curT1Obj = T1_info;

        if ((typeof curT1Obj !== 'undefined') && (curT1Obj !== null)) {
           var T1_One = curT1Obj[i].T1_One;
           var T1_Two = curT1Obj[i].T1_Two;
           var T1_Three = curT1Obj[i].T1_Three;
           var T1_Four = curT1Obj[i].T1_Four;
        }
        else {
          var T1_One ="0";
          var T1_Two = "0";
          var T1_Three = "0";
          var T1_Four = "0";
          }	

        var curClmn = i+1;	
        var rownumber = curClmn;						

        for (var j = 0; j < 4; j++) {
          var input = document.createElement("input");
          input.type = "text";

            if (curClmn >= 1 && j == 0) {
              input.name = "T1_One" + curClmn ;
              input.value = T1_One;
              input.id = "T1_One" + curClmn;
              }
              else if (curClmn >= 1 && j == 1) {
              input.name = "T1_Two" + curClmn;
              input.value = T1_Two;
              input.id = "T1_Two" + curClmn ;
              }
              else if (curClmn >= 1 && j == 2) {
              input.name = "T1_Three" + curClmn ;
              input.value = T1_Three;
              input.id = "T1_Three" + curClmn;
              }
              else if (curClmn >= 1 && j == 3) {
              input.name = "T1_Four" + curClmn;
              input.value = T1_Four;
              input.id = "T1_Four" + curClmn ;
              }							  

          const td = document.createElement('td');
          td.appendChild(input);
          tr.appendChild(td);
        }
        }					  

    root.appendChild(table);
  }

  
  function create_dyn_table2(val) {

  var curTVal = val;

    var root = document.getElementById("T2_Div");
    var table = document.createElement('table');
    var tblB = document.createElement('tbody');
    table.appendChild(tblB);

    var rowcnt = val;

    headerList = ["Row_2:One", "Two", "Threee", "Four"];

    var tr = document.createElement('tr');

      for (var j = 0; j < 4; j++) {
      var th = document.createElement('th'); //column
      var text = document.createTextNode(headerList[j]); //cell
      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 curT2Obj = T2_info;

        if ((typeof curT2Obj !== 'undefined') && (curT2Obj !== null)) {
           var T2_One = curT2Obj[i].T2_One;
           var T2_Two = curT2Obj[i].T2_Two;
           var T2_Three = curT2Obj[i].T2_Three;
           var T2_Four = curT2Obj[i].T2_Four;
        }
        else {
          var T2_One ="0";
          var T2_Two = "0";
          var T2_Three = "0";
          var T2_Four = "0";
          }	

        var curClmn = i+1;	
        var rownumber = curClmn;						

        for (var j = 0; j < 4; j++) {
          var input = document.createElement("input");
          input.type = "text";

            if (curClmn >= 1 && j == 0) {
              input.name = "T2_One" + curClmn ;
              input.value = T2_One;
              input.id = "T2_One" + curClmn;
              }
              else if (curClmn >= 1 && j == 1) {
              input.name = "T2_Two" + curClmn;
              input.value = T2_Two;
              input.id = "T2_Two" + curClmn ;
              }
              else if (curClmn >= 1 && j == 2) {
              input.name = "T2_Three" + curClmn ;
              input.value = T2_Three;
              input.id = "T2_Three" + curClmn;
              }
              else if (curClmn >= 1 && j == 3) {
              input.name = "T2_Four" + curClmn;
              input.value = T2_Four;
              input.id = "T2_Four" + curClmn ;
              }							  

          const td = document.createElement('td');
          td.appendChild(input);
          tr.appendChild(td);
        }
        }					  

    root.appendChild(table);
  }


   function create_dyn_table3(val) {

  var curTVal = val;

    var root = document.getElementById("T3_Div");
    var table = document.createElement('table');
    var tblB = document.createElement('tbody');
    table.appendChild(tblB);

    var rowcnt = val;

    headerList = ["Row_3:One", "Two", "Threee", "Four"];
    var tr = document.createElement('tr');


      for (var j = 0; j < 4; j++) {
      var th = document.createElement('th'); //column
      var text = document.createTextNode(headerList[j]); //cell
      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 curT3Obj = null;

        if ((typeof curT3Obj !== 'undefined') && (curT3Obj !== null)) {
           var T3_One = curT3Obj[i].T3_One;
           var T3_Two = curT3Obj[i].T3_Two;
           var T3_Three = curT3Obj[i].T3_Three;
           var T3_Four = curT3Obj[i].T3_Four;
        }
        else {
          var T3_One ="0";
          var T3_Two = "0";
          var T3_Three = "0";
          var T3_Four = "0";
          }	

        var curClmn = i+1;	
        var rownumber = curClmn;						

        for (var j = 0; j < 4; j++) {
          var input = document.createElement("input");
          input.type = "text";

            if (curClmn >= 1 && j == 0) {
              input.name = "T3_One" + curClmn ;
              input.value = T3_One;
              input.id = "T3_One" + curClmn;
              }
              else if (curClmn >= 1 && j == 1) {
              input.name = "T3_Two" + curClmn;
              input.value = T3_Two;
              input.id = "T3_Two" + curClmn ;
              }
              else if (curClmn >= 1 && j == 2) {
              input.name = "T3_Three" + curClmn ;
              input.value = T3_Three;
              input.id = "T3_Three" + curClmn;
              }
              else if (curClmn >= 1 && j == 3) {
              input.name = "T3_Four" + curClmn;
              input.value = T3_Four;
              input.id = "T3_Four" + curClmn ;
              }							  

          const td = document.createElement('td');
          td.appendChild(input);
          tr.appendChild(td);
        }
        }					  

    root.appendChild(table);
  }

   function create_dyn_table4(val) {

  var curTVal = val;

    var root = document.getElementById("T4_Div");
    var table = document.createElement('table');
    var tblB = document.createElement('tbody');
    table.appendChild(tblB);

    var rowcnt = val;

    headerList = ["Row_4:One", "Two", "Threee", "Four"];

    var tr = document.createElement('tr');

     // Header row			   
      for (var j = 0; j < 4; j++) {
      var th = document.createElement('th'); //column
      var text = document.createTextNode(headerList[j]); //cell
      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 curT4Obj = null;

        if ((typeof curT4Obj !== 'undefined') && (curT4Obj !== null)) {
           var T4_One = curT4Obj[i].T4_One;
           var T4_Two = curT4Obj[i].T4_Two;
           var T4_Three = curT4Obj[i].T4_Three;
           var T4_Four = curT4Obj[i].T4_Four;
        }
        else {
          var T4_One ="0";
          var T4_Two = "0";
          var T4_Three = "0";
          var T4_Four = "0";
          }	

        var curClmn = i+1;	
        var rownumber = curClmn;						

        for (var j = 0; j < 4; j++) {
          var input = document.createElement("input");
          input.type = "text";

            if (curClmn >= 1 && j == 0) {
              input.name = "T4_One" + curClmn ;
              input.value = T4_One;
              input.id = "T4_One" + curClmn;
              }
              else if (curClmn >= 1 && j == 1) {
              input.name = "T4_Two" + curClmn;
              input.value = T4_Two;
              input.id = "T4_Two" + curClmn ;
              }
              else if (curClmn >= 1 && j == 2) {
              input.name = "T4_Three" + curClmn ;
              input.value = T4_Three;
              input.id = "T4_Three" + curClmn;
              }
              else if (curClmn >= 1 && j == 3) {
              input.name = "T4_Four" + curClmn;
              input.value = T4_Four;
              input.id = "T4_Four" + curClmn ;
              }							  

          const td = document.createElement('td');
          td.appendChild(input);
          tr.appendChild(td);
        }
        }					  

    root.appendChild(table);
  }

<body onload="createTable();">
     <input type="button" id="addRow" value="Add New Row" onclick="addRow('Create')" />
        <div id="main_Div"></div>
          <div class="showhide-wrapper" id = "qtlDiv" > 
            <div id="T1_Div"> </div>
            <div id="T2_Div"></div>
            <div id="T3_Div"></div>
            <div id="T4_Div"></div>
            <div id="T5_Div"></div>
          </div>
            <p><input type="button" id="bt" value="Sumbit Data" onclick="submit();" /></p>
            </div>
            </body>

事件功能在“值”列上。 单击“添加新行”->出现新行。然后在“值”列中输入任何数字，例如3-> Row_4 info出现3行 我没有从json文件填充的前3行的rowindex获得适当的事件。 带有正确行的create_dyn_table也应在onload中显示。预先感谢。