Delete table rows if table data does not contain a specific class - javascript

I got a question regarding removing table rows within a table. I got the following HTML:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td>disabled</td>
<td>disabled</td>
<td>Specifies that a drop-down list should be disabled</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
I need a mechanism that looks whether the first <td> does not contain the html5badge class and delete the parent: <tr>.
To do this I created the following jQuery code:
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
var classname = $('table tr td').not('.html5badge');
console.log(classname)
for (i = 0; i < classname.length; i++) {
$(classname[i].parentNode).remove();
}
});
});
This works but it does not exactly what I want. As you can see in my JSFIDDLE it will delete all the table rows. But what I want is the following desired output:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
The desired output is that the <tr> that contained the text: disabled is been removed! Based on the fact that the <td> within this <tr> does not contained the class: html5badge.
How can I achieve this?

You can use filter() to retrieve the tr elements which do not contain td.html5badge and remove them:
$(".onlyhtml5").click(function(e) {
e.preventDefault();
$('tr').filter(function() {
return $(this).find('td.html5badge').length == 0;
}).remove();
});
Updated fiddle

simply make it
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
$('table tr td').not('.html5badge').each( funtion(){
$( this ).parent().remove();
} );
});
});

Related

Click a link in a table row based on text in that row

I have a table which has multiple rows and a link on the end.
I want to click on the link in the row which has the text I'm looking for. Example:
<table class="repeater large">
<tbody>
<tr>
<td headers="Cardholder ID" nowrap="nowrap">1234</td>
<td headers="Cardholder Name">JONATHAN</td>
<td headers="Client Name">Some Company</td>
<td headers="CardStatus">Closed</td>
<td headers="Card Last Four">1234</td>
<td headers="View" nowrap="nowrap"><a id="button" title="Activity" href="#">Activity</a></td>
</tr>
<tr class="alternaterow">
<td headers="Cardholder ID" nowrap="nowrap">5555</td>
<td headers="Cardholder Name">JONATHAN</td>
<td headers="Client Name">Some Company</td>
<td headers="CardStatus">Active</td>
<td headers="Card Last Four">555</td>
<td headers="View" nowrap="nowrap"><a id="button" title="Activity" href="#">Activity</a></td>
</tr>
</tbody>
</table>
I want to click the anchor on the row where Cardholder ID is '5555' I'm curious on how this would be done with CapserJS and finding the specific selector to do this.
I've tried breaking down the table into a array and getting the specific child number.
I was trying to create a way to get to that specific link in the table.
function getLinks() {
var links = document.querySelectorAll('#page > table');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('id');
});
}
I simple need to get that link on the row of my choice.
You could iterate over the table rows then get the id from the first element.
If the text equals the ID you are looking for then get the last element and click();
var rows = document.querySelectorAll('table tbody tr');
[].forEach.call(rows, function(tr) {
var td = tr.querySelector('td:first-child');
if (td.innerText === '5555')
tr.querySelector('td:last-child').click();
});
See the fiddle here

when i append something using the append function i dont have control over it using jquery

this is a simple demonstration of what i have, this is a table with a single row in it,
<table id="test_table">
<tr>
<td>name</td>
<td>age</td>
<td>action</td>
</tr>
<tr>
<td>test name</td>
<td>20</td>
<td class="delete">delete</td>
</tr>
</table>
and if i click on the delete td this row would be hidden
$('.delete').click(function(){
$(this).parent().parent().hide();
});
and i have a simple form of name and age, when i click on the add button it appends it to the table
$('#test_input').click(function(){
var name = $('#name').val();
var age = $('#age').val();
$('#text_table').append('<tr><td>'+name+'</td><td>'+age+'</td><td class="delete">delete</td></tr>');
});
the problem is i if i click on the new appended row it would hide like its not even there, what ever i try to do using the appended row, it wouldn't take it, is there something wrong that im doing ?
$('#test_table') should be $('#test-table').
And you should bind the on-click on the added row.
Another solution is to create a delegated event.
$('body').on('click', '.delete', function() {
$(this).parent().parent().hide();
});

<tr> tag is not creating new row?

This is the table I have in my view
#for (int i = 0; i < Model.AllCommonMatches.Length; i++)
{
<tr class="category">
<td>//somestuff</td>
<td>//some stuff</td>
<td>//some stuff</td>
</tr>
<tr class="subcategory" style="display:none">
#foreach (var person in Model.AllCommonMatches[i].AvailableAttendees)
{
<td>#person.Email #person.FirstName #person.LastName</td>
}
</tr>
}
And there is a click event for table rows
<script>
$(document).ready(function () {
$('.category').on('click', function () {
$(this).next('.subcategory').fadeToggle();
});
});
</script>
Whenever table row is click, it expands and shows some data
Here is the Generated Html
<tr class="subcategory" style="">
<td>biplov.cybercop#hotmail.com </td>
<td>yo#yo.com </td>
<td>foo#foo.com </td>
</tr>
as you can see there are three email address just below the dates.
I want each email to appear as separate row. So, when row with date is clicked each email occupies an entire row.
This is what I tried (puting <tr> tag inside the foreach statement)
foreach (var person in somecase)
{
<tr>
<td>#person.Email #person.FirstName #person.LastName</td>
</tr>
}
but now when the row with date is clicked with date it shows only one row.
Nothing happens now, when I click the row. New row doesn't appear to show emails
.next and select the very next DOM element. I think you actually want nextUntil :
$(this).nextUntil('.category').fadeToggle();
.nextUntil()
As stated in the jQuery documentation, next() gets the immediately following sibling.
Means only one, not 3.

jQuery search through table rows, hidden and visible

I've got a table where i display message history. By default the table displays only the last message between two people. But all of the messages are in the HTML code, just that they are set with display:none;
Im trying to make the search go through both visible and hidden tr rows.
What i currently have:
HTML:
<table cellpadding="0" cellspacing="0" width="100%" class="tDefault mytasks" id="history">
<tr>
<td>Finish design</td>
<td align="center"><strong class="grey">0%</strong></td>
</tr>
<tr>
<td>Aquincum HTML code</td>
<td align="center"><strong class="green">89%</strong></td>
</tr>
<tr style="display:none;">
<td>Aquincum cpp code</td>
<td align="center"><strong class="green">99%</strong></td>
</tr>
<tr>
<td>Fix buggy css styles</td>
<td align="center"><strong class="red">16%</strong></td>
</tr>
</table>
jQuery:
$("#search").keyup(function() {
var value = this.value.toLowerCase().trim();
$("#history tr").each(function (index) {
if (!index) return;
$(this).find("td").each(function () {
var id = $(this).text().toLowerCase().trim();
var not_found = (id.indexOf(value) == -1);
$(this).closest('tr').toggle(!not_found);
return not_found;
});
});
});
I have two problems:
For some reason the first tr is always visible even through it does not match the search. Try to search for buggy css. You'll see that the first tr is still there.
When i search for something, and then clear the search field. The second tr which is by default set to display:none; is visible. It has to somehow go back to a display:none state
jsfiddle:
http://jsfiddle.net/2T5yJ/
For first row index is zero. So its not reaching
$(this).find("td").each(function () {
Remove
if (!index) return;
And search filter would work correct
Update you can check if value="" and write logic to get back display of rows to original
Please check updated fiddle
FIDDLE

Multiple elements with same Id in Javascript

I have a case where a html file contains multiple elements with the same ID name.
The table row contains 5 columns of which I need to consider 2,3,4,5 columns data.
<tr id='total_row'>
<td>Total</td>
<td>%(count)s</td>
<td>%(Pass)s</td>
<td>%(fail)s</td>
<td>%(error)s</td>
<td> </td>
</tr>
I have the above code at several places in the file. I need to add the respective values using javascript.
An ID is unique in an html page. You can call it THE ID as well wrt a page. You cannot have same ID for two different tags in a single page. But you can use class instead of and ID. Know about it here
So your HTML can be like
<tr class='total_row'>
<td>Total</td>
<td>%(count)s</td>
<td>%(Pass)s</td>
<td>%(fail)s</td>
<td>%(error)s</td>
<td> </td>
</tr>
As an example with jquery you can do something like this,
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<table>
<tr class="one">
<td></td>
<td></td>
</tr>
<tr class="one">
<td></td>
<td></td>
</tr>
<tr class="one">
<td></td>
<td></td>
</tr>
</table>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
$(".one").eq(0).find('td').eq(0).html("I'm tracked");
// get 1st tr and get first td
$(".one").eq(1).find('td').eq(1).html("I'm tracked");
// get 2nd tr and get second td
$(".one").eq(2).find('td').eq(0).html("I'm tracked");
// get 3rd tr and get first td
});
</script>
</body>
</html>
But I guess this approach can be tedious.
Id should be unique and if you use the same id, javascript code refers only the first element. but if you still want to use same id than you may try the below code:
$(function(){
$('[id="total_row"]').each(function(){//run for every element having 'total_row' id
var $this = $(this);
$this.find('td').eq(1).text() //to get second column data
$this.find('td').eq(1).text('dummy text') //to set second column data
});
});
You can use XHTML:
<p id="foo" xml:id="bar">
Through XHTML you can apply similar ID to multiple Controls.
Similar questions can be found here:
http://www.c-sharpcorner.com/Forums/
While duplicate IDs are invalid, they are tolerated and can be worked around. They are really only an issue when using document.getElementById.
I'll guess that the table looks like:
<table id="t0">
<tr>
<td>-<th>count<th>Pass<td>Fail<td>Error<td>
<tr>
<td>-<td>1<td>1<td>0<td>0<td>
<tr>
<td>-<td>1<td>1<td>0<td>0<td>
<tr id='total_row'>
<td>Total<td><td><td><td><td>
<tr>
<td>-<td>1<td>1<td>0<td>0<td>
<tr>
<td>-<td>1<td><td>1<td>0<td>
<tr>
<td>-<td>1<td><td>0<td>1<td>
<tr id='total_row'>
<td>Total<td><td><td><td><td>
</table>
<button onclick="calcTotals();">Calc totals</button>
If that's correct, then a function to add each sub–section can be like:
function calcTotals(){
var table = document.getElementById('t0');
var rows = table.rows;
var row, totals = [0,0,0,0];
// For every row in the table (skipping the header row)
for (var i=1, iLen=rows.length; i<iLen; i++) {
row = rows[i];
// If it's a total row, write the totals and
// reset the totals array
if (row.id == 'total_row') {
for (var j=0, jLen=totals.length; j<jLen; j++) {
row.cells[j+1].innerHTML = totals[j];
totals[j] = 0;
}
// Otherwise, add values to the totals
} else {
for (var k=0, kLen=totals.length; k<kLen; k++) {
totals[k] += parseInt(row.cells[k + 1].innerHTML) || 0;
}
}
}
}
In addition to using classes, which works but feels kind of icky to me, one can also use data-* attributes.
<tr class='total_row' data-val-row-type="totals-row">
<td>Total</td>
<td>%(count)s</td>
<td>%(Pass)s</td>
<td>%(fail)s</td>
<td>%(error)s</td>
<td> </td>
</tr>
Then, in your script (jQuery syntax -- querySelectorAll has a similar syntax)
var $totalsRows = $("[data-val-row-type='totals-row']);
When you are in a team with a separate UI designer, this keeps the UI guy from ripping out and changing your class names to fix the new design layout and it makes it quite clear that you are using this value to identify the row, not just style it.

Categories