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

Question

我有一个问题是当tbody有值时，一直停止添加一个表。 我使用jQuery函数添加thead和tbody。 有人可以帮帮我吗？

这是整个代码

＆＃13;

＆＃13;

$(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>');
     //  }
        });

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我刚刚添加了两个varriables theadFlag和theadData。并且我只是在第一次点击时才分配theadData。你可以随意改变， theadData用于存储元素theadFlag，用于首次点击验证

    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>