Arrange data in the table - javascript

I've been working to this kind of data in array
data:[
0:{
name:"Pervies, Peter"
details:[
{date:"2017-11-17",start_time:"08:00:00",end_time:"16:00:00"},
{date:"2017-11-18",start_time:"08:00:00",end_time:"16:00:00"}
]
}
1:{
name:"Ming, Edmund"
details:[
{date:"2017-11-17",start_time:"08:00:00",end_time:"17:00:00"},
{date:"2017-11-18",start_time:"08:00:00",end_time:"17:00:00"}
]
}
]
I want the data to be display like this:
But it always turn out like this:
I use this code below in distributing data in the table
<table>
<thead>
<tr class="text-center location text-white">
<th>Employee</th>
<th>Date</th>
<th>Time In / Time Out</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor= "let da of data; ">
<tr *ngFor= "let s of da.details">
<td>
<strong>{{da.name}}</strong>
</td>
<td>
{{s.date}}
</td>
<td>
<input type="time [value]="s.start_time">
<strong>/</strong>
<input type="time [value]="s.end_time">
</td>
</tr>
</ng-container>
</tbody>
</table>
can you help on how I should display my data in the table properly.
I'm using angular 2

Here is the code to arrange the data in row and col along with display the date in required format
<tbody>
<ng-container *ngFor= "let da of data; ">
<tr>
<td [rowSpan]="da.details.length+1">
<strong>{{da.name}}</strong>
</td>
</tr>
<ng-container *ngFor= "let s of da.details">
<tr>
<td > {{s.date | date:'MMM dd, yyyy'}}</td>
<td><input type=time [value]="s.start_time"><strong>/</strong><input type=time [value]="s.end_time"></td>
</tr>
</ng-container>
</ng-container>
</tbody>

What about
<table>
<thead>
<tr class="text-center location text-white">
<th>Employee</th>
<th>Date</th>
<th>Time In / Time Out</th>
</tr>
</thead>
<tbody>
<tr *ngFor= "let da of data; ">
<td>
<strong>{{da.name}}</strong>
</td>
<td colspan="2">
<tr *ngFor= "let d of da.details; ">
<td>{{d.date | date}}</td>
<td>
<input type="time" [value]="d.start_time"/>
<strong>/</strong>
<input type="time" [value]="d.end_time"/>
</td>
</tr>
</td>
</tr>
</tbody>
</table>
Working demo

Try like this :
here demo link : demo
<table>
<thead>
<tr class="text-center location text-white">
<th>Employee</th>
<th>Date</th>
<th>Time In / Time Out</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let d of data">
<td>{{d.name}}</td>
<td>
<table>
<tr *ngFor="let c of d.details">
<td>
{{c.date}}
</td>
</tr>
</table>
</td>
<td>
<table>
<tr *ngFor="let s of d.details">
<td>
<input type="time" [value]="s.start_time">
<input type="time" [value]="s.end_time">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

try this
use parseDate custom function in your component
parseDate(dateString: string): Date {
if (dateString) {
return new Date(dateString);
} else {
return null;
}
}
and call the function where you want convert and the format by this way
{{parseDate(s.date) | date: 'MMM dd, yyyy'}}
note: Also consider #Saurabh Agrawal answer for your table format.
DEMO Result :

Related

How to change Background color of Table row if the value of column is same?

I want to set same and different background color of Table rows where the column value matches previous or next row of same for same column.
For example, Check the below table.
<table class="table table-striped">
<thead class="table-light fw-semibold">
<tr class="align-middle">
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr class="align-middle">
<td>
John
</td>
<td>
25
</td>
<td>
Architect
</td>
</tr>
<tr class="align-middle">
<td>
John
</td>
<td>
35
</td>
<td>
Teacher
</td>
</tr>
<tr class="align-middle">
<td>
Jerry
</td>
<td>
30
</td>
<td>
Broker
</td>
</tr>
</tbody>
In the above table. The name column of the first row matches name of 2nd(next) row. So I want to set a different background color for both the matched rows.
How can I do that using JS/jQuery?
You may want to iterate the rows. I wasn't sure which columns you wanted to compare with the previous row, so I compared all columns and if any match, I mark those rows with a background.
var previous_values = new Array(100)
var previous_row = null;
document.querySelectorAll("tbody tr").forEach(function(row) {
var i = 0;
var found = false;
row.querySelectorAll("td").forEach(function(td) {
var value = td.innerText;
if (value == previous_values[i]) {
found = true;
}
previous_values[i] = value;
i++;
})
if (found) {
row.classList.add("bg-primary");
if (previous_row) {
previous_row.classList.add("bg-primary");
}
}
previous_row = row;
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<table class="table table-striped">
<thead class="table-light fw-semibold">
<tr class="align-middle">
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr class="align-middle">
<td>
John
</td>
<td>
25
</td>
<td>
Architect
</td>
</tr>
<tr class="align-middle">
<td>
John
</td>
<td>
35
</td>
<td>
Teacher
</td>
</tr>
<tr class="align-middle">
<td>
Jerry
</td>
<td>
30
</td>
<td>
Broker
</td>
</tr>
</tbody>

Copy Paste multiple rows from CSV to input fields in an HTML Form

I am trying to copy paste data from a CSV file to an HTML form using Jquery. My form has an array of input fields so I can do multiple inserts at the same time on submit
Now, suppose I copy paste multiple rows from a CSV file to the second column of the first row in the form, the first row of the form shows data correctly but in the second row, the data pasted starts from the first column itself, wherein it should start from the second row as it did on the first row of the form
CSV rows and cells
1 4 a
2 5 b
3 6 c
Screenshot
function csv_paste_datagrid(event){
$(document).ready(function() {
$('input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().parent().parent().parent().parent().next().find('input');
} else{
input = input.parent().parent().parent().parent().parent().parent().next().find('input').first();
}
}
}, 0);
});
});
HTML
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<table style="display : inline;width : 100%;"></table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[1]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[1]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" style="" value="Back" onclick="" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" style="" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" onclick="" style="" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Right, I had to clear a few double ids from your HTML first and also added a class attribute (contTD) to your "main" container <td>s. After that the whole thing fell into place fairly easily:
to prevent the actual TSV text from being pasted directly into the first input field I used e.preventDefault()
I then used .split() twice on the TSV string to turn it into the 2D array vals
I identified the .closest() td.contTD element (--> td) and its column and row numbers (col and row) by finding the .index() of td and its parent row.
starting form the .closest('tbody')I then worked my way down again through the .slice()of rows starting with row and its (sliced) child input elements starting at column col.
in an .each() loop I then assigned the value of the vals-array to the input element, but only if val[i][j] exists!
There could be further improvements to the script, as it will run trhough all <tr>s of the table from row row to the end. But I hope this is a starting point for you and has given you a few more ideas on how to work with jquery.
In my script I used a delegated paste-event-binding to the <form> element. This should work well with a dynamic table. I did not pack it into an extra function. But, of course, when you use it in your site it should be placed in your onload section.
And lastly: in my second .split() I am looking for a tab character as column separator, so this example will work with a TSV file format. If you want to apply it on space or comma separated values you should adapt the regular expression there to something like /\s/ or /,/ .
$('form').on('paste', 'input', function (e) {
e.preventDefault(); // do not paste the contents into the first cell ...
// convert TSV from clipboard into a 2D array:
let vals=event.clipboardData.getData('text').trim().split(/\r?\n */).map(r=>r.split(/\t/));
let td=$(this).closest('.contTD'); // closest container TD and work from there
let col=td.index(), row=td.parent().index(), tbdy=td.closest('tbody');
// modify input fields of rows >= row and columns >= col:
tbdy.children('tr').slice(row).each((i,tr)=>{
$(tr).find('td input:text').slice(col).each((j,ti)=>{
if(vals[i]&&vals[i][j]!=null) ti.value=vals[i][j] }
)});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<label>sample data for copying and pasting via clipboard:</label>
<table>
<tr><td>1</td><td>4</td><td>a</td></tr>
<tr><td>2</td><td>5</td><td>b</td></tr>
<tr><td>3</td><td>6</td><td>c</td></tr>
</table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value="01"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value="02"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value="03"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[1]">
<table>
<tbody>
<tr id="tr_validation_options[1]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value="04"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[1]">
<table>
<tbody>
<tr id="tr_validation_display[1]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value="05"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[1]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value="06"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" value="Back" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>

How to use Accordion under <td> tag? Angular 9

I have a table , when I will click on any of row when a new table should be stretched under the same . I tried to use accordian of ngx-bootrap but I failed.
Basically I need a expandable table inside table. When I will click to any of row I will call a service which will give data for expanding table.
Use this code to get the same table.
sample.component.html
<table class="table">
<tbody>
<ng-container *ngFor="let item of topItem; let i = index">
<tr>
<td width="5%" (click)="toggle(item, i)">
<i aria-hidden="true" class="fa fa-{{ i }}-icon" [ngClass]="{'fa-expand-icon': visible,'fa-compress-icon': !visible}"
></i>
</td>
<td width="20%">{{ item.Name }}</td>
<td width="15%">{{ item.mobile }}</td>
</tr>
<tr class="d-none row-num-{{ i }}">
<td *ngIf="showTable" colspan="2">
<div class="row">
<table class="table">
<tbody>
<tr *ngFor="let item of subsItem; let i = index">
<td>sample data</td>
<td>sample data</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</ng-container>
</tbody>
</table>
Use typescript file sample.component.ts
toggle(item, index) {
let selector = `.row-num-${index}`;
document.querySelector(selector).classList.toggle('d-none');
this.showTable = true;
}

Take data from a table to display as plain text

I want to take data from each row to display as simple text on the same page in a paragraph.
Example table below:
<table>
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>
The output should look like:
A1 B1 C1 A2 B2 C2
I have tried look for the solution, but it is not working. I appreciate any help in advance.
Use document.querySelectorAll('td') to get all the td elements. Iterate over the elements using forEach loop and get their text using textContent. In the paragraph add this text using innerHTML
document.querySelector('#a').querySelectorAll('td').forEach((e)=>document.querySelector('#here').innerHTML+=e.textContent + " ")
<table id="a">
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>
<p id="here"></p>
Using jquery, get all the td elements and iterate over them using each and append the text to the paragraph using append()
$('#a').find('td').each(function(i,e){
$('#here').append($(e).text() + " ")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="a">
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>
<p id="here"></p>
Try like this, using HTML DOM children Property
var dataTable = document.getElementsByTagName('table');
var dataTableBody = dataTable[0].children[1];
for (var i = 0; i < dataTableBody.length; i++) {
console.log(dataTableBody[i].innerHTML)
}
<table>
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>

How to select last row of a table?

I have the following div:
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>
How do I make it select the last row of it with javascript or jquery? I've tried doing it like this
$("[.OrderList][tr:last]").focus();
But with no success
Use this code:
.OrderList >.table > tbody > tr:last-child { background:#ff0000; }
Try this :
$('#yourtableid tr:last').attr('id');
or this:
$("#TableId").find("tr").last();
Hope this if helpful :)
console.log($(".OrderList tr").last().html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>
Try this code You can achieve it by:
$('#first table:last tr:last')
$('#yourtableid tr:last').attr('id').focus();
or
$('#yourtableid tr:last')[0].focus();
should work.
console.log($(".OrderList table tr:last").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>

Categories