如何讓孩子TBODY同樣大小與THEAD

Question

您好，我有一個問題，這之後創建的第一個TBODY。 我想問一下如何讓tbody兒童的體型與thead後的第一排大小相同？

這裏我的代碼.. 請幫我一下吧..你可以編輯自己的小提琴或給出答案

var theadFlag = 0; 
 
    var thdeadData = ""; 
 
    $(document).on('click','#input_check',function(e){ 
 
      e.preventDefault(); 
 
    
 
    if(theadFlag == 0) { theadData ='<tr>' 
 
            +'<th>Nama Karyawan</th>' 
 
            +'<th>Tanggal</th>' 
 
\t \t \t \t \t \t \t \t \t +'<th>Cost Center</th>' 
 
            +'<th>Jam Mulai</th>' 
 
            +'<th>Jam Selesai</th>' 
 
            +'<th>Status Lembur</th>' 
 
     \t \t \t \t \t \t  +'<th>Total Jam</th>' 
 
\t \t \t \t \t \t \t \t \t +'<th>Tugas</th>' 
 
            +'</tr>' 
 
           } 
 
        else 
 
         { 
 
         theadData = "" 
 
         } 
 
       
 
      var nama = $('input[id="nama_check"]').val(), 
 
       bagian = $('input[id="tanggal_check"]').val(), 
 
       cost = $('input[id="cost_check"]').val(), 
 
       mulai = $('input[id="start"]').val(), 
 
     \t \t selesai = $('input[id="end"]').val(), 
 
       status = $('input[id="status_check"]').val(); 
 
     \t \t total = $('input[id="total_jam"]').val(), 
 
\t \t \t \t tugas = $('input[id="tugas_check"]').val(), 
 
     \t \t     
 
       $('tbody #body').append('<table id="check_data">' 
 
            + theadData 
 
            +'<tr>' 
 
            +'<td>'+$("#nama_check").val()+'</td>'       
 
            +'<td>'+$("#tanggal_check").val()+'</td>' 
 
            +'<td>'+$("#cost_check").val()+'</td>' 
 
            +'<td>'+$("#start").val()+'</td>' 
 
            +'<td>'+$("#end").val()+'</td>' 
 
            +'<td>'+$("#status_check").val()+'</td>' 
 
            +'<td>'+$("#total_jam").val()+'</td>' 
 
\t \t \t \t \t \t \t \t \t +'<td>'+$("#tugas_check").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 action="../php/absen/absen_karyawan_autocomplete.php" id="form_check" method="post" name="form_check"> 
 
    <table> 
 
    <tr> 
 
    <td width="50" style="border-left:hidden; border-right:hidden"></td> 
 
    <td width="150">Nama Karyawan</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">Tanggal</td> 
 
    <td width="10">:</td> 
 
    <td width="150"><input type="text" id="tanggal_check" type="text" name="tanggal_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">Jam Mulai</td> 
 
    <td width="10">:</td> 
 
    <td><input type="time" id="start" name="logintime" style="float:left"/></td> 
 
    
 
    <td width="100" style="border-left:hidden; border-right:hidden"></td> 
 
    <td width="150">Jam Selesai</td> 
 
    <td width="10">:</td> 
 
    <td width="150"><input type="time" id="end" name="logouttime" style="float:left"/></td> 
 
    
 
    </tr> 
 
    <tr> 
 
    <td width="50" style="border-left:hidden; border-right:hidden"></td> 
 
    <td width="150">Status Lembur</td> 
 
    <td width="10">:</td> 
 
    <td width="150"><select name="option2" id="option2" onchange="Choose1(this)" style="float:left"> 
 
     <option value="-">-</option> 
 
     <option value="istirahat">istirahat</option> 
 
     <option value="tanpa istirahat">tanpa istirahat</option> 
 
    </select><input type="text" name="status_check" size="8" readonly="readonly" id="status_check" style="text-transform:uppercase" /></td> 
 
    <td width="10" style="border-left:hidden; border-right:hidden"></td> 
 
    <td width="150">Total Jam</td> 
 
    <td width="10">:</td> 
 
    <td width="150"><input type="text" id="total_jam" type="text" name="total_jam" 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">Cost Center</td> 
 
    <td width="10">:</td> 
 
    <td width="150"><input type="text" id="cost_check" type="text" name="cost_check" size="25" style="float:left; text-transform:uppercase" ></td> 
 
    <td width="10" style="border-left:hidden; border-right:hidden"></td> 
 
    <td width="150">Tugas</td> 
 
    <td width="10">:</td> 
 
    <td width="150"><input type="text" id="tugas_check" type="text" name="tugas_check" size="25" style="float:left" ></td> 
 
    </tr> 
 
    </table> 
 
    </form> 
 
    </td> 
 
       <td width="300"> 
 
       <label class="button" name="input_check" id="input_check" style="height:35px; width:40px" />CLICK HERE</label> 
 
      \t <label class="button" name="edit_karyawan" id="edit_karyawan" style="height:35px; width:40px" />b</label> 
 
       \t <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> 
 
      \t function Choose1(data) { 
 

 
      \t document.getElementById ("status_check").value = data.value; 
 

 
      \t } 
 
    </script>

Answer 1

你有幾個無效的HTML標籤閉幕。我正確的做法是追加tr而不是整個table。

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

 
    if (theadFlag == 0) { 
 
    theadData = '<tr>' + 
 
     '<th>Nama Karyawan</th>' + 
 
     '<th>Tanggal</th>' + 
 
     '<th>Cost Center</th>' + 
 
     '<th>Jam Mulai</th>' + 
 
     '<th>Jam Selesai</th>' + 
 
     '<th>Status Lembur</th>' + 
 
     '<th>Total Jam</th>' + 
 
     '<th>Tugas</th>' + 
 
     '</tr>'; 
 

 
    $('#body').append(theadData) 
 
    } 
 

 

 
    var nama = $('input[id="nama_check"]').val(), 
 
    bagian = $('input[id="tanggal_check"]').val(), 
 
    cost = $('input[id="cost_check"]').val(), 
 
    mulai = $('input[id="start"]').val(), 
 
    selesai = $('input[id="end"]').val(), 
 
    status = $('input[id="status_check"]').val(); 
 
    total = $('input[id="total_jam"]').val(), 
 
    tugas = $('input[id="tugas_check"]').val(), 
 

 
    $('#body').append(
 

 
     '<tr>' + 
 
     '<td>' + $("#nama_check").val() + '</td>' + 
 
     '<td>' + $("#tanggal_check").val() + '</td>' + 
 
     '<td>' + $("#cost_check").val() + '</td>' + 
 
     '<td>' + $("#start").val() + '</td>' + 
 
     '<td>' + $("#end").val() + '</td>' + 
 
     '<td>' + $("#status_check").val() + '</td>' + 
 
     '<td>' + $("#total_jam").val() + '</td>' + 
 
     '<td>' + $("#tugas_check").val() + '</td>' + 
 
     '</tr>'); 
 
    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 action="../php/absen/absen_karyawan_autocomplete.php" id="form_check" method="post" name="form_check"> 
 
        <table> 
 
         <tr> 
 
         <td width="50" style="border-left:hidden; border-right:hidden"></td> 
 
         <td width="150">Nama Karyawan</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">Tanggal</td> 
 
         <td width="10">:</td> 
 
         <td width="150"><input type="text" id="tanggal_check" type="text" name="tanggal_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">Jam Mulai</td> 
 
         <td width="10">:</td> 
 
         <td><input type="time" id="start" name="logintime" style="float:left" /></td> 
 

 
         <td width="100" style="border-left:hidden; border-right:hidden"></td> 
 
         <td width="150">Jam Selesai</td> 
 
         <td width="10">:</td> 
 
         <td width="150"><input type="time" id="end" name="logouttime" style="float:left" /></td> 
 

 
         </tr> 
 
         <tr> 
 
         <td width="50" style="border-left:hidden; border-right:hidden"></td> 
 
         <td width="150">Status Lembur</td> 
 
         <td width="10">:</td> 
 
         <td width="150"><select name="option2" id="option2" onchange="Choose1(this)" style="float:left"> 
 
     <option value="-">-</option> 
 
     <option value="istirahat">istirahat</option> 
 
     <option value="tanpa istirahat">tanpa istirahat</option> 
 
    </select><input type="text" name="status_check" size="8" readonly="readonly" id="status_check" style="text-transform:uppercase" /></td> 
 
         <td width="10" style="border-left:hidden; border-right:hidden"></td> 
 
         <td width="150">Total Jam</td> 
 
         <td width="10">:</td> 
 
         <td width="150"><input type="text" id="total_jam" type="text" name="total_jam" 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">Cost Center</td> 
 
         <td width="10">:</td> 
 
         <td width="150"><input type="text" id="cost_check" type="text" name="cost_check" size="25" style="float:left; text-transform:uppercase"></td> 
 
         <td width="10" style="border-left:hidden; border-right:hidden"></td> 
 
         <td width="150">Tugas</td> 
 
         <td width="10">:</td> 
 
         <td width="150"><input type="text" id="tugas_check" type="text" name="tugas_check" size="25" style="float:left"></td> 
 
         </tr> 
 
        </table> 
 
        </form> 
 
       </td> 
 
       <td width="300"> 
 
        <label class="button" name="input_check" id="input_check" style="height:35px; width:40px">CLICK HERE</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> 
 
       <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> 
 

 
        <script> 
 
        function Choose1(data) { 
 

 
         document.getElementById("status_check").value = data.value; 
 

 
        } 
 
        </script>