how to make two table rows be constantly attached - javascript

So I have a table that can sort its columns.
It is formated with multiple rows like this:
<tr><td>Data</td><td>Data</td></tr>
<tr><td> MetaData </td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td> MetaData </td></tr>
I want to be able to sort by the Data rows and have the metadata rows just follow the data rows that they have information about. However, since my sorting code can't tell the difference between the rows, I end up getting something like:
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td> MetaData </td></tr>
<tr><td> MetaData </td></tr>
How do I force the MetaData and the Data rows to be "tied" together?

Ok, first things first, when you have a table cell spanning two columns like that you're supposed to use the colspan attribute, e.g.
<tr><td colspan="2">MetaData</td></tr>
Now, in order to tie them together, I think you're going about it the wrong way. The meta data itself doesn't logically sit in a table row all of it's own, it should live in the same row as the actual data. You could do something like this with HTML5 data attributes :
<tr>
<td data-meta="MetaData">Data</td>
<td data-meta="MetaData">Data</td>
</tr>

You can group your rows using the <tbody>tag, which can appear more then once within <table> - maybe it's not so common to have multiple tbodies but it's actually possible.
<tbody>
<tr><td>Data</td><td>Data</td></tr>
<tr><td> MetaData </td></tr>
</tbody>
<tbody>
<tr><td>Data</td><td>Data</td></tr>
<tr><td> MetaData </td></tr>
</tbody>
You still have to tune your code others mentioned to sort the tbodies by their rows instead of sorting just the rows so it probably won't work out of the box, but this structure might help you then solving the problem.

do that using javascript
function sortNum(a, b) {
return 1 * $(a).find('.YOUR_DATA_TO_SORT').text() < 1 * $(b).find('.YOUR_DATA_TO_SORT').text() ? 0 : 1;
}
function sortTheTable(){
$(function() {
var elems = $.makeArray($('tr:has(.YOUR_DATA_TO_SORT)').remove())
elems.sort(sortNum)
$('table#TABLE_ID').append($(elems));
});
}
here's the fiddle: http://jsfiddle.net/E56j8/
[Source]

If you arrange your data as below, your data and it's associated meta-data will sort/move together.
<tr>
<td>
<table>
<tr><td>Data</td><td>Data</td></tr>
<tr><td> MetaData </td></tr>
</table>
</td>
<tr>
<tr>
<td>
<table>
<tr><td>Data</td><td>Data</td></tr>
<tr><td> MetaData </td></tr>
</table>
</td>
<tr>
This answer out of context is very bad practice! The only reason I have proposed it is because you haven't provided the actual js code that is doing the sorting

Related

Is it possible to use the style of Wikitable, including the sorting possibilities?

I would like to include to an html page a table that have the properties of the wikipedia tables: sortable, with little arrow next to the title that indicates the descending/ascending order.
Typically, in this extensive list of examples, I am looking for the simplest format:
https://en.wikipedia.org/wiki/Help:Sorting#Example
I was able to find a script to sort out my table, and I manually included the up/down arrow, but I was wondering whether one could import the script used by wikipedia pages, and then create tables using class="wikitable sortable".
Is it possible?
Here is the code to make the table:
<table class="wikitable sortable">
<tbody><tr>
<th>name
</th>
<th>data
</th>
<th>more data
</th></tr>
<tr>
<td>cats
</td>
<td>273
</td>
<td>53
</td></tr>
<tr>
<td>dogs
</td>
<td>65
</td>
<td>8,492
</td></tr>
<tr>
<td>mice
</td>
<td>1,649
</td>
<td>548
</td></tr></tbody></table>

Way to find a td inside of a tr. (Javascript)

I am working for a update on a chrome extension for a page where I have the following table.
<tr class="MessageContent">
<td colspan=3>
data
</td>
</tr>
I am trying to change the second tables color.
I have access to the first table, but need to somehow select the second table.
document.getElementsByClassName("MessageContent")[0]; // First table
Nothinng I have tried has worked.
Use querySelector instead, to select the first <td> inside a <tr class="MessageContent">:
document.querySelector('tr.MessageContent > td').style.backgroundColor = 'yellow';
<table>
<tr class="MessageContent">
<td colspan=3>
data
</td>
</tr>
</table>
If you need to be more specific and are sure the td always has colspan=3, then
document.querySelector('tr.MessageContent > td[colspan="3"]');

Html/JS: Link cell values of one column of one table from cells of another column of another table

I am new to coding and am trying to make a table using values from another table.
For example, the following table has a column for "Contact" (names)
<table>
<tr>
<th>Role</th>
<th>Contact</th>
<th>Email</th>
</tr>
<tr>
<td>Role1</td>
<td>Person1 </td>
<td>Person1#xyz.com</td>
</tr>
<tr>
<td>Role2</td>
<td>Person2</td>
<td>Person2#xyz.com</td>
</tr>
</table>
My second table (ttask) has a list of tasks and has a column for the "Contact" assigned to a task. I would like to link the value for the Contact cells in the following table with its corresponding Contact in the 1st table so that if I change the Contact's name in the 1st table, it will update in all the Table ttask cells involving that Contact's name. How can I make this happen?
<table id="ttask">
<tr>
<th>Weeks Prior</th>
<th>Role</th>
<th>Contact</th>
<th>Task</th>
</tr>
<tr>
<td>16</td>
<td>AH</td>
<td>Person1</td>
<td>
What currently needs to be done. The task and what's involved blah blah
</td>
</tr>
</table>
Thank you so much!
first take different id for both table td and try this
$(document).ready(function(){
VAR abc = $(document.getElementById("tdidoffirsttable").innerHTML);
document.getElementById("td id of second table").innerHTML = abc;
});
The question is somewhat unclear because you didn't mention if you are willing to use html only or not. If you are willing to consider javascript, then this can work:
<p id="demo1">person1</p>
<p id="demo2">person2</p>
<script>
function myFunction() {
var str = document.getElementById("demo2").innerHTML;
document.getElementById("demo1").innerHTML = str;
}
myFunction();
</script>
Of course this is per row, if you data contains multiple lines then should be adapted by doing a loop in order to simplify.

DataTables: TypeError: i is undefined

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.

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/

Categories