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

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);
}
});

Related

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>

Jquery or Javascript create ranking column based from total

I want to compute and fill the ranking in the image below based on the total. How will be able to achieve this using js/jquery?.
I have created the table manually (dynamically also) using HTML. I also have button to generate the rank (which I know how to do it). I just want to have a function or way to add rank to my column.
So that rank should be in order (1, 2, 2, 3).
<table id="table" class="table table-stripe table-bordered">
<thead>
<tr>
<td class="d-none">ID</td>
<td>Name</td>
<td>Crit1</td>
<td>Crit2</td>
<td>Crit3</td>
<td>Crit4</td>
<td>Crit5</td>
<td>Total</td>
<td>Rank</td>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none">2</td>
<td>aaaa</td>
<td>20</td>
<td>0</td>
<td>50</td>
<td>0</td>
<td>0</td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">3</td>
<td>Greggggg</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">4</td>
<td>Jjjjoohhn</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">5</td>
<td>asdada</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
</tbody>
</table>
Any help will be appreciated.

You have to organise the total score by getting all the values, sort and remove duplicates.
And you can assign the rank value by $('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
You can do something like:
$(function() {
//Get all total values, sort and remove duplicates
let totalList = $(".total")
.map(function() {return $(this).text()})
.get()
.sort(function(a,b){return a - b })
.reduce(function(a, b) {if (b != a[0]) a.unshift(b);return a}, [])
//Assign rank
totalList.forEach((v, i) => {
$('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table table-stripe table-bordered">
<thead>
<tr>
<td class="d-none">ID</td>
<td>Name</td>
<td>Crit1</td>
<td>Crit2</td>
<td>Crit3</td>
<td>Crit4</td>
<td>Crit5</td>
<td>Total</td>
<td>Rank</td>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none">2</td>
<td>aaaa</td>
<td>20</td>
<td>0</td>
<td>50</td>
<td>0</td>
<td>0</td>
<td class="total">80</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">3</td>
<td>Greggggg</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">65</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">4</td>
<td>Jjjjoohhn</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">65</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">5</td>
<td>asdada</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">50</td>
<td class="Rank"></td>
</tr>
</tbody>
</table>
You can even make it shorter like
$(".total")
.map(function(){return $(this).text()})
.get()
.sort(function(a,b){return a - b })
.reduce(function(a, b){ if (b != a[0]) a.unshift(b); return a }, [])
.forEach((v,i)=>{
$('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
});

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")

JQuery : find tr(class = x) get td(class =y) count td variables and attribute, than change tr accordingly

<table class="tbl">
<tr>td class= "colorcode" colspan ="5"/><tr>
<tr class="ms.alternative>
<td></td>
<td class="bkcolor"></td>
<td class="bkcolor"></td>
<td class="bkcolor"></td>
<td> </td>
</tr>
<tr><td colspan="5"/></tr>
<tr>td class= "colorcode" colspan ="5"/><tr>
<tr class="ms.alternative>
<td></td>
<td class="bkcolor"></td>
<td class="bkcolor"></td>
<td class="bkcolor"></td>
<td></td>
</tr>
<tr><td colspan="5"/></tr>
<tr>td class= "colorcode" colspan ="5"/><tr>
<tr class="ms.alternative>
<td></td>
<td class="bkcolor"></td>
<td class="bkcolor"></td>
<td class="bkcolor"></td>
<td></td>
</tr>
<tr><td colspan=""/></tr>
</table>
I am new to jquery.. please help me to figure it out.
In the scenario above:
Now my question is: how would you select all tr with
class ms.alternative than find(td.bkcolor)
get the color of <td.bkcolor>
Now, if:
(number of majority of background color of '`tr.ms.alternative`' '`td.bkcolor`'
is red)
{
change td.colorcode.css(background-color:'red')
}

$('tr[class="ms.alternative"]').find('td[class="bkcolor"]').css("background-color");
will provide you the backgound color
$('tr[class="ms.alternative"]').find('td[class="bkcolor"]').css("background-color","new color");
will change the background-color in your case

Jquery nextUntil and row cells

There is a html table with the following structure:
<table>
<tr class="header">
<td><img id="test_click" src=""></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr class="header">
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
How can i hide all table rows between two using jquery?
This code does not work as i suspected :(
$("#test_click").click(function(){
$(this).parent().parent().nextUntil('tr.header').find('tr').hide();
});

nextUntill already selects your trs. No need to .find anything:
$("#test_click").click(function() {
$(this).parent().parent().nextUntil('tr.header').hide();
});
http://jsfiddle.net/nMBrw/

Categories

Resources