私はjavascriptで行を繰り返すことはできません..詳細はこちら

私はテーブルを持っていて、私はユーザーが望む行を追加します。私はこのようにGoogleで探していた、そして私は大げさを見つけたが、それは働かない。私はjavascriptで行を繰り返すことはできません..詳細はこちら

これは私のコードです

私はどこに問題がありますか？ 13行目で

<html> 
<head> 
<script type="text/JavaScript"> 
       function addRow(r){ 
        var root = r.parentNode;//the root 
        var allRows = root.getElementsByTagName('tr');//the rows' collection 
        var cRow = allRows[0].cloneNode(true)//the clone of the 1st row 
        var cInp = cRow.getElementsByTagName('table');//the inputs' collection of the 1st row 
        for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names) 
       cInp[i].setAttribute('name', cInp[1].getAttribute('name') + '_' + (allRows.length + 1)); 
       } 
       var cSel = cRow.getElementsByTagName('select')[0]; 
        cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));//change the selecet's name 
        root.appendChild(cRow);//appends the cloned row as a new row 
       } 


       function deleteRow(r){ 
       var i=r.parentNode.parentNode.rowIndex; 

       document.getElementById('table2000').deleteRow(1); 
       } 
       </script> 
       </head> 
       <body> 
<table style="width:950px"> 
<tr> 
       <th align="center" rowspan="2">Program</th> 
       <th align="center" colspan="2">Time</th> 
       <th align="center" rowspan="2">Pm/Am</th> 
       <th align="center" rowspan="2">Price</th> 
       <th align="center" rowspan="2">Note</th> 
       <th align="center" rowspan="2">Ration</th> 
       <th align="center"rowspan="2" >Action</th> 
      </tr> 
      <tr> 
       <th>From</th> 
       <th>to</th> 

      </tr> 



<tr> 
<td> 
<select name="program[]" width="200%;"> 

           <OPTION >Option 1</OPTION> 
           <OPTION >Option 2</OPTION> 
           <OPTION >Option 3</OPTION> 
           <OPTION >Option 4</OPTION> 
         </select> 
</td> 
<td> 
        <select name="from[]" width="70" > 
         <option>1 </option> 
         <option>2 </option> 
         <option>3 </option> 
         <option>4 </option> 
         <option>5 </option> 
         <option>6 </option> 
         <option>7 </option> 
         <option>8</option> 
         <option>9</option> 
         <option>10</option> 
         <option>11</option> 
         <option>12</option> 
        </select> 

</td> 
<td> 
        <select name="to[]"> 
         <option>1 </option> 
         <option>2 </option> 
         <option>3 </option> 
         <option>4 </option> 
         <option>5 </option> 
         <option>6 </option> 
         <option>7 </option> 
         <option>8</option> 
         <option>9</option> 
         <option>10</option> 
         <option>11</option> 
         <option>12</option> 
        </select> 

</td> 
<td> 
    <select name="time[]"> 
     <option value="ص">am</option> 
     <option value="م">pm</option> 
    </select> 
</td> 
<td> 
    <input type="text" value="" name="massat[]"> 
</td> 
<td> 
    <input type="text" value="" name="note[]"> 
</td> 
<td>      
    <input type="text" value="" name="rating[]"> 
</td> 
<td> 
<img class="add" src="http://almedinah.net/wp-content/themes/blogitty/images/add-button.png" style=":hover{background:#000;}"onclick="addRow(this.parentNode.parentNode)"> 
<img class="add" src="http://almedinah.net/wp-content/themes/blogitty/images/remove-button.png" style=":hover{background:#000;}"onclick="deleteRow(this)"> 

</td> 

</tr> 
</table> 
       </body></html>

出典

2011-12-18 AboSami

回答を求めないでください。「うまくいきません」という記述は非常に貧弱です。 –

あなたはそれをplzでテストできますか？あなたのコンピュータで – AboSami

私は以下のように修正しようとしました。 phpを使用すると、添字[]付きの入力名は自動的にインデックスに割り当てられます（したがって、JavaScriptのインデックスを計算する必要はなく、これらの行をコメントアウトしました）。

<html> 
<head> 
<script type="text/JavaScript"> 

       function addRow(r){ 
        var root = r.parentNode;//the root 
        var allRows = root.getElementsByTagName('tr');//the rows' collection 
        //var cRow = allRows[0].cloneNode(true)//the clone of the 1st row 
        var cRow = allRows[2].cloneNode(true)//the clone of the 1st row 
        //var cInp = cRow.getElementsByTagName('table');//the inputs' collection of the 1st row 
        /* 
        var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row 
        for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names) 
         //cInp[i].setAttribute('name', cInp[1].getAttribute('name') + '_' + (allRows.length + 1)); 
         cInp[i].setAttribute('name', cInp[i].getAttribute('name')); 
        } 
       //var cSel = cRow.getElementsByTagName('select')[0]; 
       var cSel = cRow.getElementsByTagName('select'); 
       for(var i=0;i<cSel.length;i++){ 
        //cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));//change the selecet's name 
        cSel[i].setAttribute('name',cSel[i].getAttribute('name'));//change the selecet's name 
        } 
        */ 
        root.appendChild(cRow);//appends the cloned row as a new row 
       } 


       function deleteRow(r){ 
       var i=r.parentNode.parentNode.rowIndex; 
        if (i != 2) 
        document.getElementById('table2000').deleteRow(i); 
       } 
       </script> 
       </head> 
       <body> 
<table style="width:950px" border="2" id="table2000"> 
<tr> 
       <th align="center" rowspan="2">Program</th> 
       <th align="center" colspan="2">Time</th> 
       <th align="center" rowspan="2">Pm/Am</th> 
       <th align="center" rowspan="2">Price</th> 
       <th align="center" rowspan="2">Note</th> 
       <th align="center" rowspan="2">Ration</th> 
       <th align="center"rowspan="2" >Action</th> 
      </tr> 
      <tr> 
       <th>From</th> 
       <th>to</th> 

      </tr> 



<tr> 
<td> 
<select name="program[]" width="200%;"> 

           <OPTION >Option 1</OPTION> 
           <OPTION >Option 2</OPTION> 
           <OPTION >Option 3</OPTION> 
           <OPTION >Option 4</OPTION> 
         </select> 
</td> 
<td> 
        <select name="from[]" width="70" > 
         <option>1 </option> 
         <option>2 </option> 
         <option>3 </option> 
         <option>4 </option> 
         <option>5 </option> 
         <option>6 </option> 
         <option>7 </option> 
         <option>8</option> 
         <option>9</option> 
         <option>10</option> 
         <option>11</option> 
         <option>12</option> 
        </select> 

</td> 
<td> 
        <select name="to[]"> 
         <option>1 </option> 
         <option>2 </option> 
         <option>3 </option> 
         <option>4 </option> 
         <option>5 </option> 
         <option>6 </option> 
         <option>7 </option> 
         <option>8</option> 
         <option>9</option> 
         <option>10</option> 
         <option>11</option> 
         <option>12</option> 
        </select> 

</td> 
<td> 
    <select name="time[]"> 
     <option value="?">am</option> 
     <option value="?">pm</option> 
    </select> 
</td> 
<td> 
    <input type="text" value="" name="massat[]"> 
</td> 
<td> 
    <input type="text" value="" name="note[]"> 
</td> 
<td>      
    <input type="text" value="" name="rating[]"> 
</td> 
<td> 
<img class="add" src="http://almedinah.net/wp-content/themes/blogitty/images/add-button.png" style=":hover{background:#000;}"onclick="addRow(this.parentNode.parentNode)"> 
<img class="add" src="http://almedinah.net/wp-content/themes/blogitty/images/remove-button.png" style=":hover{background:#000;}"onclick="deleteRow(this)"> 

</td> 

</tr> 
</table> 
</body></html>

出典

2011-12-18 18:47:22

ありがとうございますMr.dan_ – AboSami

ありがとう、ありがとう非常にありがとう^ _^ – AboSami

しかし、私は4番目の行をクリックしたが新しい行をクリックしていくつかの問題があると思う。常に最初の行からクローンを取得してください。 – Pranav

、あなたはカラスでselect要素を取得しようとしているが、カラスはselect要素が含まれていません。テーブルヘッダーのみが含まれています。テーブルの行3（別名allRows[2]）の後ろにいるようです。どちらにもselect要素はありませんが、入力フィールドを持つテーブル列が含まれています。

マークアップを最初からやり直すことをおすすめします。このコードをHTMLマークアップの現在の状態に保存できませんでした。

出典

2011-12-18 18:33:23

非常にmcuhジェフリースウィーニーありがとうございます – AboSami

私はjavascriptで行を繰り返すことはできません..詳細はこちら

答えて

関連する問題