I have a table and I want from user add rows which who want. I was looking in google about this way , And I found cods but It dosen’t work.
This is my code
Plz help me where is the problem in It.
<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>
I tried to fix it as below; please note that if you use php, the input name with subscript [] will be automatically assigned an index (hence no need to calculate an index in your javascript and I commented those lines out ).