I want in the following code, to move the element .buscarusuarios within the first TD son of the TR classe fltrow, once the sun starts. I'm a little lost with the CSS3 selectors
<form class="buscarusuarios">
<input class="form-control mr-sm-2" id="myInput" onkeyup="myFunction()"
type="search" placeholder="Search" aria-label="Search">
</form>
<tr class="fltrow">
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
It was not clear to me what you needed to put in the table, but I added the form with the search.
What you needed was the property td:first-child that selects the first element td
within row tr .
For a future I also recommend you look at :nth-child(1) since with this you can achieve the same purpose and this also allows you to choose the position in which you want to add it (1,2,3,4,5,6 .. .).
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr class="fltrow">
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function()
{
var form = '<form class="buscarusuarios"><input class="form-control mr-sm-2" id="myInput" onkeyup="myFunction()"type="search" placeholder="Search" aria-label="Search"></form>';
$('.fltrow').children('td:first-child').html(form);
});
</script>
</body>
</html>I hope this is clear to you how it works.