【发布时间】：2017-07-02 23:27:25
【问题描述】：
当 tbody 有值时，我有一个问题要停止表总是添加。 我使用jQuery 函数来添加thead 和tbody。 谁能帮帮我？
这是整个代码
$(document).on('click','#input_check',function(e){
e.preventDefault();
var nama = $('input[id="nama_check"]').val(),
bagian = $('input[id="bagian_check"]').val(),
cost = $('input[id="cost_check"]').val(),
mulai = $('input[id="jam_mulai"]').val(),
selesai = $('input[id="jam_selesai"]').val(),
status = $('input[id="status_check"]').val();
total = $('input[id="jam_total"]').val(),
//if($('.check_data').length < 1) {
$('tbody #body').append('<table id="check_data">'
+'<tr>'
+'<th>1</th>'
+'<th>2</th>'
+'<th>3</th>'
+'<th>4</th>'
+'<th>5</th>'
+'<th>6</th>'
+'<th>7</th>'
+'</tr>'
+'<tr>'
+'<td>'+$("#nama_check").val()+'</td>'
+'<td>'+$("#bagian_check").val()+'</td>'
+'<td>'+$("#cost_check").val()+'</td>'
+'<td>'+$("#jam_mulai").val()+'</td>'
+'<td>'+$("#jam_selesai").val()+'</td>'
+'<td>'+$("#status_check").val()+'</td>'
+'<td>'+$("#jam_total").val()+'</td>'
+'</tr>'
+ '</table>');
// }
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- The Modal -->
<div id="myMd4" class="md4">
<!-- Modal content -->
<div class="md4-content" style="margin-top:20px">
<div id="data">
<table border="1" style="margin-left:50px">
<tr>
<td>
<table border="1">
<tr>
<td>
<form id="form_check" method="post" name="form_check">
<table>
<tr>
<td width="50" style="border-left:hidden; border-right:hidden"></td>
<td width="150">1</td>
<td width="10">:</td>
<td width="150"><input type="text" id="nama_check" type="text" name="nama_check" size="25" style="float:left; text-transform:uppercase"> </td>
<td width="10" style="border-left:hidden; border-right:hidden"></td>
<td width="150">2</td>
<td width="10">:</td>
<td width="150"><input type="text" id="bagian_check" type="text" name="bagian_check" size="25" style="float:left; text-transform:uppercase"></td>
</tr>
<tr>
<td width="50" style="border-left:hidden; border-right:hidden"></td>
<td width="150">3</td>
<td width="10">:</td>
<td><input type="text" name="cost_check" size="25" id="cost_check" style="text-transform:uppercase" /></td>
<td width="100" style="border-left:hidden; border-right:hidden"></td>
<td width="150">4</td>
<td width="10">:</td>
<td width="150"><input type="text" id="jam_mulai" type="text" name="jam_mulai" size="25" style="float:left; text-transform:uppercase"> </td>
</tr>
<tr>
<td width="50" style="border-left:hidden; border-right:hidden"></td>
<td width="150">5</td>
<td width="10">:</td>
<td width="150"><input type="text" id="jam_selesai" type="text" name="jam_selesai" size="25" style="float:left; text-transform:uppercase"></td>
<td width="10" style="border-left:hidden; border-right:hidden"></td>
<td width="150">6</td>
<td width="10">:</td>
<td width="150"><select name="option2" id="option2" onchange="Choose1(this)" style="float:left">
<option>-</option>
<option value="174907">174907</option>
<option value="174908">174908</option>
<option value="174909">174909</option>
<option value="174913">174913</option>
<option value="174915">174915</option>
<option value="174918">174918</option>
</select><input type="text" name="status_check" size="14" readonly="readonly" id="status_check" style="text-transform:uppercase" /></td>
</tr>
<tr>
<td width="50" style="border-left:hidden; border-right:hidden"></td>
<td width="150">7</td>
<td width="10">:</td>
<td width="150"><input type="text" id="jam_total" type="text" name="jam_total" size="25" style="float:left; text-transform:uppercase"> </td>
<td width="10" style="border-left:hidden; border-right:hidden"></td>
<td width="150" style="border-left:hidden; border-right:hidden"></td>
<td width="10" style="border-left:hidden; border-right:hidden"></td>
<td width="150" style="border-left:hidden; border-right:hidden"></td>
</tr>
</table>
</form>
</td>
<td width="300">
<label class="button" name="input_check" id="input_check" style="height:35px; width:40px" />a</label>
<label class="button" name="edit_karyawan" id="edit_karyawan" style="height:35px; width:40px" />b</label>
<label class="button" name="delete_karyawan" id="delete_karyawan" style="height:35px; width:40px; " />c</label>
<label name="tutup" id="tutup" class="tutup" style="height:35px; width:40px;"/>d</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p align="center"><strong>Test</strong></p>
<table id="check_data" class="check_data" style="font-size:12px; margin-left:70px ">
<tbody id="body">
</tbody>
</table>
</td></tr></table>
</div>
</div>
</div>
<script>
function Choose1(data) {
document.getElementById ("status_check").value = data.value;
}
</script>【问题讨论】：
-
我认为它工作正常。我无法理解你的问题。你能简化一下吗
-
问题是当我单击按钮时，thead 总是与 tbody 项目一起添加。我只想在插入一次后添加 tbody 项
-
@MujthabaIbrahim 你能尝试运行它吗？按钮是'a'。您可以查看始终添加“tbody”项目的“thead”。我需要你的帮助才能使“头”只在制作表格时添加一次。
-
因为你的 append 函数包含所有那些
的点击它会被添加
标签： jquery html-table