I have a table within which when I select all the items I want to remove all the items from the city column and then take the number of cars per city something like this
And the html code I have is the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prueba</title>
<link href="http://127.0.0.1:8000/css/app.css" rel="stylesheet">
<script src="http://127.0.0.1:8000/js/jquery.js"></script>
</head>
<body>
<table class="table table-striped">
<thead>
<th style="width: 15px;"><input id="selectall" type="checkbox" name="Marcar todos"></th>
<th>Marca</th>
<th>Modelo</th>
<th>Color</th>
<th>Placa</th>
<th>Ciudad Destino</th>
</thead>
<tbody id="despachos">
<tr class="fila">
<td><input value=1 class="selectall" type="checkbox"></td>
<td>audi</td>
<td>2016</td>
<td>Rojo</td>
<td>ABA-123</td>
<td name="ciudad">Bogota</td>
</tr>
<tr class="fila">
<td><input value=2 class="selectall" type="checkbox"></td>
<td>audi</td>
<td>2016</td>
<td>Negro</td>
<td>BAG-324</td>
<td name="ciudad">Cali</td>
</tr>
<tr class="fila">
<td><input value=3 class="selectall" type="checkbox"></td>
<td>audi</td>
<td>2016</td>
<td>Blanco</td>
<td>DRF-434</td>
<td name="ciudad">Medellin</td>
</tr>
<tr class="fila">
<td><input value=4 class="selectall" type="checkbox"></td>
<td>audi</td>
<td>2016</td>
<td>Gris</td>
<td>FDF-453</td>
<td name="ciudad">Medellin</td>
</tr>
<tr class="fila">
<td><input value=5 class="selectall" type="checkbox"></td>
<td>BMW</td>
<td>2016</td>
<td>Gris</td>
<td>GFS-454</td>
<td name="ciudad">Bogota</td>
</tbody>
</table>
</body>
<footer>
<script src="http://127.0.0.1:8000/js/app.js"></script>
<script>
$(document).ready(function () {
//Detectar click en el checkbox superior de la lista
$('#selectall').on('click', function () {
//verificar el estado de ese checkbox si esta marcado o no
var checked_status = this.checked;
/*
* asignarle ese estatus a cada uno de los checkbox
* que tengan la clase "selectall"
*/
$(".selectall").each(function () {
this.checked = checked_status;
});
});
});
$(document).ready(function(){
$(".selectall").each(function ()
{
total = $(".fila").find("td:last-child").text()+'\n';
alert(total);
});
});
</script>
</footer>
</html>I have already removed the contents of the city column but I do not load the data as it should. I still do not know how to do it.
My question is how can I extract the cities and create a table with the number of cars per city?