Get a specific column in a table - javascript

What I want is to get a specific table column using jquery, so far what I have is this, that selects the first column:
table.find(tr > td:first-child)
But I want to be able to select any column so I can copy it to another table, is there a way to do this for example :
td:n-child
so I can send it the number of column and get all the data from that specific column.

Try this:
for instance for selecting the 2nd element, you would:
table.find("tr > td:nth-child(2)");

table.find("tr > td").eq(n);
I just wrote this from the heart, so I can't confirm if it works, but I think this is the syntax to do this.

:eq() Selector : Description: Select the element at index n within the matched set.
You could use :eq() Selector, e.g :
$('tr > td:eq(n)')
Hope this helps.
$('td:eq(2)').css('background-color','green')
$('tr:eq(2) td:eq(0)').css('background-color','red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr>
<td>1</td>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>2</td>
<td>A2</td>
<td>B2</td>
</tr>
<tr>
<td>3</td>
<td>A3</td>
<td>B3</td>
</tr>
</table>

Related

Add an attribute to a sibling of element when the child element is clicked

I have a table with several columns, which looks like this:
<tr role="row" class="odd">
<td class="sorting_1">
<button id="1" class="btn btn-info btn-sm _edit_btn">Edit</button>
</td>
<td>1</td>
<td>Asht</td>
<td>5</td>
<td>16</td>
<td>5</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>Sughd</td>
<td>2</td>
<td>3505207000000</td>
<td>3</td>
<td>2</td>
<td>15</td>
<td>5</td>
</tr>
What I want to do is to add an attribute to each <td> element on the button click of the button which is located on the very first <td> of the table.
I use jQuery for this purpose. I tried to do it using the siblings function but it doesn't work as the <td> elements are not siblings of the <button> element but of the other <td> elements.
To do this you can use closest() to find the parent tr of the button, then find() to get the td, like this:
$('button').click(function() {
$(this).closest('tr').find('td').attr('foo', 'bar');
});
If you'd prefer to use siblings() as you mentioned, then you can get the parent td and use siblings() on that:
$('button').click(function() {
$(this).closest('td').siblings().attr('foo', 'bar');
});
Note that this version will not add the attribute to the first td element, if that was your intention.
You can traverse to closest tr element using .closest() method and then find td in it:
$('button').click(function(){
$(this).closest('tr').find('td').attr('someattr','attrval');
});
You can use this one for two cases:
$("button").click(function(e) {
//if you want to add attribute to all tds then use this line
$(this).closest("tr").find("td").attr("your-attribute", "value");
//if you want to add attribute to all tds except the first one then use this line
$(this).closest("tr").find("td:not(.sorting_1)").attr("your-attribute", "value");
});

Table sorting from multiple tables

i'm using jquery and the jquery plugin "tablesorter" (http://tablesorter.com/docs/) to sort a table.
now I have the difficult, that I have following html (an other way is impossible):
<table class="tablesorter">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>Bob</td>
<td>24</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>James</td>
<td>33</td>
</tr>
</table>
<table>
<tr>
<td>5</td>
<td>PJ</td>
<td>28</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>Sue</td>
<td>39</td>
</tr>
</table>
In every table is one line. Now I want to sort this many tables as it is one table.
Is there any solution for this problem?
I've found an attempt here: http://jsfiddle.net/Mottie/8cg4f/31/
But there are ony two tables and the script only sort the data from one table.
Target the tables you want to pillage, drill down to the <tr>s, move them to where they need to be, climb back up to the (now empty) <table>s, throw them away. jsFiddle
$('table:not(.tablesorter)').find('tr').appendTo('.tablesorter')
.end().end().remove();
EDIT: as per comment I have simulated "spacing between <tr>s" by using padding on the <td>s jsFiddle.
If you have other requirements for the final page, just let me know what you'd like to end up with and I can help create a solution that will yield valid html which displays consistently for all your users.
Try something like this:
var $table = $(".tablesorter");
$table.nextAll("table").children().appendTo($table).end().remove();
$table.tablesorter();

Remove table row that contains a table

I have html that displays a table similar to:
<table>
<tr>
<th>col1</th>
<th>col2</ht>
</tr>
<tr>
<td>0001</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2" id="detailsTable">
<table>
<tr>
<th>one</th>
<th>two</th>
</tr>
<tr>
<td>xxxxxx</td>
<td>xxxxxxx</td>
</tr>
</table>
</td>
</tr>
There is a column of expand and contract buttons on the outer table so that the nested table is only shown when the user clicks to expand.
The expansion works and the table gets displayed. However when when I try and remove the row from the outer table that contains the child table it doesn't work.
I had code like:
var rowIndex = $(this).parent().parent().prevAll().length;
$("table[id$=gvParentAccounts] tr").eq(rowIndex + 1).remove();
If the row only contains text it works as I'd like and removes the row, however if like in this case the row contains a table it is unable to remove the row as required.
I'm using ASP.Net and jQuery for this.
Thanks
Alan.
How about:
$(this).parent().parent().remove();
I'm not sure if this is exactly what you have, but here's a JSFiddle demonstrating that it works:
http://jsfiddle.net/9TQG9/1/
EDIT: Actually this:
$(this).parents("tr").eq(0).remove();
would be much nicer and more reliable. See here:
http://jsfiddle.net/9TQG9/2/

Remove all but a specific row from a table

I want to remove all rows apart from the row with id 'row0' from a table:
<table class="mytable">
<tr id="row0" class="myrow">
<td>aaa</td>
</tr>
<tr class="myrow">
<td>bbb</td>
</tr>
<tr class="myrow">
<td>ccc</td>
</tr>
</table>
But the following JQuery code removes ALL rows:
$('.mytable').children().not('#row0').remove();
Could someone explain why this happens? I would think that the child with id 'row0' would be excluded, but obviously that's not the case.
I have found another way to do this but still curious why the above method doesn't work:
$('.mytable').find('tr:not(#row0)').remove();
Because the children of a table element are thead, tfoot or tbody elements. A tbody element is always created in the generated DOM, even if it is not explicitly written in the HTML code.
You can also do:
$('.mytable tr').not('#row0').remove();
or
$('#row0').siblings().remove();

How do I prevent a jQuery Selector from including nested elements?

I'm new to jQuery so hopefully there is an easy answer to this.
I have html similar to:
<table id="dataTable">
<tr> <!-- I want this row -->
<td>...</td>
<tr>
<tr>
<td>
<table>
<tr> <!-- I do not want this row -->
<td>...</td>
</tr>
</table>
</td>
<tr>
</table>
I am using jQuery similar to this:
$("#dataTable tr").length;
I would expect length to equal 2, but its returning 3 (includes the <tr> in the nested table.) My question is: How do I prevent the 3rd <tr> from being selected?
I know that I could add an ignorethisrow class to the last row and exclude that from my results, but I'd prefer an option that allows me to control the depth that the select engine searches.
I believe the syntax:
$("#dataTable > tr").length
mean "just tr's on the next level".

Categories