JS: Compare two tables and generate new one based on the two - javascript

I'm trying to get better at JavaScript/jQuery, so I guess some basic table manipulation would nice to try out. However I can't seem to find a way to get started doing what I want to achieve.
Lets say e.g. I have two tables, and I want to compare data and generate a third table based on the data in the two first ones. Lets say it's about movies, and I have this list of users, and list of movies with a column of whom likes the movie. In the third on the fly generated table I want to collect these data and write out the movie with whom likes it.
users
<table id="table_1">
<tr>
<th>user ID</th>
<th>name</th>
<th>country</th>
</tr>
<tr><td>1</td>
<td>martin</td>a
<td>usa</td>
</tr>
<tr><td>2</td>
<td>james</td>
<td>france</td>
</tr>
</table>
movies
<table id="table_2">
<tr>
<th>movie id</th>
<th>name</th>
<th>users favorite (id)</th>
</tr>
<tr><td>2</td>
<td>the expendables</td>
<td>1</td>
</tr>
<tr><td>2</td>
<td>titanic</td>
<td>2, 1</td>
</tr>
</table>
results
<div id="table">
</div>
I have this fiddle: https://jsfiddle.net/fpeh6fna/

You could use jQuery each commands here, for example (just a section of the code you would want):
$('#table_1').children('tr').each(function() {
var row = [];
$(this).children('td').each(function() {
row.push($(this).text());
});
rows.push(row);
});

Related

Allow users to search HTML by real-time JavaScript queryselector queries

I've created a pure HTML Table, what I would like to do is allow the User to query the table via JavaScript. The structure is as follows:
A simple table (depicted here: https://codepen.io/chriscoyier/pen/tIuBL)
Provide a textarea or use a Library like Monaco editor to allow the user to write up JS QuerySelector queries.
Return the modified results to the User.
I am aware of security concerns, but this is a local static generated list of HTML files.
What I am unclear is;
Are there libraries that can do this already? I've found some "live-editors" that allow JavaScript to be executed, but I haven't been successful in replicating the results to modify the Table contents only. What ends up happening is that the whole page seems to get malformed when a user executes JS.
Is there another way to let users write-up JavaScript QuerySelector script to "play" with the exported tables?
Table structure:
<table class="order-table table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe#gmail.com</td>
<td>0123456789</td>
<td>99</td>
</tr>
<tr>
<td>Jane Vanda</td>
<td>jane#vanda.org</td>
<td>9876543210</td>
<td>349</td>
</tr>
<tr>
<td>Alferd Penyworth</td>
<td>alfred#batman.com</td>
<td>6754328901</td>
<td>199</td>
</tr>
</tbody>
</table>
You can just offer a normal textarea for users to type in the queries.
Use .value to get the typed in text as a String.
The use the string as an argument for document.querySelectorAll.
[edited to incorporate nilsf comment]

Multiple table sorting using Tablesorter JQuery

I am using JQuery Tablesorter in different tables and it is working fine. Now I am trying to sort different way where one table contain table thead and another table contain table tbody. My table looks like -
<table id="tbl" class="tablesorter">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
</table>
<table id="tbl1">
<tbody>
<tr>
<td>21</td>
<td>abc</td>
<td>82</td>
</tr>
<tr>
<td>12</td>
<td>ttt</td>
<td>90</td>
</tr>
</tbody>
</table>
Can anyone help me how can I achieve this or this is not possible in Tablesorter.
Thanks

HTML cell DOM get attribute value - sort table.js

I'm trying to make the sorttable.js to read values from a custom tr attribute, which is "sort_value".
<table>
<thead>
<tr>
<th class="sort_string">Name</th>
<th class="sort_int">Age</th>
<th class="sort_int">Date of Birth</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adam</td>
<td>22</td>
<td sort_value="19930403">April 3 1993</td>
</tr>
<tr>
<td>Matt</td>
<td>20</td>
<td sort_value="19950220">Feb 20 1995</td>
</tr>
<tr>
<td>Josh</td>
<td>25</td>
<td sort_value="19900730">July 30 1990</td>
</tr>
<tr>
<td>Kent</td>
<td>27</td>
<td sort_value="19880322">March 22 1988</td>
</tr>
</tbody>
</table>
Here's the jsfiddle: http://jsfiddle.net/zz4mugen/6/
Everything is perfect except the date of birth column. Please take a look at the .js of the jsfiddle. It's on the external resources column.
You're using custom attributes, but the name is not valid. Own attributes have to start with data-. See the official documentation: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
Below an interesting blog with explanation and examples about sorting different types of values in tables, such as numbers, texts, currencies and dates for different locales.
https://yoast.com/articles/sortable-table/#example

Adding Column to jQuery Datatables

I want to add a column to a jQuery Datatable. It will be used to contain a delete button for each row, like I have for another table. The button picture and class are specific in the php file that retrieves the table data from a database.
Simply adding a column to the html as the following breaks the javascript on the page:
<th>New Column</th>
I do not see anything in the aoColumnDefs settings that does anything to the added column. What code and where do I need to add or edit to accommodate the new column?
I am not the original developer behind the existing tables.
You can add one or more th from here like Revenue2
<table class="mws-table">
<thead>
<tr>
<th>Date</th>
<th>Transaction ID</th>
<th>Segment</th>
<th>Revenue</th>
</tr>
</thead>
<tbody id="transactions">
<tr>
<td class="trDate"></td>
<td class="transactionId"></td>
<td class="segment"></td>
<td class="revenue"></td>
</tr>
</tbody>
<tfoot>
<tr class="customFooterRow">
<th>Total</th>
<th></th>
<th></th>
<th align ="left" class="revenueTotal"></th>
</tr>
</tfoot>
</table>
You might have forgotten to add the column for the body as well and in cases where you have a "tfoot" you will need to add another column to it as well.

How do I find a the value of a td in a specific tr

I am have a rails app that I am writing cucumber test for. I am trying to get a number out of specific row so I can assert against it. I have a table that looks like this:
<table class="table table-striped" id="kids">
<thead>
<tr>
<th>Name</th>
<th>Balance</th>
<th></th>
</tr>
</thead>
<tbody>
<tr data-link="/kids/2">
<td>Jason</td>
<td>
<span>$</span>
<span class="money">1.00</span>
</td>
</tr>
<tr data-link="/kids/3">
<td>Neely</td>
<td>
<span>$</span>
<span class="money">0.50</span>
</td>
</tr>
</tbody>
</table>
I need to select a td that has a specific name, and then get the balance from the span in the following td. I am sure there is a way to do this with Xpath, but I cannot figure it out. Any help would be great.
You asked for XPath so here it is:
//td[preceding-sibling::td[text()='Neely']]/span[#class='money']
Note that XPathes aren't very readable and it may be better to use Capybara's ruby methods instead:
tr = find('tr', text: 'Neely')
tr.find('.money').text

Categories

Resources