我有一个表，我想从用户添加想要的行。我正在谷歌这样看待，而且我找到了鳕鱼，但它没有工作。
这是我的代码
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>
答案 0 :(得分：2)
我试着修复如下;请注意，如果你使用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>
答案 1 :(得分：1)
在第13行，您尝试在cRow中获取select元素，但cRow不包含select元素;它只包含表头。看起来你在第3行（又名allRows[2]）之后。其中也没有select元素，但它包含具有输入字段的表列。
您可能需要考虑从头开始，以标记方式开始。我无法将此代码保存在HTML标记的当前状态中。