JS代码，用于动态地将行添加到表中 [英] JS code to add rows dynamically in to the table
问题描述
现在iam尝试在点击ADD ROW时动态地将行添加到表格中按钮。它还应该有删除所选行的选项。所以请帮我找代码....
还请告诉我如何将textarea和radiobutton添加到动态创建的行中..
这是我的代码;
[HTML]< html>
< head>
< title> Untitled Document< / title>
< script language =" JavaScript">
function addRow1（id）{
var tbody = document.getElementById
（id）.getElementsByTagName（" TBODY"）[0];
var row = document.createElement（" TR"）
var td1 = document.createElement（" TD"）
var chkbox = document.createElement（' 'input''）;
chkbox.type =''Checkbox'';
td1.align =" center";
td1 .height =" 39px";
td1.appendChild（chkbox）;
var td2 = document.createElement（" TD" ）
var newTextBox = document.createElem ent（''input''）;
newTextBox.type =''text'';
newTextBox.size =" 2" ;
td2.align =" center" ;;
td2.appendChild（newTextBox）
var td3 = document.createElement（" TD"）
var newTextBox = document .createElement（''input''）;
newTextBox.type =''text'';
newTextBox.size =" 2" ;
td3.align =" center" ;;
td3.appendChild（newTextBox）
var td4 = document.createElement（" TD"）
var newTextBox = document.createElement（''input''）;
newTextBox.type =''text'';
newTextBox.size =" 2" ;
td4.align =" center" ;;
td4.appendChild（newTextBox）
var td5 = document.createElement（" TD"）
var newTextBox = document .createElement（''input''）;
newTextBox.type =''text'';
newTextBox.size =" 2";
td5.align =" center" ;;
td5.appendChild（newTextBox）
var td6 = document.createElement（" TD"）
var newTextBox = document .createElement（''input''）;
newTextBox.type =''text'';
newTextBox.size =" 7" ;
td6.align =" center" ;;
td6.appendChild（newTextBox）
var td8 = document.createElement（" TD"）
var newRadio = document .createElement（''< input name =" mmmkk" value =" Yes" type =" radio" id =" yes">''）;
newRadio.type = ''radio'';
var btn = document.createElement（''input''）;
btn.type =''submit'';
btn.value =''编辑'';
newRadio.value =''y'';
newRadio.name =" YES"
var newRadio1 = document.createElement（''< input name =" mmmkk" value =" No" type =" radio" id = " yes">''）;
newRadio1.type =''radio'';
newRadio1.value =''y'';
td8.align =" center" ;;
td8.appendChild（newRadio）;
td8.appendChild（newRadio1）;
td8.appendChild（btn）;
var td7 = document.createElement（" TD"）;
var newTextBox = document.createElement（''input''）;
newTextBox.type =''text'';
newTextBox.size =" 4" ;
td7.align =" center" ;;
td7.appendChild（newTextBox）
var td9 = document.createElement（" TD"）
var newTextBox = document .createElement（''input''）;
newTextBox.type =''textarea'';
newTextBox.TextMode =''MultiLine'';
td9.align =" center" ;;
td9.appendChild（newTextBox）
var td10 = document.createElement（" TD"）
var newTextBox = document.createElement（''input''）;
newTextBox.type =''text'';
newTextBox.textmode =''MultiLine'';
td10.align =" center";
newTextBox.rows =" 15";
td10.appendChild（newTextBox）
row.appendChild（td1）;
row.appendChild（td2）;
row.appendChild（td3）;
row.appendChild（td4）;
row.appendChild（td5）;
row.appendChild（td6）;
row.appendChild（td7）;
row.appendChild（td8）;
row.appendChild（td9）;
row.appendChild（td10 ）;
tbody.appendChild（row）;
}
< / script>
< / head>
< body>
< table> ;
< tr>
< td>
< table id =" myTable"边界=" 2px的" CELLPADDING = QUOT; 0像素" CELLSPACING = QUOT; 0像素"
width =" 100％">
< tbody>
< tr>
< td align =" center" VALIGN = QUOT;顶" width =" 7％">选择
< / td>
< td align =" center" VALIGN = QUOT;顶" width =" 10％">数量
< / td>
< td align =" center" VALIGN = QUOT;顶" width =" 8％">长度
< / td>
< td align =" center" VALIGN = QUOT;顶" width =" 7％">宽度
< / td>
< td align =" center" VALIGN = QUOT;顶" width =" 8％">高度
< / td>
< td align =" center" VALIGN = QUOT;顶" width =" 14％">总计< br />
计量
< / td>
< td align =" center" VALIGN = QUOT;顶" width =" 10％">总< br />
重量
< / td>
< td width =" 8％" > hgjhgj
< / td>
< td align =" center" VALIGN = QUOT;顶" width =" 14％">套餐和
货物说明
< / td>
< td align =" center" VALIGN = QUOT;顶" width =" 14％">评论
< / td>
< / tr>
< tr>
< td align =" center" width =" 7％">
< input name =""类型= QUOT;复选框"值= QUOT;" /> < / td>
< td align =" center" width =" 10％">
< input name =""类型= QUOT;文本"大小= QUOT; 2英寸/> < / td>
< td align =" center" width =" 8％">
< input name =""类型= QUOT;文本"大小= QUOT; 2英寸/> < / td>
< td align =" center" width =" 7％">
< input name =""类型= QUOT;文本"大小= QUOT; 2英寸/> < / td>
< td align =" center" width =" 8％">
< input name =""类型= QUOT;文本"大小= QUOT; 2英寸/> < / td>
< td align =" center" width =" 14％">
< input name =""类型= QUOT;文本"大小= QUOT; 7英寸; /> < / td>
< td align =" center" width =" 10％">
< input name =""类型= QUOT;文本"大小= QUOT; 4英寸/>
< td width =" 8％" >
< input type =" radio"名称= QUOT拉德"值= QUOT;" id ="">是
< input type =" radio"名称= QUOT拉德"值= QUOT;" id ="">否
< input type =" submit"命名= [提交" value =" Edit">
< / td>
< td align =" center" width =" 14％">
< textarea cols =" 15">< / textarea> < / td>
< td align =" center"宽度= QUOT; 14％">
< textarea name ="" cols =" 15">< / textarea>
< / td>
< / tr>
< / tbody>
< / table>
< / td>
< / tr>
< tr>
< td align =" right">
< h3>< br />
< input type =" button" value =" Add Row"
onclick =" addRow1（''myTable''）" />
< input name =""类型= QUOT按钮" value ="删除选定的
Rows" />
< input name =""类型= QUOT按钮"值= [提交" />
< / h3>
< / td>
< / tr>
< / table>
< / body>
< / html>
[/ HTML ]
谢谢你，
等你的答案..
Bharath Kumar S
那会发生什么？它有用吗？有什么错误吗？如果是这样，它是什么，在什么线上？
@bharathmngl
还请告诉我如何动态添加textarea和radiobutton创建行..
通过DOM方法创建它们或者只是将textarea html提供给innerHTML字段。
Rest我太不愿意阅读整个代码。
那么会发生什么？它有用吗？有什么错误吗？如果是这样，它是什么，在什么线上？
嘿，我从其他来源获得此代码..所以，如果你有，我发布工作代码，我迫切需要它.......
now iam trying to add rows dynamically into the table when i click "ADD ROW" button. It should also have the option to delete the selected row. So Please help me to find code....
And also please tell me how to add textarea and radiobutton in to the dynamically created rows..
Here is my code;
[HTML]<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript">
function addRow1(id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
var chkbox = document.createElement(''input'');
chkbox.type=''Checkbox'';
td1.align="center";
td1.height="39px";
td1.appendChild( chkbox);
var td2 = document.createElement("TD")
var newTextBox = document.createElement(''input'');
newTextBox.type = ''text'';
newTextBox.size="2" ;
td2.align="center";
td2.appendChild (newTextBox)
var td3 = document.createElement("TD")
var newTextBox = document.createElement(''input'');
newTextBox.type = ''text'';
newTextBox.size="2" ;
td3.align="center";
td3.appendChild (newTextBox)
var td4 = document.createElement("TD")
var newTextBox = document.createElement(''input'');
newTextBox.type = ''text'';
newTextBox.size="2" ;
td4.align="center";
td4.appendChild (newTextBox)
var td5 = document.createElement("TD")
var newTextBox = document.createElement(''input'');
newTextBox.type = ''text'';
newTextBox.size="2";
td5.align="center";
td5.appendChild (newTextBox)
var td6 = document.createElement("TD")
var newTextBox = document.createElement(''input'');
newTextBox.type = ''text'';
newTextBox.size="7" ;
td6.align="center";
td6.appendChild (newTextBox)
var td8 = document.createElement("TD")
var newRadio = document.createElement(''<input name="mmmkk" value="Yes" type="radio" id="yes">'');
newRadio.type = ''radio'';
var btn=document.createElement(''input'');
btn.type=''submit'';
btn.value=''Edit'';
newRadio.value=''y'';
newRadio.name="YES"
var newRadio1 = document.createElement(''<input name="mmmkk" value="No" type="radio" id="yes">'');
newRadio1.type = ''radio'';
newRadio1.value=''y'';
td8.align="center";
td8.appendChild (newRadio);
td8.appendChild (newRadio1);
td8.appendChild(btn);
var td7 = document.createElement("TD");
var newTextBox = document.createElement(''input'');
newTextBox.type = ''text'';
newTextBox.size="4" ;
td7.align="center";
td7.appendChild (newTextBox)
var td9 = document.createElement("TD")
var newTextBox = document.createElement(''input'');
newTextBox.type = ''textarea'';
newTextBox.TextMode=''MultiLine'';
td9.align="center";
td9.appendChild (newTextBox)
var td10 = document.createElement("TD")
var newTextBox = document.createElement(''input'');
newTextBox.type = ''text'';
newTextBox.textmode=''MultiLine'';
td10.align="center";
newTextBox.rows="15";
td10.appendChild (newTextBox)
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
row.appendChild(td7);
row.appendChild(td8);
row.appendChild(td9);
row.appendChild(td10);
tbody.appendChild(row);
}
</script>
</head>
<body >
<table>
<tr>
<td>
<table id="myTable" border="2px" cellpadding="0px" cellspacing="0px"
width="100%">
<tbody>
<tr>
<td align="center" valign="top" width="7%">Select
</td>
<td align="center" valign="top" width="10%">Quantity
</td>
<td align="center" valign="top" width="8%">Length
</td>
<td align="center" valign="top" width="7%">Width
</td>
<td align="center" valign="top" width="8%">Height
</td>
<td align="center" valign="top" width="14%">Total <br/>
Measurement
</td>
<td align="center" valign="top" width="10%">Total<br/>
Weight
</td>
<td width="8%" > hgjhgj
</td>
<td align="center" valign="top" width="14%">Package and
Description of Cargo
</td>
<td align="center" valign="top" width="14%">Comments
</td>
</tr>
<tr>
<td align="center" width="7%">
<input name="" type="checkbox" value="" /> </td>
<td align="center" width="10%">
<input name="" type="text" size="2" /> </td>
<td align="center" width="8%">
<input name="" type="text" size="2" /> </td>
<td align="center" width="7%">
<input name="" type="text" size="2" /> </td>
<td align="center" width="8%">
<input name="" type="text" size="2" /> </td>
<td align="center" width="14%">
<input name="" type="text" size="7" /> </td>
<td align="center" width="10%">
<input name="" type="text" size="4" />
<td width="8%" >
<input type="radio" name="rad" value="" id="">Yes
<input type="radio" name="rad" value="" id="">No
<input type="submit" name="Submit" value="Edit">
</td>
<td align="center" width="14%">
<textarea cols="15"></textarea> </td>
<td align="center" width="14%">
<textarea name="" cols="15"></textarea>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="right">
<h3><br/>
<input type="button" value="Add Row"
onclick="addRow1(''myTable'')" />
<input name="" type="button" value="Delete Selected
Rows" />
<input name="" type="button" value="Submit" />
</h3>
</td>
</tr>
</table>
</body>
</html>
[/HTML]
Thank You,
waiting for your answer..
Bharath Kumar S
So what happens? Does it work? Are there any errors? If so, what is it and on what line?
@bharathmngl
And also please tell me how to add textarea and radiobutton in to the dynamically created rows..
Either create them by DOM method or just provide textarea html to the innerHTML the fields.
Rest I''m too reluctant to read the whole code.
So what happens? Does it work? Are there any errors? If so, what is it and on what line?
hey i got this code from other source.. so please post me working code if you have, i need it urgently.......
这篇关于JS代码，用于动态地将行添加到表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
