YVS1102 YVS1102 - 3 months ago 10
Ajax Question

Success 'append' but not in right place

I'm trying to append from ajax result .

$("#result").append(' <tbody> <tr> <td>' + no + '</td> <td> ' + val.FullName + ' </td> <td> ' +val.attendancedate+ ' </td>' +
'<td>' + val.InTime + '</td> <td>' + val.OutTime + '</td> <td>' +val.total + '</td> </tr> </tbody>');


and here is my table

<div class="box-body">
<table class="table">
<thead>
<tr>
<td> No </td>
<td> Nama Lengkap </td>
<td> Tanggal Kehadiran <td>
<td> Jam Masuk </td>
<td> Jam Keluar </td>
<td> Total Jam Lebih </td>
</tr>
</thead>

<div id="result">
</div>

</table>
</div>


there is no proble from ajax result. The problem is in
append
.
Here is the example result . THanks

enter image description here

So how can i fix it ?

Ish Ish
Answer

You cannot write DIV like this in table. Instead write tbody and append in it Try this:

<div class="box-body">
    <table class="table">
        <thead>
            <tr>
                <td> No </td>
                <td> Nama Lengkap </td>
                <td> Tanggal Kehadiran <td>
                <td> Jam Masuk </td>
                <td> Jam Keluar </td>
                <td> Total Jam Lebih </td>
            </tr>
        </thead>

        <tbody id="result">
        </tbody>

    </table>
</div>

    $("#result").append('<tr>  <td>' + no + '</td> <td> ' + val.FullName + '  </td> <td> ' +val.attendancedate+ '  </td>'  +'<td>' + val.InTime + '</td> <td>' + val.OutTime + '</td> <td>' +val.total + '</td> </tr>');