使用javascript向表中添加多行
我已经讨论了一个针对这个主题的解决方案，但我拒绝使用它，因为它对于大量的列来说很麻烦。下面是我表格的一个小版本。我有两个按钮。一次只允许我向表中添加一行。这个很好用。但是，我希望用户只需单击一下即可添加所需的行数。这是行不通的。javascript不能做到这一点吗使用javascript向表中添加多行,javascript,Javascript,我已经讨论了一个针对这个主题的解决方案，但我拒绝使用它，因为它对于大量的列来说很麻烦。下面是我表格的一个小版本。我有两个按钮。一次只允许我向表中添加一行。这个很好用。但是，我希望用户只需单击一下即可添加所需的行数。这是行不通的。javascript不能做到这一点吗 <!DOCTYPE html> <html> <head> <title>Bio-probotics</title> <style type="text/css"
<!DOCTYPE html>
<html>
<head>
<title>Bio-probotics</title>
<style type="text/css">
body {font-family: Arial, Verdana, Helvetica,Sans-serif; padding: 1px;
font size: 14px;}
th {font-weight: bold; text-align: left; border: 1px; border-style:
solid; margin: 0px; border-colapse: colapse;}
td {font-weight: normal; text-align: left; border: 1px; border-style:
solid; margin: 0px; border-colapse: colapse;}
.total {font-weight: bold}
.chem:focus {background-color: rgb(250,250,150);}
.hidecell {border: 0px; margin: 0px; border-colapse: colapse;}
.nofoc {font-weight: bold; text-align: right;}
.newRow {font-weight: bold; border: 0px; width: 200px; font-style:
italic; background-color: rgb(240,240,240);}
.newRow:hover {background-color: rgb(255,255,150);}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>
<body>
<table id="pr">
<thead>
<tr id="thd">
<th>s/n</th>
<th>Enzyme Name</th>
<th>Cat 1</th>
<th>Cat 2</th>
<th>Cat 3</th>
<th>Energy Level</th>
<th>BioImpluse</th>
<th>Simulant</th>
</tr>
</thead>
<tbody>
<tr id="mpf">
<td id="sn" input type="text" class="chem" name="sn" /></td>
<td id="ename"><input type="text" class="chem" name="ename" /></td>
<td id="cat1">
<select>
<option>P100</option>
<option>P200</option>
<option>P300</option>
</select>
</td>
<td>
<select id="cat2">
<option>C384A</option>
<option>C384B</option>
<option>C384C</option>
</select>
</td>
<td>
<select id="cat3">
<option>EMQ65</option>
<option>EMQ84</option>
</select>
</td>
<td id="el"><input type="text" class="chem" onchange="update((this));"
/></td>
<td id="bi"><input type="text" class="chem" onchange="update((this));"
/></td>
<td id="bi"><input type="text" class="chem" onchange="update((this));"
/></td>
</tr>
</tbody>
<tfoot id="tft">
<tr>
<td class="hidecell" /></td>
<td class="hidecell" /></td>
<td class="hidecell" /></td>
<td class="hidecell" /></td>
<td class="total"><b>Total</b></td>
<td id="col6" class="nofoc"><input type="text" readonly /></td>
<td id="col7" class="nofoc"><input type="text" readonly /></td>
<td id="col8" class="nofoc"><input type="text" readonly /></td>
</tr>
</tfoot>
</table>
<input id="newRow" class="newRow" onclick="addRow()" value="Click to Add
one Row @ in one click" readonly>
<br><br>
<input id="newRows" class="newRow" onclick="addRows()" value="Click to
Add 40 Rows @ one click" readonly>
<br>
<script>
function addRow(){
var tbl, elmnt, cln;
tbl = document.getElementById('pr');
elmnt = tbl.getElementsByTagName("TR")[1];
cln = elmnt.cloneNode(true);
tbl.tBodies[0].appendChild(cln);
}
</script>
<script>
function addRows(){
var i; tbl, elmnt, cln;
for (i = 1, i = 40, i++) {
tbl = document.getElementById('pr');
elmnt = tbl.getElementsByTagName("TR")[1];
cln = elmnt.cloneNode(true);
tbl.tBodies[0].appendChild(cln);
}
}
</script>
</body>
</html>
生物益生学
正文{字体系列：Arial，Verdana，Helvetica，无衬线；填充：1px；
字体大小：14px；}
{字体大小：粗体；文本对齐：左侧；边框：1px；边框样式：
实心；边距：0px；边框colapse:colapse；}
td{字体大小：普通；文本对齐：左；边框：1px；边框样式：
实心；边距：0px；边框colapse:colapse；}
.total{字体大小：粗体}
.chem:focus{背景色：rgb（250150）；}
.hidecell{border:0px；margin:0px；border colapse:colapse；}
.nofoc{font-weight:bold；text-align:right；}
.newRow{字体重量：粗体；边框：0px；宽度：200px；字体样式：
斜体；背景色：rgb（240240）；}
.newRow:hover{背景色：rgb（255255150）；}
序列号
酶名称
第一类
第2类
第3类
能级
生物植入
模拟物
P100
P200
P300
C384A
C384B
C384C
EMQ65
EMQ84
全部的
函数addRow（）{
变量tbl、elmnt、cln；
tbl=document.getElementById（'pr'）；
elmnt=tbl.getElementsByTagName（“TR”）[1]；
cln=elmnt.cloneNode（真）；
tbl.tBodies[0].appendChild（cln）；
}
函数addRows（）{
var i；tbl、elmnt、cln；
对于（i=1，i=40，i++）{
tbl=document.getElementById（'pr'）；
elmnt=tbl.getElementsByTagName（“TR”）[1]；
cln=elmnt.cloneNode（真）；
tbl.tBodies[0].appendChild（cln）；
}
}
当然可以。在addRows（）
函数中，您可以使用addRow（）
函数，因此无需重复逻辑。将addRows（）
函数替换为以下内容：
function addRows() {
for (var i = 1; i < 40; i++)
addRow();
}
函数addRows（）{
对于（变量i=1；i<40；i++）
addRow（）；
}
这将创建39个表行。
另外，您的HTML代码中有一些语法错误，因此我建议使用某种HTML验证工具来修复它们。我刚刚更新了您的代码。我更新了几个错误。
您可以使用jst替换addRow（）和addRows（）函数
请检查这个代码
函数addRows（）{
var i、tbl、elmnt、cln；
对于（i=1；i这是可能的，只需添加输入，用户将键入他要添加的行数，读取值并使用for，它将执行addRow（）函数
<input type="text" id="num_rows">
并将Javascript编辑为：
function addRows() {
var rows = document.getElementById('num_rows');
if(rows < 150) { //check for some limit
for (var i = 0; i < rows; i++){
addRow();
}
}
}
函数addRows（）{
var rows=document.getElementById（'num_rows'）；
如果（行数<150）{//检查一些限制
对于（变量i=0；i
你可以发布你的整个网页吗？哦，等等，请检查我的答案…这是为你的输入工作的许多TX。工作很好。我感谢