Laravel Blade - Append view to table tbody - php

Question

I'm trying to append rows to a table but it don't pass <tr> and <td>, it's wired. Pass all without this two tags.
My jquery code is that:
$.get('/remove-day-travel/'+id, function(data)
{
$('#travelTable tbody').html('');
$('#travelTable tbody').append(data);
addDayTravel();
removeDayTravel();
});
My controller:
public function removeDayTravel($id)
{
$intervention = DB::table('interventionDays')->select('interventionId')->where('id', $id)->first();
//DB::table('interventionDays')->where('id', $id)->delete();
$travelHours = DB::table('interventionDays')
->where('interventionId', $intervention->interventionId)
->orderBy('day', 'ASC')
->get();
return view('current-dayTravel', compact('travelHours'));
}
And my view is that:
#if(count($travelHours) > 0)
<?php $count = 1; ?>
#foreach ($travelHours as $key => $value)
<input type="hidden" name="day-travel-id[{{$count}}]" value="{{$value->id}}">
<input type="hidden" name="day-travel-remove[{{$count}}]" value="0">
<tr>
<td><label>Dia {{$count}}:</label></td>
<td><label>Ida</label></td>
<td class="#if ($errors->has('hour-day-1[' . $count . ']')) has-error #endif">
{!! Form::text('hour-day-1[' . $count . ']', $value->morningStart , ['class' => 'form-control travelGoStartHour', 'placeholder'=> '']) !!}
</td>
<td class="#if ($errors->has('hour-day-2[{{$count}}]')) has-error #endif">
{!! Form::text('hour-day-2[' . $count. ']', $value->morningEnd, ['class' => 'form-control travelGoEndHour', 'placeholder'=> '']) !!}
</td>
<td>
<label>Volta</label>
</td>
<td class="#if ($errors->has('hour-day-3[' . $count . ']')) has-error #endif">
{!! Form::text('hour-day-3[' . $count . ']', $value->afternoonStart, ['class' => 'form-control travelBackStartHour', 'placeholder'=> '']) !!}
</td>
<td class="#if ($errors->has('hour-day-4[' . $count . ']')) has-error #endif">
{!! Form::text('hour-day-4[' . $count . ']', $value->afternoonEnd, ['class' => 'form-control travelBackEndHour', 'placeholder'=> '']) !!}
</td>
<td>
{!! Form::checkbox('dinner[' . $count . ']', 0,$value->dinner) !!}
</td>
<td>
{!! Form::checkbox('stay[' . $count . ']', 0,$value->stay) !!}
</td>
<td>
#if($key == count($travelHours) -1)
<i class="icon-plus-circled add-new-day-travel" title="Adicionar Novo dia" data-id="1"></i>
#endif
</td>
<td>
#if($key == count($travelHours) -1)
<i class="icon-cancel remove-day-travel" title="Remover dia" data-id="{{$count}}" data-record="{{$value->id}}"></i>
#endif
</td>
</tr>
<?php $count += 1; ?>
#endforeach
#endif
But returns me this:
I don't understand why? What I'm doing wrong?
Thank you

Answer 1

$('#travelTable tbody').html(data);
Use the above in your JS instead of what you currently have

Answer 2

When you render a tr or th or even td tag outside a tbody or thead or tfooter html ignores them and replace them by a empty space because those tags can only be placed in between opening and closing table tags.
Browsers ignore the <tbody>, <tr>, and <td> tags and the corresponding end tags. This has not been specified in HTML specifications, since they do not define the parsing of syntactically erroneous documents. In the HTML5 draft, however, there is a description that defines the browser behavior in a manner that corresponds to the what browsers actually do: Tree construction.
This means that you cannot write an HTML document that contains, say, a element outside a table element. The HTML parser in a browser simply does not construct such document trees. (You can, however, construct such a document dynamically with client-side scription.)
See previous answer here:
How do browsers analyze <tr> <td> without <table>?