Better way for selecting table row? - javascript

I have a following (simplified) table structure:
<table class="form-table">
<tbody>
<tr>
<tr><--Need to select and add class on this guy based on h3 class "check"-->
<th scope="row">
<h3 class="check">Default Checbox:</h3>
</th>
<td>
</tr>
</tbody>
</table>
So i want to select "table row" above the h3 class "check". Table is generated dynamically so i can't just use :eq() ,:gt() or :lt().
To select this guy i am using this code:
$('tbody tr').find('h3.check').parent().addClass('cool');
$('.cool').parent().addClass('until');
But the problem is that i am giving an unnecessary class "cool" in order to make a selection.
<table class="form-table">
<tbody>
<tr>
<tr>
<tr class="until"><--Class successfully added but..-->
<th class="cool" scope="row"><--An extra Class in order to select "table row"-->
<h3 class="check">Default Checbox:</h3>
</th>
<td>
</tr>
</tbody>
</table>
Is there a better way for doing this (without adding unnecessary Class) ?

You can use .has()
$('tbody tr').has('h3.check').addClass('cool');
or :has
$('tbody tr:(h3.check)').addClass('cool');

Related

removing some empty table details and adding classes and width

I am trying to remove the empty code from table with jquery and add some class to the table tags
like i am trying to remove <td class="faux_align"></td> and <th class="faux_align"></th> from the table and check if the table already has a class of table - do nothing and if it does not have a class of table' - do add the classtable` to the table tag.
and also checking if the width attribute is defined within table and if not, add width as 100% and if defined but width is not 100%, make its width 100%
I am trying something like this:
$('table > tr > td').remove();
and same with th tag, but i am confused how do i do with remaining this in one single jquery function.
$('table').addClass('table').attr('width', '100%').find('td.faux_align, th.faux_align').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="">
<tr>
<th class="faux_align">faux</th>
<th>text</th>
</tr>
<tr>
<td class="faux_align">faux</td>
<td>text</td>
</tr>
</table>
<table class="table">
<tr>
<th class="faux_align">faux</th>
<th>text</th>
</tr>
<tr>
<td class="faux_align">faux</td>
<td>text</td>
</tr>
</table>

Get row elements without using "closest" selector - jquery javascript

I have a table with 4 columns . 4th column is a button (not shown in below code). When I click on the button in a row, I want to get row elements.
I have done it using closest selector. Is there any way to find table row element "Without using closest". This is the requirement for some reason.
Please assume there is a button at end of each row
<table id="food">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr class='details'>
<td>1</td>
<td>Apple</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>2</td>
<td>Mango</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>3</td>
<td>Grape</td>
<td>Fruit</td>
</tr>
</tbody>
</table>
Here is the existing code, I need to replace closest. It will be awesome if I can use class names like $(this).somethin('.details');
$('#button1').click(function(){
var row = $(this).closest('tr');
//Do some stuff
})
Thanks
Use parents() and pass a class selector like
$('#button1').click(function(){
var row = $(this).parents('.details');
//Do some stuff
})
Note, you could also use closest in this case and pass the class selector
var row = $(this).closest('.details');

How Remove <td> without CLASS using Jquery

Can anyone give an idea on how to remove <td> inside <body> without CLASS "response" usig Jquery ? Please see may HTML Code below for sample .
CODE:
<table id="tblFruit" class=" table striped bordered hovered">
<thead>
<tr>
<th>Fruit Name</th>
<th>Color</th>
<th>Kilos</th>
<th>Price</th>
</tr>
</thead>
<tbody id="mybasket">
<tr>
<td class="response">Apple</td>
<td>Apple</td>
<td class="response">Red</td>
<td>Red</td>
<td class="response">5 kilos</td>
<td>5 kilos</td>
<td class="response">110.00</td>
<td>110.00</td>
</tr>
<tr></tr>
</tbody>
</table>
Try:
$('td').not('.response').remove();
Try to use :odd selector at this context to remove the td elements with out using the class,
$('#mybasket > tr > td:odd').remove();
DEMO
add css prperty in code
you can add inline css also
<td class="response" style="display:none">Red</td>
<td>Red</td>
or make class
.table td{
display:none;
}
$('td:not(.response)').remove();
Thanks all guys for idea, i found the answer
$('#bodyInfoMilestone tr > td').not('.response').remove();

How to use Javascript to make several rows in an HTML table invisible

I have an HTML table and there are several rows in that table that I want to toggle to either be visible or invisible as a group. Since I can't simply put a <div> around them, what would be a good way to 'group' them together.
try making your html in such a way you can hide/visible and apply your css/js.
<table>
<tr class="visible"><td></td></tr>
<tr class="visible"><td></td></tr>
<tr class="hidden"><td></td></tr>
<tr class="visible"><td></td></tr>
<tr class="visible"><td></td></tr>
<tr class="hidden"><td></td></tr>
<tr class="visible"><td></td></tr>
</table>
You can group them in separate <tbody> elements (since you can't use <div> elements, as you stated).
<table id="mytable">
<tbody>
<!-- some rows to group -->
</tbody>
<tbody>
<!-- some rows to group -->
</tbody>
<tbody>
<!-- some rows to group -->
</tbody>
</table>
Then select the tbody you want.
var table = document.getElementById("mytable");
table.tBodies[1].style.display="none";
You could use the tbody tag. You can set the id attribute on it.
tbody id="customer1"
<table>
<thead>
<tr><th>Customer</th><th>Order</th><th>Month</th></tr>
</thead>
<tbody id="customer1">
<tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody id="customer2">
<tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody id="customer3">
<tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
</tbody>
</table>
Then with JQuery you can easily hide/show.
I would recommend a jQuery solution to you. Provide all of your <tr> tags a common class and a unique id (for individual selection). Then you can use jQuery to grab them.
$('tr .commonClass').css("display", "none");
You could also just swap classes with the individual ids
$('#someTR').removeClass("visibleClass");
$('#someTR').addClass("invisibleClass");
Note: For the record I prefer #Yograj Gupta's method, but he beat me to the punch posting.
Pure JavaScript jsfiddle
<table>
<tr class="show"><td></td></tr>
<tr class="show"><td></td></tr>
<tr class="hide"><td></td></tr>
<tr class="show"><td></td></tr>
<tr class="show"><td></td></tr>
<tr class="hide"><td></td></tr>
<tr class="show"><td></td></tr>
</table>
JS:
var trGroup = document.getElementsByClassName("hide");
for(var k=0; k < trGroup.length; k++){
trGroup[k].style.display = "none";
}
Place a common class on the rows which you want to group. than work on that like
or you have some set of rules for visible or hidden, rows group you can simple use css + javascript like
HTML
<table id="myGroupTab">
<tr class="group1"><td> </td></tr>
<tr class="group1"><td> </td></tr>
<tr class="group2"><td> </td></tr>
<tr class="group2"><td> </td></tr>
<tr class="group1"><td> </td></tr>
</table>
you can write some css rules like
CSS
#myGroupTab.showGrp1 .group1{ display:block;}
#myGroupTab.showGrp1 .group2{ display:none;}
#myGroupTab.showGrp2 .group1{ display:none;}
#myGroupTab.showGrp2 .group2{ display:block;}
You can use Javascript like
JS
document.getElementById('myGroupTab').className = "showGrp1"; //To Show Only tr.group1
document.getElementById('myGroupTab').className = "showGrp2"; //To Show Only tr.group2
Its even simple to make display none or block applying a class on parent, instead of looping every tr...
Or by jQuery you can achieve this, make them visible or hidden using jQuery.
$("tr.group1").hide() or $("tr.group2").show()
#user1689607 solution using multiple tbody(s) in table is also a good solution.

Copy cell value from table to textbox

I have the following table. I want to copy Id value on the seleced row to the text box. If I click on link "Select" in the first row the text box value will 0001.
If the table needs modification to get result better and faster, please leave your suggestion.
<div>
<input id="selectedId" type="text" />
</div>
<table cellspacing="1" class="tablesorter" id="nameList">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Id</th>
<th class="header">Gender</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Akom Smith</td>
<td>0001</td>
<td>M</td>
<td>Select</td>
</tr>
<tr>
<td>Amara Sahara</td>
<td>0002</td>
<td>F</td>
<td>Select</td>
</tr>
<tr>
<td>John Lache</td>
<td>0003</td>
<td>M</td>
<td>Select</td>
</tr>
</tbody>
</table>
try this,
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td').eq(1).text();
$('#selectedId').val(id);
return false;
});​
simple cool demo
added notes for the comment below.
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td.id').text();
$('#selectedId').val(id);
return false;
});​
updated demo
Well, you know your key is the second td in the row. You can use the :nth-child selector like this:
<script type="text/javascript">
var getUniqueId = function() {
return $('td:nth-child(2)').text();
}
</script>
Of course you need a way to identify the correct , but I assume the code is supposed to be called from each and there you can use the parent selector.
Otherwise I'd put an id attribute in each row to make selecting easier.

Categories