I work
HTML(The HTML part is generated via a JSON, this is just the template.) :
<table id="table-blog" class="order-table table table-hover">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Tags</th>
<th>Url</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr>
<td>Title</td>
<td>Description</td>
<td>Tags</td>
<td>Url</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Title</td>
<td>Description</td>
<td>Tags</td>
<td>Url</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Title</td>
<td>Description</td>
<td>Tags</td>
<td>Url</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
Here the JS :
function syncBlog(blogs)
{
blogs = Object.values(blogs);
var tbody = $("#table-blog > tbody");
console.log($(tbody).children());
$(tbody).children().each(function(){
$(this).children('td:last-child').children("input").prop("checked", false);
});
if(blogs.length > 0)
{
blogs.forEach(blog =>
{
$(tbody).children().each(function(){
console.log($(this));
if($(this).children('td:first').text() == blog.title)
{
console.log(blogs);
$(this).children('td:last-child').children("input").prop("checked", true);
}
});
});
}
}
I don't why .children() returns nothing, however the table is filled before (by ajax call).
But if I try with native JS :
var tbody = document.querySelector("#table-blog > tbody");
console.log(tbody.children);
I will be able to see the HTMLCollection with all <tr>, but I can't use them and .length return me 0
Well, Thank you all for your answers. I was able to find the solution that now seems clear. The DOM was not fully loaded before the execution of the function. To solve the problem I made my AJAX call in synchronous: Exemple:
$.ajax({
url:'Your url',
methode:'POST',//In my case
data:'Your data',
success:function(),
error:function(),
async:false,
});