I have a list in a table that is alphabetically ordered like so.
<tbody>
<tr>
<th><strong>A</strong></th>
</tr>
<tr>
<td class="hide-me">Ants</td>
</tr>
<tr>
<td class="hide-me">Animals</td>
</tr>
<tr>
<td class="hide-me">Apples</td>
</tr>
<tr>
<th><strong>B</strong></th>
</tr>
<tr>
<td>Bars</td>
</tr>
<tr>
<td class="hide-me">Bats</td>
</tr>
<tr>
<td class="hide-me">Bananas</td>
</tr>
<tr>
<th><strong>C</strong></th>
</tr>
<tr>
<td>Cans</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Cats</td>
</tr>
</tbody>
I use the $('table tr:has(td.hide-me)').hide() method to hide any of the elements that I don't want shown. However I also want to be able to hide the table headers if the table rows that contain normal table cells are hidden.
In the case above I would like to hide <tr><th><strong>A</strong></th></tr> because it has all of the following table rows hidden but not the the <tr><th><strong>B</strong></th></tr> because not all of the table rows are hidden.
I am relatively new to Jquery and am not sure how best implement conditional statements for a situation like this.
The first thing I did was put a class on the tr to indicate that that row contained a header. This makes it much easier to tell which rows are headers, rather than having to interrogate if they contain a th.
The second thing I did was change your hide expression for the .hide-me to find the hide me first, then find their parent trs, and hide them. This way the selector doesn't have to find the tr and check if each one has a hide me.
Then finally the logic finds all the headers, and shows them, so if any were previously hidden, they would be visible. It then filters the headers and only returns the ones that do not have any following trs that are not hidden. Havin the headers that do not have any visible following trs, it then hides them.
$('.hide-me').closest('tr').hide();
$('.header').show().filter(function(){
return $(this).nextUntil('.header').filter(':not(:hidden)').length < 1;
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="header">
<th><strong>A</strong></th>
</tr>
<tr>
<td class="hide-me">Ants</td>
</tr>
<tr>
<td class="hide-me">Animals</td>
</tr>
<tr>
<td class="hide-me">Apples</td>
</tr>
<tr class="header">
<th><strong>B</strong></th>
</tr>
<tr>
<td>Bars</td>
</tr>
<tr>
<td class="hide-me">Bats</td>
</tr>
<tr>
<td class="hide-me">Bananas</td>
</tr>
<tr class="header">
<th><strong>C</strong></th>
</tr>
<tr>
<td>Cans</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Cats</td>
</tr>
</tbody>
</table>
Related
I have the following React JSX code for a table:
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</table>
And I want to add a footer with 2 columns filling up the entire width but I'm having trouble doing that. I tried colspan but its not working as expected. How can I do this?
You can do this with colspan, all you need to take into account is that colspan should be integers (1,2,3) and cannot have something like 1.5.
So the trick is to also use colspan in your first row and give them all a colspan of 2, such that the total is 6 which you can divide by two columns of 3.
<table border="1">
<tr>
<td colspan="2">col1</td>
<td colspan="2">col2</td>
<td colspan="2">col3</td>
</tr>
<tr>
<td colspan="3">footer1</td>
<td colspan="3" >footer2</td>
</tr>
</table>
Just colspan your footer cell on all the 3 cells. Then add a separate table within that footer table and make 2 columns. Don't forget to make that inner table as lean as possible (no border, no margin, .. as you need it)
<table border="1">
<tr>
<td>col1</td>
<td width="400">col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table width="100%">
<tr>
<td width="50%">footer left</td>
<td width="50%">footer right</td>
</tr>
</table>
</td>
</tr>
</table>
$(".rowIWanTtoReplace").replaceWith("<tr><td rowspan='11' class='n'>n</td><td rowspan='8'>n</td><td>t</td><td>n</td></tr><tr><td>u</td><td>n</td></tr><tr><td>v</td><td>n</td></tr><tr><td>w</td><td>n</td></tr><tr><td>x</td><td>n</td></tr><tr><td>y</td><td>n</td></tr><tr><td>z</td><td>n</td></tr>");
td {
border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="station-device-table4">
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr class="rowIWanTtoReplace">
<td rowspan="11" class="s">foobar</td>
<td rowspan="7">foobar</td>
<td>n</td>
</tr>
</table>
I just wanted to check whether or not this should be the result of a replaceWith() in this situation:
If I have a table and on one row I apply replaceWith(), And What I replace it with is multiple table rows.
Shouldn't that just affect the HTML so when displayed multiple should show in that section?
i.e ------ TR 1 -----------
.replaceWith("<tr>x</tr><tr>y</tr>")
shouldn't the first row replace the other row. And the second row append after?
Or is there an alternative method?
Thanks.
Example code for situation:
<table class="station-device-table4">
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr class="rowIWanTtoReplace">
<td rowspan="11" class="s">foobar</td>
<td rowspan="7">foobar</td>
<td>n</td>
</tr>
</table>
JQuery example:
$(".rowIWanTtoReplace").replaceWith("<tr>
<td rowspan="11" class="n">n</td>
<td rowspan="8">n</td>
<td>t</td>
<td>n</td>
</tr>
<tr><td>u</td><td>n</td></tr>
<tr><td>v</td><td>n</td></tr>
<tr><td>w</td><td>n</td></tr>
<tr><td>x</td><td>n</td></tr>
<tr><td>y</td><td>n</td></tr>
<tr><td>z</td><td>n</td></tr>")
Note: This is made from backbone collections and stuff. I have outputted to the screen the html that it using to update. And put the code together as if it was normal jquery.
You cannot have linefeeds in strings unless you use template literals - also you had nested double quotes which also does not work.
In the original code you replaced a header cell with a table row which also did not compute.
This might be what you want:
$(".rowIWanTtoReplace").replaceWith(`<tr>
<td rowspan="11" class="tvmStatus">TVM Status</td>
<td rowspan="8">Component Events</td>
<td>t</td>
<td>n</td>
</tr>
<tr><td>u</td><td>n</td></tr>
<tr><td>v</td><td>n</td></tr>
<tr><td>w</td><td>n</td></tr>
<tr><td>x</td><td>n</td></tr>
<tr><td>y</td><td>n</td></tr>
<tr><td>z</td><td>n</td></tr>`)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="station-device-table4">
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr class="rowIWanTtoReplace">
<td rowspan="11" class="s">foobar</td>
<td rowspan="7">foobar</td>
<td>n</td>
</tr>
</table>
I have two html tables which I render in my react component and I want to create a third html table which is the concatenation of the first two tables. To be more specific I have a table:
<table>
<tbody>
<tr>
<td>Collaterals Value</td>
<td>Buying Power/Available Power</td>
<td>Market to Market</tr>
<td>Outstanding Order Margin</td>
</tr>
</tbody>
</table>
and another table like this:
<table>
<tbody>
<tr>
<td>fdsfdsfds</td>
<td>fdsfdsfds/td>
<td>fdsfsdfds</tr>
<td>fdsfdsfds</td>
</tr>
</tbody>
</table>
I want to create a table like
<table>
<tbody>
<tr>
<td>Collaterals Value</td>
<td>Buying Power/Available Power</td>
<td>Market to Market</tr>
<td>Outstanding Order Margin</td>
</tr>
<tr>
<td>fdsfdsfds</td>
<td>fdsfdsfds/td>
<td>fdsfsdfds</tr>
<td>fdsfdsfds</td>
</tr>
</tbody>
</table>
Any ideas of how I can implement this?
All you have to do is get the append the tr from the second table to the tbody of the first table. Javascript will take care of doing the removal from the second table as a part of the appendChild.
var tables = document.querySelectorAll("tbody");
tables[0].appendChild(tables[1].querySelector("tr"));
Table 1
<table>
<tbody>
<tr>
<td>Collaterals Value</td>
<td>Buying Power/Available Power</td>
<td>Market to Market</tr>
<td>Outstanding Order Margin</td>
</tr>
</tbody>
</table>
Table 2
<table>
<tbody>
<tr>
<td>fdsfdsfds</td>
<td>fdsfdsfds</td>
<td>fdsfsdfds</td>
<td>fdsfdsfds</td>
</tr>
</tbody>
</table>
I'm working with the following HTML:
<tr class="oddrow">
<td>row1</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
</tr>
<tr class="evenrow">
<td>row2</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
<!-- The above line is the one I need. --!>
</tr>
There are 2 such rows (row1 and row2), alternating as an oddrow then evenrow. I have the entire HTML as a string in my JavaScript/jQuery code. I also have the information of the two three-letter abbreviations: in this example, WSH and SAC. What I need is the third <td style="text-align:center;"> of the row2 row. I should point out that there are several tables of row1 and row2 on the page, so I need a general selector. What I have been doing is just grabbing all the data in all the rows then parsing it from there, but the inconsistency of the data is making that more difficult. Is there a quick and dirty jQuery that will point me to the data I need?
I was thinking something like $("tr td:contains(" + abbrev + ") td:contains('row2')").text();, but that doesn't get it.
Can anyone help?
Your hierarchy in your selector is wrong, tds with the abbreviation are not an ancestor to the tds with the text of "row2"
You also need to ensure you have apostrophes around your abbrev variable.
Can you try:
$("tr td:contains('row2') td:contains('" + abbrev + "')").text()
Any chance you can add semantic classes instead? These sorts of selectors are gnarly to maintain.
Need a little help with jQuery and HTML(table).
Pls take a look at my jsfiddle page to see what I am gonna try to do.
http://jsfiddle.net/nori2tae/U25EK/
Each TD contains certain value (from 01 to 06) and has CLASS name which is related to its value and the lists of buttons above the TABLE.
When the page initially loaded, all those buttons are enabled that means all TABLE DATA are visible.
When I click to turn on/off the button, i want jQuery to observe ON/OFF status of buttons and if the status matches to the values of each table row, i want jQuery to toggleSlide(show/hide) TABLE ROW.
(sorry about my poor english and explanation...)
For example, if I turn off button01 the row1 will be hidden. Then I turn button4 and button6 off, the row5 will be hidden. And so on or vice versa...
HTML:
<ul id="listBtns">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
<table id="tblResult">
<thead>
<tr>
<th></th>
<th>01</th>
<th>02</th>
<th>03</th>
<th>04</th>
<th>05</th>
<th>06</th>
</tr>
</thead>
<tbody>
<tr>
<th>row1</th>
<td class="val01">01</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>row2</th>
<td class="val01">01</td>
<td class="val02">02</td>
<td class="val03">03</td>
<td class="val04">04</td>
<td class="val05">05</td>
<td class="val06">06</td>
</tr>
<tr>
<th>row3</th>
<td class="val03">03</td>
<td class="val05">05</td>
<td class="val04">04</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>row4</th>
<td class="val02">02</td>
<td class="val04">04</td>
<td class="val05">05</td>
<td class="val06">06</td>
<td></td>
<td></td>
</tr>
<tr>
<th>row5</th>
<td class="val04">04</td>
<td class="val06">06</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>row6</th>
<td class="val03">03</td>
<td class="val02">02</td>
<td class="val04">04</td>
<td class="val06">06</td>
<td class="val05">05</td>
<td></td>
</tr>
</tbody>
</table>
JS:
$('#listBtns a').click(function() {
$(this).toggleClass('on off');
//and some function continues...
});
I am kinda stack and only can come up with very poor and inefficient codes(that perhaps might not work completely...) and I dont know which jQuery selector to use. please help me out.
Thanx.
Need one line only --
$(function() {
$('#listBtns a').click(function() {
$(this).toggleClass('on off');
$("#tblResult tr").eq($(this).text()).toggle('on off');
});
});
See demo
This will work as long as text and row number matches.
You can also use some thing like below, give an id to your table like "my_table" so that in case of multiple table s in a page it will affect only specific table. and by using 2,3 you can refer row number #2 and #3 should be hide and #4, #5 means row number #4 and #5 should be
display.
$("#my_table tr:nth-child(2)").hide();
$("#my_table tr:nth-child(3)").hide();
$("#my_table tr:nth-child(4)").show();
$("#my_table tr:nth-child(5)").show();
Call it on click event of any thing and check.