Develop Reference

Delete row in html if all cells blank

I'm generating a table based on some external data. Every row does not have data in the columns I'm returning. I'd like to delete the row that have all cells empty. I have found some code to delete the row if one cell is empty, but one empty cell is allowed. I'd like to delete the first and third rows.
I've tried this, but it deletes all rows:
<table border="1">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>456</td>
<td></td>
</tr>
$("td").each(function() {
if (this.innerText === '') {
this.closest('tr').remove();
}
});

Simply modify your script to iterate over tr elements instead of td.
If the text content of a tr row is blank, that means all of its cells are blank, as well. Here's a working demo:
$("tr").each(function() {
if (!$(this).text().trim()) {
this.remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>456</td>
<td></td>
</tr>
</table>

You can use each of the tr elements like this. Hope to help, my friend :))
$('tr').filter(
function(){
return $(this).find('td').length == $(this).find('td:empty').length;
}).hide();
http://jsfiddle.net/1g7hqkvb/

In a table, add property to a cell in a column which include a cell containing a specific text

I have a table as shown:
<table border="1" cellpadding="1" cellspacing="1" class="td1166">
<tbody>
<tr>
<td>Number</td>
<td>A</td>
<td>B</td> //Assume that this cell indicate the column I need to select
<td>C</td>
<td>D</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td> //So the last cell in the 'A' column is the one I want to add property, and A is known.
<td></td>
<td></td>
</tr>
</tbody>
</table>
All the need I have presented in the code.
I was trying using jQuery but I have no idea how to select as such. Hope your kind help!

You can try something like this, note: this will only work for the first and last rows, you will need different selectors if you have different rows
$('tr:first td').each(function(i,v){
if($(this).text() == "B") {
var index = $(v).index();//get the index of the colomn
$('tr:last td').eq(index).css('color','red');//select the element
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="1" cellspacing="1" class="td1166">
<tbody>
<tr>
<td>Number</td>
<td>A</td>
<td>B</td> <!--//Assume that this cell indicate the column I need to select-->
<td>C</td>
<td>D</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>here</td><!-- //So the last cell in the 'A' column is the one I want to add property, and A is known.-->
<td></td>
<td></td>
</tr>
</tbody>

Get the last tr which id begins with Row_

I want to get with jQuery the greater id for all tr in a table.
If I have this table:
<table id="productsTable" style="width:100%;">
<thead>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr id="Row_0">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_1">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_2">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_3">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
I want to get the id Row_3.
I can use the :last selector, $( "tr:last" ) but it doesn't work because it returns the row for the <tfoot> section.
Maybe there is a way to add a filter to the :last selector to find the last tr with an id that begins with Row_.
Any advice?

You can use attribute start with selector:
$("tr[id^='Row_']:last" )

Assuming all the rows in tbody have the id just use tbody in selector
$( "tbody tr:last" )

You can use starts with
alert($("tr[id^='Row_']:last").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="productsTable" style="width:100%;">
<thead>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr id="Row_0">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_1">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_2">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_3">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
If you just want last tr inside tbody then use:
$("tbody tr:last")

Displaying data on JSP containing varying length <td>

I need help in displaying data on JSP in a particular format.
The data for the JSP is coming from java code in the form of a list which inturn is taking data from beans, basically I have a list of beans on my JSP page.
My data needs to be in a particular format, similar to the below table:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table border="1">
<!-- Below row is supposed to be the linking element, lets call it Dep# -->
<tr>
<th>22603</th>
<th>23926</th>
<th>25018</th>
<th>26441</th>
<th>29757</th>
<th>31798</th>
<th>32436</th>
<th>32699</th>
<th>37948</th>
</tr>
<tr> <!-- Below set of row's are supposed to be the linked element, lets call it Emp# -->
<td>41162</td>
<td>37362</td>
<td>38311</td>
<td>37773</td>
<td>38666</td>
<td>40056</td>
<td>37519</td>
<td>38389</td>
<td>37596</td>
</tr>
<tr>
<td></td>
<td>38824</td>
<td>38896</td>
<td></td>
<td>39498</td>
<td></td>
<td>37548</td>
<td></td>
<td>37442</td>
</tr>
<tr>
<td></td>
<td></td>
<td>41009</td>
<td></td>
<td>37827</td>
<td></td>
<td></td>
<td></td>
<td>37259</td>
</tr>
<tr>
<td></td>
<td></td>
<td>41180</td>
<td></td>
<td>37473</td>
<td></td>
<td></td>
<td></td>
<td>37537</td>
</tr>
<tr>
<td></td>
<td></td>
<td>41967</td>
<td></td>
<td>37856</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>38805</td>
<td></td>
<td>39307</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>40690</td>
<td></td>
<td>40176</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>42144</td>
<td></td>
<td>38667</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>38390</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>37845</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
The list which is being passed from backend code has the following 2 beans in it:
1. deptNum(1 Dept can have many Emp)
2. empNum(1 Emp can be part of only 1 Dept)
How can I achieve this particular format of data for display?

<td></td> should be <td> </td> because when there's nothing inside the <td></td> the browser typically just kind of doesn't display it. is a non-breaking space.

According to your question, basically you have a set of Departments and many list of employees which belong to these departments.
I suggest you to solve this with "java.util.Set" and "java.util.Map".
In sense of "each employee has only one Department" means we have a list of Departments and they are unique in this list. So use "Set" instead of "List" passing from the backend.
Secondly, you can use this set as a KeySet of each employee Map. Then each map can show each department's employee if it exists for this map.
Finally, you can prepare a list of map to traverse in JSP part.
Set<String> deptSet = ....
foreach (String deptNum : deptSet) {
print("<th>" + deptNum + "</th>");
}
...
List<Map<String,String>> empMapList = ....
foreach (empMap : empMapList) {
Set empSet = empMap.getValues();
foreach (String empNum : empSet) {
if (empNum == null)
print("<td> /td>");
else
print("<td>" + empNum + "</td>");
}
}

Inserting HTML Table Row "Heading" Based On Dynamic Visible Element Data Attribute

Let's say I have a table containing rows which contain a table cell having a data-time attribute and may or may not be visible (ie. display: none). This visibility is dynamic and at any point a row may change.
Only the first of three table cell in these rows contains a data-time attribute.
The table rows are already grouped according to their children's data-time attribute value. My goal is to utilize JS/jQuery to insert a new table row above the first/unique visible occurrence of any particular data-time value. This row should contain a table cell which spans the entire width of the table and has text equivalent to the corresponding data-time value.
Example start:
<table>
<tr style="display:none;">
<td data-time="7:15 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="9:30 pm"></td>
<td></td>
<td></td>
</tr>
<tr style="display:none;">
<td data-time="9:30 pm"></td>
<td></td>
<td></td>
</tr>
<table>
Example goal:
<table>
<tr style="display:none;">
<td data-time="7:15 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">8:00 pm</td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">9:30 pm</td>
</tr>
<tr>
<td data-time="9:30 pm"></td>
<td></td>
<td></td>
</tr>
<tr style="display:none;">
<td data-time="9:30 pm"></td>
<td></td>
<td></td>
</tr>
<table>

Is this what you are looking for:-
http://jsfiddle.net/9XTat/
$('#addRow').click(function(){
$('td[data-time]',$('tr').not('tr[style="display:none;"]')).each(function(i,o){
var lastelement = $('td[data-time="' + $(this).data('time') + '"]').first();
if((lastelement.parent('tr').prev('tr.textRow')).length == 0)
{
var newelement = '<tr class="textRow"><td colspan="3">' + $(this).data('time') + '</td> </tr>'
lastelement.parent().before(newelement);
}
});