我不能重複通過JavaScript的行..細節在這裏

我有一個表，我想從用戶添加行誰想要的。我一直在尋找谷歌這種方式，我發現鱈魚，但它不工作。我不能重複通過JavaScript的行..細節在這裏

這是我的代碼

Plz幫助我在哪裏它的問題。

<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

請不要求答案。「不起作用」是一個極其糟糕的描述。 – 2011-12-18 18:11:26

你可以測試它PLZ。在你的電腦上 – AboSami 2011-12-18 18:28:57

我試圖修復它，如下所示;請注意，如果您使用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

非常感謝你先生dan_ – AboSami 2011-12-18 19:07:41

它的作品，非常感謝你^ _^ – AboSami 2011-12-18 19:07:53

但我認爲有一些問題。假設用戶點擊第4行但新行將會從始終第一行克隆。 – Pranav 2011-12-19 11:15:23

第13行，你試圖得到烏鴉select元素，但烏鴉不包含選擇元素;它只包含表頭。它看起來像是在表格第3行之後（又名allRows[2]）。那裏也沒有選擇元素，但它包含具有輸入字段的表列。

您可能需要考慮從頭開始，標記明智。我無法將此代碼保存在HTML標記的當前狀態中。

來源

2011-12-18 18:33:23

非常感謝你Jeffrey Sweeny – AboSami 2011-12-18 19:08:11

我不能重複通過JavaScript的行..細節在這裏

回答

相關問題