I wish to get the number of all TR elements that have a input element in them somewhere. How should I proceed ?
Html :
<tbody>
<tr>
<td>Ignore this item 1</td>
</tr>
<tr>
<td>Ignore this item 2</td>
</tr>
<tr>
<td><input blablabla>... Include this TR...</td>
</tr>
</tbody>
Thanks!
$('tr:has(input)').length
Related
If I have the following table, which I can't manually touch, but can apply javascript to...
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
...when the DOM loads fully, how can I remove every instance of <tr><td height="10"></td></tr> from the above table via jQuery or raw JavaScript? I don't need that row at all and its causing design issues for me. This is my first time trying to learn how to replace a full pattern of elements.
Hopefully, this is doable via JavaScript?
This should do the trick.
jQuery
$('td[height="10"]').parent().remove();
https://jsfiddle.net/uzv3fn2e/1/
Vanilla JS
Array.from(document.querySelectorAll('td[height="10"]')).forEach(td => td.parentNode.remove());
https://jsfiddle.net/t7y6aqc5/
You can use :has() selector to select tr that has td with specific attribute
$("tr:has(td[height='10'])").remove()
$("tr:has(td[height='10'])").remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
without using jquery javascript has also remove()
document.querySelectorAll("td").forEach(el => el.getAttribute("height") === "10" && el.parentNode.remove())
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
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>
$(".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>
Say I have the following table:
<table class="table questions">
<tr>
<td class="someClass">Some data</td>
<td class="someOtherclass">Some data</td>
</tr>
<tr>
<td class="someOtherClass">Some data</td>
<td class="someOtherclass">Some data</td>
</tr>
<tr>
<td class="someOtherClass">Some data</td>
<td class="someClass">Some data</td>
</tr>
</table>
How would I get the total of table data where they had the class value of someClass? e.g. for this table the total would be two.
Just use .length to find out how many there are
$('.questions .someClass').length // will return 2 since there are 2 rows
Assuming that you want to count the number for elements within a table with .someClass
$('.someClass', '.questions').length
or
$('.questions').find('.someClass').length //faster
I have several tables which looks like these below:
<table id="table1">
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</a></td>
<td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
<td>Item 2</a></td>
<td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
<td>Item 3</td>
<td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>$total </td>
</tr>
</table>
<table id="table2">
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</a></td>
<td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
<td>Item 2</a></td>
<td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
<td>Item 3</td>
<td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
<td>Item 4</td>
<td><input type="text" name="sum4" id="sum4" /></td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>$total</td>
</tr>
</table>
Does anybody know if there is a possibility to sum item prices for each input (seperately for table1, table2, etc..)
And at the end print sum of items from all items?
You'll need a dom manipulator like jQuery or simply javascript. I'd give the fields a class to make it even easier--say, "sum". Then you can grab all the children "sum"s from the parent tables. Parse their value to an int and add. Not too bad.
Here's a working JS fiddle example
Better way is not to call different elements with similar IDs, it's invalid way. But even if so - you can perform calculations for every table simply working with inputs in this table.
Algorithm:
You run loop for all <table> tags.
For every <table> tag you find all <input>s (no matter what IDs they have);
Calculate total sum for all inputs for current table.
You can do this with JavaScript but better for you is jQuery.
BUT: don't call HTML DOM elements with similar IDs. It's wrong!!!
this should be pretty easy with jquery, assuming you can add a class name called "line-item" or something to each input and a class name "total" to the cell which should display calculated sum, you can do
function calculateSum(tableId){
var sum = 0;
$(tableId + ' .line-item').each(function(){
var value = parseFloat($(this).val().trim());
if(value){
sum += parseFloat($(this).val());
}
});
$(tableId + ' .total').html(sum);
}
and invoke this function with the id of the table for which you want.
If you cannot add a class name, this don't get tuffer even a single bit, but instead of .line-item try to put just input, it should do the trick in this scenario. Instead of .total you can write tr:last-child td:nth-child(2)
UPDATE: added "parseInt" to avoid string concatenation