How to find the first empty row in an HTML table using Javascript
Question
The code example below creates a table with 6 rows. The last two rows are empty. The JavaScript code finds and displays correctly the number of rows in a table.
I would like to find the row number of the first row with empty cells. In this example it will be row (4) (counting from 0). I tried several solutions and they did not work.
Your help is appreciated.
Thanks,
Menachem
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 4</td>
<td>cell 5</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<br>
<script>
var x = document.getElementById("myTable").rows.length;
alert ("Number of rows in the table is " + x);
</script>
</body>
</html>
4 answers
solution1
2 2016-05-18 03:28:34
You can use combination of :has() and :not() .
-
td:not(:empty)get td which is not empty -
tr:not(:has(td:not(:empty)))selects all tr which is not contains any non emptytd -
tr:not(:has(td:not(:empty))):firstgets the firsttrfrom them
var index = $("#myTable tr:not(:has(td:not(:empty))):first").index(); console.log(index);
table,td { border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="myTable"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> <tr> <td>cell 4</td> <td>cell 5</td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> <br> <script> var x = document.getElementById("myTable").rows.length; alert("Number of rows in the table is " + x); </script>
solution2
1 2016-05-18 02:44:50
I would like to find the row number of the first row with empty cells
You can use :has() , adjacent sibling selector + to match td:empty , that has next element sibling that is td:empty , :first , index() . The index of the first tr element which has a child td element without child nodes would be 3
$("#myTable tr:has(td:empty + td:empty):first").index()
<!DOCTYPE html> <html> <head> <style> table, td { border: 1px solid black; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> </head> <body> <table id="myTable"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> <tr> <td>cell 4</td> <td>cell 5</td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> <br> <script> var x = document.getElementById("myTable").rows.length; alert("Number of rows in the table is " + x); console.log($("#myTable tr:has(td:empty + td:empty):first").index()); </script> </body> </html>
solution3
0 2016-05-18 02:48:09
$("#myTable tr").find('td').filter(function() { return $(this).text() == '' ; }).addClass('empty');
table, td { border: 1px solid black; } .empty { background-color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> <tr> <td>cell 4</td> <td>cell 5</td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
Use .filter()
solution4
0 2016-05-18 03:02:01
You can use a test inside a .filter() call that checks the number of empty td 's against the number of all td 's in a tr . Filter out all those that have any non-empty td , call .first() to find the first one in the filtered set, and .index() to get the index
var index = $("#myTable tr").filter(function(){ return $("td",this).length == $("td:empty",this).length;; }).first().index(); console.log("Empty row index: "+index);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="myTable"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> <tr> <td>cell 4</td> <td>cell 5</td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.