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".
Related
This may seem like its been asked before, but before calling it a duplicate please fully read ;)
I have a table
<table id="MyTable">
<tr class="k-master-row"></tr>
<tr class="k-detail-row"></tr>
<tr class="k-master-row"></tr>
<tr class="k-master-row"></tr>
<tr class="k-detail-row"></tr>
<tr class="k-master-row k-state-selected"></tr>
<tr class="k-detail-row"></tr>
<tr class="k-master-row"></tr>
<tr class="k-master-row"></tr>
<tr class="k-detail-row"></tr>
</table>
Each row that has a class of 'k-master-row' can have a row of class 'k-detail-row'. If the k-master-row has a related k-detail-row then its directly below it like this
<tr class="k-master-row"></tr>
<tr class="k-detail-row"></tr>
Now the issue I am running into is that I need to remove all the k-detail-rows, EXCEPT the detail row that is this
<tr class="k-master-row k-state-selected"></tr>
<tr class="k-detail-row"></tr>
So if the k-master-row has a class of k-state-selected, I need to keep its k-detail-row and remove the other k-detail-rows.
I know I can remove the k-detail-rows by using
$('#MyTable .k-detail-row').remove()
but that removes all the k-detail-rows, which is not what I want..
So, in short, using either jquery or javascript, how do I remove all the detail rows that is not related to the master-row that has class of k-state-selected?
The logic appears to be that you wish to delete all .k-detail-row elements that do not immediately follow an element with k-state-selected.
In which case:
$('#MyTable :not(.k-state-selected) + .k-detail-row').remove();
In other words, delete all .k-detail-row elements whose immediately-preceding sibling is not an element with .k-state-selected.
I have a table like the following
the table as rowspans because for some users I need to have 2 lines (Like you see at column 'D')
I am trying to use datatables:
<table class="table table-bordered table-hover table-striped" id="myTable">
(...)
</table>
And I call this at the begining of the code:
<script>
$( document ).ready(function() {
$('#myTable').DataTable();
});
</script>
But I have this error:
TypeError: i is undefined
And the table is not like a datatable type!
Maybe it doesn't work with rowspans?
Any idea??
FWIW you can also get this error if you don't have the same number of <td></td> elements in every row. Make sure you aren't adding any rows with nav buttons or links or anything like that that may not be formatted the same way as the other rows.
jQuery DataTables plug-in doesn't support ROWSPAN attribute by default. However there is a RowsGroup plugin for jQuery DataTables that groups cells together to make them look like as if ROWSPAN attribute is used.
See this example for code and demonstration.
See jQuery DataTables – ROWSPAN in table body TBODY for more details.
For future referer.
It is because you are using Rowspan or colspan which is not supportable.
If you want to use colspan you can use it outside </tbody>.
Thanks.
This problem happens if your table is not well formed, for example you should have
<table>
<thead>
<th>
<tbody>
<tr>
<td>
And then the id of the table should not overlap with id of any thing else on the same page. Other wise you will get errors like i is udefined or c is undefined.
I'd say your table is not a data table because you have undefined data and the 'i' referred to is the internal iterator of the DataTable loop, the use of rowspans is the problem - I would redesign your table to have an entire row for each piece of data (in your example 250 would require an entire row with duplicate values for all other columns except D) - it is wholly possible to use css to hide values that are duplicated for the same visual effect, this would allow datatable filtering to still work on those rows (although you may need some hooks to reveal hidden data when these 'extra' rows are filtered).
I was facing the same issue. The main reason for the error is due to using the colspan & rowspan. Because the jQuery DataTables plug-in does not support them and hence causing the error.
TypeError: i is undefined
So, If you are using any colspan or rowspan within any <tr></tr> inside the <tbody></tbody> then make sure that each <tr></tr> having the same no of <td></td> for each row. If not, then repeat the <td style='display:none'></td> to match the same no e.g
<table border='1' cellspacing='2'>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">name</td>
<td>200</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
<tr>
<td >300</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
</tbody>
</table>
I think by following the above suggestion will help you sure.
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>
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/
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();