Develop Reference

Concatenation of two tables in Javascript and html

I have two html tables which I render in my react component and I want to create a third html table which is the concatenation of the first two tables. To be more specific I have a table:
<table>
<tbody>
<tr>
<td>Collaterals Value</td>
<td>Buying Power/Available Power</td>
<td>Market to Market</tr>
<td>Outstanding Order Margin</td>
</tr>
</tbody>
</table>
and another table like this:
<table>
<tbody>
<tr>
<td>fdsfdsfds</td>
<td>fdsfdsfds/td>
<td>fdsfsdfds</tr>
<td>fdsfdsfds</td>
</tr>
</tbody>
</table>
I want to create a table like
<table>
<tbody>
<tr>
<td>Collaterals Value</td>
<td>Buying Power/Available Power</td>
<td>Market to Market</tr>
<td>Outstanding Order Margin</td>
</tr>
<tr>
<td>fdsfdsfds</td>
<td>fdsfdsfds/td>
<td>fdsfsdfds</tr>
<td>fdsfdsfds</td>
</tr>
</tbody>
</table>
Any ideas of how I can implement this?

All you have to do is get the append the tr from the second table to the tbody of the first table. Javascript will take care of doing the removal from the second table as a part of the appendChild.
var tables = document.querySelectorAll("tbody");
tables[0].appendChild(tables[1].querySelector("tr"));
Table 1
<table>
<tbody>
<tr>
<td>Collaterals Value</td>
<td>Buying Power/Available Power</td>
<td>Market to Market</tr>
<td>Outstanding Order Margin</td>
</tr>
</tbody>
</table>
Table 2
<table>
<tbody>
<tr>
<td>fdsfdsfds</td>
<td>fdsfdsfds</td>
<td>fdsfsdfds</td>
<td>fdsfdsfds</td>
</tr>
</tbody>
</table>

jQuery datatable table inside table causing mData undefined

In one of my projects I am using datatables. This is one column structure in my table which is causing an error:
<th>
<table class="table table-bordered table-condesed">
<thead>
<tr>
<th colspan="7" class="text-center">Day Run</th>
</tr>
</thead>
<tbody>
<tr>
<td>M</td>
<td>T</td>
<td>W</td>
<td>T</td>
<td>F</td>
<td>S</td>
<td>S</td>
</tr>
</tbody>
</table>
</th>
Also this is the respective column:
<td>
<table class="table table-bordered">
<tbody>
<tr>
<td tabindex="0">N</td>
<td>N</td>
<td>N</td>
<td>N</td>
<td>N</td>
<td>N</td>
<td>Y</td>
</tr>
</tbody>
</table>
</td>
I don't know why but this is throwing an error when initialized. This is the error I am facing.
Uncaught TypeError: Cannot read property 'mData' of undefined
I don't see anything wrong here. Any idea why its does not work?
Here is the live demo Demo

This is because you are initializing datatable by using class like:
$('.table').dataTable({searching: false, paging: false, responsive: true});
and the column definition are different for both the table, I think this is the issue.
Do one thing, provide different id to both the table and initiate datatable with those id's

footable js removes all form elements in the table

I have implemented a responsive table with the help of footable jquery library. Now i have placed input tags, select box in it. Footable js removes all these tags and make it an empty <td>.
<table id="accordion-example-1" class="table" data-paging="true" data-filtering="false" data-sorting="false">
<thead>
<tr>
<th></th>
<th data-breakpoints="xs">Date Created</th>
<th>Source</th>
<th>Type</th>
<th data-breakpoints="xs">Status</th>
<th data-breakpoints="xs sm"> </th>
<th data-breakpoints="xs sm md" > </th>
<th data-breakpoints="xs sm md"> </th>
</tr>
</thead>
<tbody>
<tr data-expanded="true">
<td></td>
<td>6/11/16</td>
<td>Mr. Cooper - Request Info</td>
<td>Buying</td>
<td>
<select class="nobrdr">
<option>Offer</option>
</select>
</td>
<td><input type="text" class="nobrdr" placeholder="Value"/></td>
<td><input type="text" class="nobrdr" placeholder="Date" /></td>
<td><button class="nobrdr m-l-1" type="button" ><b>+ Add</b></button><br>Forms/Docs</td>
</tr>
</tbody>
</table>
jquery function :
$(function($){
$('#accordion-example-1,#accordion-example-2').footable({
});
});

You need to change the data type of the column(s) where the form elements are to "html", otherwise FooTable assumes the column contains only text and formats it as such - i.e. it will strip out all HTML markup from the cell contents, and not just form elements.
For example in your case:
<th data-type="html" data-breakpoints="xs">Status</th>
will tell it to respect HTML markup within any cells in the Status column.
The possible column types supported are "text", "number", "html" and "date". "text" is the default if no type is specified.
For more detailed discussion I suggest you read the guide at http://fooplugins.github.io/FooTable/docs/getting-started.html and find the "Column options" section.

Angular table loading spinner on table columns visibility change

I have quite big table with many columns. Many columns have attribute "ng-show". Also i have created a functionality which hides or displays some table columns (with "ng-show").
When i trying to apply table columns visibility change ir takes 2-3 seconds for angular to update the table. Is it possible to add loading spinner on the table while it happens?
Simplified table structure:
<table class="classesList" id="tableId">
<thead>
<tr>
<th ng-show="tableColumns[0].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[1].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[2].show" >
<span>Header1</span>
</th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-show="tableColumns[0].show">
<span>Data1</span>
</td>
<td ng-show="tableColumns[1].show">
<span>Data2</span>
</td>
<td ng-show="tableColumns[2].show">
<span>Data3</span>
</td>
...
</tr>
</tbody>

How to get value of specific column like 'id' With onClick event on table's row with JavaScript

I want to get Value of ID column using javascript onclick event on row With Following Code
<table>
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr>
<td>1</td>
<td>john</td>
</tr>
</table>

document.getElementsByTagName("tr")[0].addEventListener("click", function(){
alert(this.getElementsByTagName("th")[0].innerHTML);
});