[英]JQuery/Javascript Append HTML Table Data To TBODY, Double Output
大家早上好。 我遇到了一个问题,那就是我无法完成项目进度。 所以,我想我会请各位老兄帮忙!
情况是这样的:我必须为用户提供一个动态增长的表,使他们能够输入1-N条记录以获取回报。 因此,他们加载页面,单击按钮,然后出现新行。 我很高兴地说我的代码有效,但有一个主要缺陷-表行重复!! 因此,如果用户两次单击“添加”按钮,则希望他们看到:
+---+------+------+----------+
| # | Year | week | Quantity |
+---+------+------+----------+
| 1 | |v|| |v|| ________ |
+---+------+------+----------+
| 2 | |v|| |v|| ________ |
+---+------+------+----------+
相反,他们看到了以下内容:
+---+------+------+----------+
| # | Year | week | Quantity |
+---+------+------+----------+
| 1 | |v|| |v|| ________ |
+---+------+------+----------+
| 2 | |v|| |v|| ________ |
+---+------+------+----------+
| 1 | |v|| |v|| ________ |
+---+------+------+----------+
| 2 | |v|| |v|| ________ |
+---+------+------+----------+
对我来说这是最奇怪的事情。 该代码不是循环的,也不是任何东西-因此它应该只排一行! 我的小提琴中的相关代码,以及下面(出于问题目的的摘录)...
的HTML
<fieldset class="fieldset2">
<legend>Return Specific Curriculum Information</legend>
<input type="hidden" id="ccnt" value="0">
<table class="table" id="retc">
<tr>
<th class="th">Entry #</th>
<th class="th">Year</th>
<th class="th">Week/Packet</th>
<th class="th">Quantity</th>
</tr>
<tbody>
</tbody>
</table>
<input type="button" value="Add Curriculum To Return" class="button" id="addcurric">
<input type="button" value="Remove All Entries" class="button" id="remcurric">
</fieldset>
jQuery / JavaScript
$('#ccnt').data('count', 0);
$('#addcurric').click(function () {
function getcount() {
var $this = $('#ccnt'),
count = $this.data('count') + 1;
$this.data('count', count);
return count;
}
var mycount = getcount();
//console.log('mycount: ' + mycount);
var tdclass;
if (mycount % 2 == 1) {
tdclass = "td1";
} else {
tdclass = "td2";
}
//console.log('tdclass: ' + tdclass);
//window.alert(mycount + ' ' + tdclass);
var chtml = "";
chtml += "'<tr>";
chtml += " <td class=\"" + tdclass + "\">" + mycount + "</td>\\n";
chtml += " <td class=\"" + tdclass + "\"><select name=\"HYear" + mycount + "\" id=\"hyear" + mycount + "\">\\n";
chtml += " <option value=\"0\">-- Select --</option>\\n";
chtml += " <option value=\"1\">Year 1</option>\\n";
chtml += " <option value=\"2\">Year 2</option>\\n";
chtml += " <option value=\"3\">Year 3</option>\\n";
chtml += " </select></td>\\n";
chtml += " <td class=\"" + tdclass + "\"><select name=\"Week" + mycount + "\" id=\"week" + mycount + "\">\\n";
chtml += " <option value=\"0\">-- Select --</option>\\n";
chtml += " <option value=\"1\">Week 1</option>\\n";
chtml += " <option value=\"2\">Week 2</option>\\n";
chtml += " <option value=\"3\">Week 3</option>\\n";
chtml += " </select></td>\\n";
chtml += " <td class=\"" + tdclass + "\"><input type=\"text\" name=\"qty" + mycount + "\" class=\"input\"></td>\\n";
chtml += " </tr>\\n'";
//console.log('chtml is: ' + chtml);
//window.alert(chtml);
//console.log("Writing an iteration of chtml to scrren...");
$('#retc > tbody').append(chtml);
});
有人可以帮助我了解每次/为什么每次单击按钮都会得到重复的行条目吗?
提前致谢!!
您的html片段缺少thead
元素。 table元素的以下结构使其可以工作。
<table class="table" id="retc">
<thead>
<tr>
<th class="th">Entry #</th>
<th class="th">HIPPY Year</th>
<th class="th">Week/Packet</th>
<th class="th">Quantity</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
现场演示这里 。
说明
iirc现代浏览器确保tr
元素在dom中用tbody
包裹。 这样,您最终得到2个与要应用附加元素的元素的选择器匹配的元素。
您需要先清空容器或使用.html
$('#retc > tbody').empty().append(chtml);
要么
$('#retc > tbody').html(chtml);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.