当 tbody 具有值时如何停止插入 thead 表



我有一个问题,当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>

我刚刚添加了两个变量 theadFlag 和 theadData。 我只在第一次点击时分配 theadData . 您可以根据需要进行更改, thead用于存储元素的数据 thead用于验证首次单击的标志


var theadFlag = 0;
var thdeadData = "";
$(document).on('click','#input_check',function(e){
e.preventDefault();

if(theadFlag == 0) { theadData ='<tr>'
+'<th>1</th>'
+'<th>2</th>'
+'<th>3</th>'
+'<th>4</th>'
+'<th>5</th>'
							+'<th>6</th>'
						    +'<th>7</th>'
+'</tr>' 
}
else 
{
theadData = ""
}

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(),
		               
$('tbody #body').append('<table id="check_data">'
+ theadData
+'<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>');
theadFlag = 1;
});
<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>

最新更新