We Keep Coding

Using Cheerio to extract data from a page.. The format is as below. How do I parse these tables dynamically as they can vary?

I hope someone smart can help me get my head around all this arrays and objects and loops.....I've been coming across them alot and I just dont get why there isnt an easy way for me to select on the DOM what I want to scrape and then say export to JS variable as JSON object.
All I am trying to do here is export to a JSON string in this format.
Created th : Created td
Client th : Client td
Owner th : Owner td
Thats what is extract from table ONE
Table TWO is more complicated:
there can be unlimited trs here......this is where I need a loop to ensure all of the text content is put from JS into JSON.
Title th
Content th
Statement th:
Date Description Cost Payment Balance.....all of these rows here can be unlimited.
th and tds are clear but there can be unlimited number of trs
Each title has a content (for Content value just join all the values in the divs).
Each title also has a statement which can have multiple rows. Its variable.
So columns in the table and in the page wont change but the rows for the second table and the mini statement can change. The data in the first table is static.
I hope could this of a quick loop to parse this into a JSON object so I can post to my DB?
<table class="summary">
<tbody><tr>
<th>Created</th>
<th>Client</th>
<th>Owner</th>
<th>Ref</th>
<th>Email Address</th>
<th>Postal Address</th>
</tr>
<tr>
<td>Created</td>
<td>Client</td>
<td>Owner</td>
<td>Ref</td>
<td>Email</td>
<td>Postal Address</td>
</tr>
</tbody></table>
<hr>
<table>
<tbody><tr>
<th>Title</th>
<th>Content</th>
<th>Statement</th>
</tr>
<tr>
<td>
<div>
<a class="packageTitle" onclick="openPackageDetail("")" title="Click for detail">{TITLE}</a>
</div>
</td>
<td>
<div>
<div>
{CONTENT1}
</div>
<div class="lighter smaller">Containing:</div>
<div>
<div class="smaller">
Early Bird Guest (1)
</div>
</div>
</div>
</td>
<td>
<table class="smaller statement">
<tbody><tr>
<th>Date</th>
<th>Description</th>
<th style="padding-right:1em">Cost</th>
<th style="padding-right:1em">Payment</th>
<th>Balance</th>
</tr>
<tr>
<td>dATE AND TIME</td>
<td>DESCRIPTION</td>
<td>COST</td>
<td>PAYMENT</td>
<td>BALANCE</td>
</tr>
<tr>
<td>DATE</td>
<td>DESCRIPTION</td>
<td>COST</td>
<td>PAYMENT</td>
<td>BALANCE</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>

Sort column by value other than cell content

I'm using jQuery DataTables and I have one column that looks like shown below:
<td><span class="badge"> 123 </span> <span> customer name </span></td>
i.e, I put first some number (ID), then the actual name which I want to sort by.
How can I tell jQuery DataTables to sort correctly by customer name?

Use data-order attribute on td element as shown in this example.
<td data-order="customer name">
<span class="badge"> 123 </span>
<span> customer name </span>
</td>

You can do this with jQuery.
<table id="example" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td data-search>Paul</td>
</tr>
<tr>
<td>13</td>
<td data-search>Nickson</td>
</tr>
</tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
You have to add jquery.dataTables.min.js after including the jquery. You can find more about this here

materialize: make table row accordion header

I am trying to use materialize to create a table that allows for each table row to be clickable. Clicking on a row should expand an accordion under the row that holds more data for the row. I can not seem to get the accordion to open or set the whole as the header for the accordion. I have tried adding the classes straight to the tr's as well as wrapping each tr in a div. neither solution gave the right behavior. Here is the code I currently have:
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script type="text/javascript">
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
</script>
<table class="bordered">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr class="collapsible" data-collapsible="accordion">
<td class="collapsible-header">Alvin</td>
<div class="collapsible-body">
<p>
hello
</p>
</div>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>

The Materialize Collapsible needs to be configured on an li element.
Try this:
<table class="bordered">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">Alvin</div>
<div class="collapsible-body">
<p>
hello
</p>
</div>
</li>
</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
The layout is not so good, but works as you expect.
If you are using Materialize just for the collapsible, I suggest you use another component, like Bootstrap Collapse

How can I use ng-repeat in a table body to encompass multiple rows?

I'm trying to transition from jsRender to AngularJs and can't seem to figure out how to generate multiple table rows with ng-repeat.
I need to generate two table rows per ng-repeat, these rows are related to each other. The second row is actually a hidden row that expands out like an accordion. This works perfectly fine with renderJs:
With renderJs:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
{{for myArray}} <!-- Creates two rows per item in array -->
<tr>
<td>{{data}}</td>
<td>{{data2}}</td>
</tr>
<tr class="special-row">
<td>{{otherData}}</td>
<td>{{otherData2}}</td>
</tr>
{{/for}}
</tbody>
</table>
With AngularJs:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
<div ng-repeat="element in myArray"> <!-- This gets removed since it's not a valid element for a table body -->
<tr>
<td>{{element.data}}</td>
<td>{{element.data2}}</td>
</tr>
<tr class="special-row">
<td>{{element.otherData}}</td>
<td>{{element.otherData2}}</td>
</tr>
</div>
</tbody>
</table>
I cannot have a <div> inside of my table body to put the ng-repeat on. How can I do this?

You should do it like this
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="element in myArray">
<td>{{element.data}}</td>
<td>{{element.data2}}</td>
</tr>
<tr ng-repeat-end class="special-row">
<td>{{element.otherData}}</td>
<td>{{element.otherData2}}</td>
</tr>
</tbody>

https://jsfiddle.net/feq6pe7m/1/
<body ng-app="SampleApp">
<table ng-controller="fcController" border="1px">
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody ng-repeat="element in myArray">
<tr>
<td>{{element .Data1}}</td>
<td>{{element .Data2}}</td>
</tr>
<tr class="special-row">
<td>{{element.OtherData1}}</td>
<td>{{element.OtherData2}}</td>
</tr>
</tbody>
</table>
</body>

get classname of a last <tr> element in a div

I have a table like below. As you can see first <tr> element's class is "success" and second "active" and third is "success"...etc..
Now I want to do this dynamically. But I can't get last <tr> element's classname for add some condition.
How can I do this in JavaScript?
<div id="masterContainer" class="bs-example">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">User Information</div>
<div class="panel-body">
<p>The following table contains some personal information about users.</p>
</div>
<!-- Table -->
<table class="table">
<thead>
<tr class="success">
<td><b>First Name</b> <br> som</td>
</tr>
</thead>
<tbody>
<tr class="active">
td><b>First Name</b> <br> something</td>
</tr>
<tr class="success">
td><b>First Name</b> <br> something</td>
</tr>
<tr class="active">
td><b>First Name</b> <br> something</td>
</tr>
</tbody>
</table>
</div>
</div>

You can use :last selector:
$('.table tr:last').attr('class');

The querySelectorAll method lets you pass CSS selectors to find nodes you're interested in
var nodes = document.querySelectorAll('div tr'); // all <tr> descendants of <div>s
nodes[nodes.length - 1].className; // "active" // the last of these