何のためにループここ

私JavaScriptを使用して間違っていることは、私のHTMLボディの内容です：何のためにループここ

<body> 
<p id="p1"></p> 
<p id="p2"></p> 
<table style="width:100%" id="theTable"> 
<thead id="head"> 
<tr> 
    <th>@id</th> 
    <th>@author</th> 
    <th>@content</th> 
</tr> 
</thead> 
<tbody id="body"> 
<tr > 
    <td><input type="text"></td> 
    <td><input type="text"></td> 
    <td><input type="text"> </td> 
</tr> 
</tbody> 
<tfoot id="foot"></tfoot> 
</table> 
<button onclick="notMyFunction()">+</button> 
<script src="first_js.js"> </script> 
</body>

そして、これは私のJS-コード：

function notMyFunction(){ 
//Access the children of the table 
     var x = document.getElementById("theTable").children; 
//Insert a row  
     var z = x[1].insertRow(0); 
//Access the indexes of the rows 
     var y = x[1].rows.length-1;  
//The number of the cells in the last row        
     var l = x[1].rows[y].cells.length;     
//Test if everything working properly 
//This seems to be the case because y++ with everz click and l=3 for ever   
     document.getElementById("p1").innerHTML=y; 
     document.getElementById("p2").innerHTML=l; 
//create a new <input> for the new-added row 
    var newInput = document.createElemet("input"); 
    newInput.setAttribute('type', 'text'); 
//This loops seems to be incorrect 
    for (var i = 0, m=l; i < m ; i++) { 
     x[1].rows[0].insertCell(i); 
     x[1].rows[0].cells[i].appendChild(newInput); 
    } 
    }

それはどの行がテーブルでなければなりません動的に追加することができます。しかし、createElement-partは、入力セルで新しい行を追加することはできません。何が問題なのか理解できません。

出典

2017-09-01 Subhan Asadli

あなたがループの非標準を持っています。 3つのパラメータだけが必要です：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for – jmargolisvt

@jmargolisvt彼は3つのパラメータしか持っていません。あなたは、最初の音で複数の変数を初期化することができます。 – Barmar

問題は、同じ<input>要素を各セルに追加することです。 appendChild()は要素のコピーを作成せず、新しいセルに追加するだけで、前のセルから削除する必要があります。新しい入力を行うには、ループ内でdocument.createElement()を使用する必要があります。

また、タイプミス（createElemet）もありました。

全コード：

function notMyFunction() { 
 
    //Access the children of the table 
 
    var x = document.getElementById("theTable").children; 
 
    //Insert a row  
 
    var z = x[1].insertRow(0); 
 
    //Access the indexes of the rows 
 
    var y = x[1].rows.length - 1; 
 
    //The number of the cells in the last row        
 
    var l = x[1].rows[y].cells.length; 
 
    //Test if everything working properly 
 
    //This seems to be the case because y++ with everz click and l=3 for ever   
 
    document.getElementById("p1").innerHTML = y; 
 
    document.getElementById("p2").innerHTML = l; 
 
    for (var i = 0, m = l; i < m; i++) { 
 
    //create a new <input> for the new-added row 
 
    var newInput = document.createElement("input"); 
 
    newInput.setAttribute('type', 'text'); 
 
    x[1].rows[0].insertCell(i); 
 
    x[1].rows[0].cells[i].appendChild(newInput); 
 
    } 
 

 
}

<p id="p1"></p> 
 
<p id="p2"></p> 
 
<table style="width:100%" id="theTable"> 
 
    <thead id="head"> 
 
    <tr> 
 
     <th>@id</th> 
 
     <th>@author</th> 
 
     <th>@content</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="body"> 
 
    <tr> 
 
     <td><input type="text"></td> 
 
     <td><input type="text"></td> 
 
     <td><input type="text"> </td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot id="foot"></tfoot> 
 
</table> 
 
<button onclick="notMyFunction()">+</button>

出典

2017-09-01 19:10:22 Barmar

私はあなたの助けに非常に感謝しています、あなたは私を救いました –

答えて

関連する問題