Moment JS Array Invalid Date - javascript

I simply want the time from the second column, then to add 2 hours. I am using the momentJS library. This is what I have so far.
function myFunction(){
var cellData = [];
var i;
var myTable = document.getElementById("myTable");
for (i=0; i<myTable.rows.length; i++) {
cellData.push(myTable.rows[i].cells[1].innerHTML);
}
var x = [moment(cellData).add(2, 'h').format('MM/DD/YYYY hh:mm')];
alert(x);
}
<table id="myTable" border="1">
<tbody>
<tr>
<td>A<td>
<td>2016-08-24 15:45</td>
<td>C</td>
</tr>
<tr>
<td>A<td>
<td>2016-08-24 16:45</td>
<td>C</td>
</tr>
</tbody>


You have not close <td> tag properly that's why myTable.rows[i].cells[1].innerHTML not return date string.
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
function myFunction() {
var cellData = [];
var i;
var x = [];
var myTable = document.getElementById("myTable");
for (i = 0; i < myTable.rows.length; i++) {
cellData.push(myTable.rows[i].cells[1].innerHTML);
date = moment(cellData[i], "YYYY-MM-DD HH:mm").add(2, 'h').format('MM/DD/YYYY hh:mm');
x.push(date);
}
console.log(x);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<table id="myTable" border="1">
<tbody>
<tr>
<td>A</td>
<td>2016-08-24 15:45</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>2016-08-24 16:45</td>
<td>C</td>
</tr>
</tbody>
</table>
<button type="button" onclick="myFunction()">Click me</button>


It is throwing an error because you are trying to access all the rows which includes table header's rows also
you might considering traversing only tbody's rows
check the following code snippet
window.onload=function(){
myFunction();
}
function myFunction(){
var cellData = [];
var i;
var myTable = document.getElementById("myTable");
var cellData=[];
$("#myTable tbody tr").each(function(){
var date=$(this).find('td').eq(2).html();
var dateModified=moment(date).add(2, 'h').format('MM/DD/YYYY hh:mm A')
cellData.push(dateModified);
});
console.log(cellData);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<table id="myTable" border="1">
<tbody>
<tr>
<td>A<td>
<td>2016-08-24 15:45</td>
<td>C</td>
</tr>
<tr>
<td>A<td>
<td>2016-08-24 16:45</td>
<td>C</td>
</tr>
</tbody>
Hope this helps
check this link http://codepen.io/sahithiK/pen/LRJGaJ
Another thing, you cannot add whole array at a time. you might consider adding each item at a time and then insert into an array


Try doing this:
function myFunction(){
var x = [];
var myTable = document.getElementById("myTable");
for (var i=0; i<myTable.rows.length; i++) {
x.push(moment(myTable.rows[i].cells[1].innerHTML).add(2, 'h').format('MM/DD/YYYY hh:mm'));
}
alert(x);
}
Hope this helps


You have a set of problems.
HTML
You haven't closed the first <td> tags of rows.
<td>A</td>
<!-- ^ -->
<td>2016-08-24 15:45</td>
<td>C</td>
JavaScript
cellData is an array, and you cannot pass arrays of date strings to momentJS. Instead, create the momentJS instance and push it its formatted string to cellData
function myFunction(){
var cellData = [];
var i;
var myTable = document.getElementById("myTable");
for (i=0; i<myTable.rows.length; i++) {
var momentObj = moment(myTable.rows[i].cells[1].innerHTML).add(2, 'h').format('MM/DD/YYYY hh:mm');
cellData.push(momentObj);
}
console.log(cellData); // ["08/24/2016 05:45", "08/24/2016 06:45"]
}
myFunction();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<table id="myTable" border="1">
<tbody>
<tr>
<td>A</td>
<td>2016-08-24 15:45</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>2016-08-24 16:45</td>
<td>C</td>
</tr>
</tbody>
</table>

Related

Can't align TR tags in handling table with double template tag

I want to make table for handling variable two kinds of row DB with two template tags. But, 2nd DB is not align with 1st DB. 2nd DB rows is in the first column, not row. When I see the html layout in debug mode, there is no <tr> tag in 2nd DB. How to handle it?
<HTML Source>
<tbody id="result">
</tbody>
<template id="template1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr class = "search">
</tr>
</template>
<template id="template2">
<td>a</td>
<td>b</td>
</template>
<script>
var searchResultsBox = document.getElementById("result");
var templateBox = document.getElementById("template1");
var template = templateBox.content;
searchResultsBox.innerHTML = "";
for(i=0;i<2;i++){
tr = template.cloneNode(true);
var detailInfoBox = tr.querySelector(".search");
var templateInfoBox = document.getElementById("template2")
var templateInfo = templateInfoBox.content;
detailInfoBox.innerHTML = "";
for(j=0;j<3;j++){
var tr1 = templateInfo.cloneNode(true);
detailInfoBox.appendChild(tr1)
}
searchResultsBox.appendChild(tr);
}
</script>
codepan : https://codepen.io/greenfd/pen/QWvObQR

You never create a new tr and you append all cloned td into the same tr.
So you need to create a new tr and append after the existing tr by :
detailInfoBox.after($(`<tr></tr>`).html(tr1)[0])
var searchResultsBox = document.getElementById("result");
var templateBox = document.getElementById("template1");
var template = templateBox.content;
searchResultsBox.innerHTML = "";
for (i = 0; i < 2; i++) {
tr = template.cloneNode(true);
var detailInfoBox = tr.querySelector(".search");
var templateInfoBox = document.getElementById("template2")
var templateInfo = templateInfoBox.content;
detailInfoBox.innerHTML = "";
for (j = 0; j < 3; j++) {
var tr1 = templateInfo.cloneNode(true);
detailInfoBox.after($(`<tr></tr>`).html(tr1)[0])
}
searchResultsBox.appendChild(tr);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table border="1">
<tbody id="result">
</tbody>
</table>
<template id="template1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="search">
</tr>
</template>
<template id="template2">
<td> a </td>
<td> b </td>
<td> c </td>
</template>

Create Javascript object from HMTL table

I have a table like
<table id="misc_inputs">
<thead>
<tr><th>Property</th><th>Input</th></tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td><input type="number" value="1"></td>
</tr>
<tr>
<td>b</td>
<td><input type="number" value="2"></td>
</tr>
...
I would like to convert that table to a Javascript object like
misc_inputs = {"a": 1, "b": 2, ...
How can the result be generated?

You can use below re-usable javascript method to convert any HTML table into Javascript object.
<table id="MyTable">
<thead>
<tr><th>Property</th><th>Input</th></tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td><input type="number" value="1"></td>
</tr>
<tr>
<td>b</td>
<td><input type="number" value="2"></td>
</tr>
</tbody>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
function ConvertHTMLToJSObject(htmlTableId)
{
var objArr = {};
var trList = $('#' + htmlTableId).find('tr');
$('#' + htmlTableId).find('tbody tr').each(function ()
{
var row = $(this);
var key = $(row).first().text().trim();
var value = $(row).find('input').attr("value");
objArr[key] = value;
});
return objArr;
}
var obj = ConvertHTMLToJSObject("MyTable");
console.log(obj);
});

You can loop through each inputs and create the object:
var misc_inputs = {};
$("#misc_inputs input[type=number]").each(function(i, el){
var k = $(this).closest('td').prev().text();
return misc_inputs[k] = +el.value;
});
console.log(misc_inputs);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="misc_inputs">
<thead>
<tr><th>Property</th><th>Input</th></tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td><input type="number" value="1"></td>
</tr>
<tr>
<td>b</td>
<td><input type="number" value="2"></td>
</tr>
</tbody>
</table>

Probably you can do it without any library but with jQuery it's easier. Something like that should work (not tested):
// Here we will store the results
var result = {};
// Ask jQuery to find each row (TR tag) and call a function for each
$('tr').each(function(){
// Inside a jQuery each() "this" is the current element, the TR tag in this example
var row = $(this);
// We ask jQuery to find every TD inside the current row (the second parameter of a jQuery selector is the parent node for your search). We take the first one and then we take the content of the tag
var label = $("td", row).first().text();
// We ask for an "input" tag inside the current row and we read its "value" attribute
var value = $("input", row).attr("value");
// Store everything in result
result[label] = value;
});

Reverse table rows top row go on bottom without change the position of th, HOW?

I use the HTML code.
I have a table and I write in first tr td "A" and "B" in second tr td
I have these two rows
but I want to print "B" in first tr and "A" in second
!! But I don't want to change my th position!!
Is it possible with any script like js or Jquery or with any type js CDN....??
<table id='table1'>
<tr>
<th>name</th>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>

Give this a try:
Your script
$(function(){
$("tbody").each(function(elem,index){
var arr = $.makeArray($("tr",this).detach());
arr.reverse();
$(this).append(arr);
});
});
The second way to do the same will be like this:
var tbody = $('table tbody');
tbody.html($('tr',tbody).get().reverse());
I hope this helps! Thanks!

You can swap the .textContent of the <td> children of the <tr> elements
const {rows:[{cells:[a]}, {cells:[b]}]} = table1;
[a.textContent, b.textContent] = [b.textContent, a.textContent];
<table id='table1'>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>

Since you can use reverse() with an array, you can use get() to convert this to an array first. If you have a dynamic number of rows you can use something like this:
$('tbody').each(function(){
var row = $(this).children('tr');
console.log(row)
$(this).html(row.get().reverse())
})

Use this below code:
$(function(){
$("tbody").each(function(elem,index){
var arr = $.makeArray($("tr",this).detach());
arr.reverse();
$(this).append(arr);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table1'>
<tbody>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</tbody>
</table>

You can loop through each row, starting at the bottom and add it to the bottom - this will reverse the rows.
This will mean you don't need to load all the rows into an array, but will mean additional DOM manipulation.
var tbl = $("#table1>tbody")
var l = tbl.find("tr").length;
for (var i=l; i>=0; --i)
{
tbl.find("tr").eq(i).appendTo(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table1'><tbody>
<tr> <td>A</td> </tr>
<tr> <td>B</td> </tr>
<tr> <td>C</td> </tr>
<tr> <td>D</td> </tr>
<tr> <td>E</td> </tr>
</tbody></table>

Problem Solved
<script type="text/javascript">
var trCount = $('#table1 tr').length;
var $rows = [];
for (var i = 0; i < trCount; i++)
$rows.push($('#table1 tr:last-child').remove());
$("#table1 tbody").append($rows);
</script>
Thanks to all

You can do that with pure vanilla JS, you don't need jquery or any other library for that.
function reverseOrder(table) {
const rows = table.querySelector('tbody').children;
const swaptemp = rows[0].children[0].innerHTML;
rows[0].children[0].innerHTML = rows[1].children[0].innerHTML;
rows[1].children[0].innerHTML = swaptemp;
}
const tableToReserveOrder = document.getElementById('table1');
reverseOrder(tableToReserveOrder);
<table id='table1'>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>
This is just a demonstration for your use case, you can play around with value of n which is 0 for this case where n+1 is 1.

Adding rows to table body dynamically

I am trying to add rows to an existing table that has header and footer also.
Here is my code:
<script>
function test() {
var tbl = document.getElementById("tbl");
var lastRow = tbl.rows.length - 1;
var cols = tbl.rows[lastRow].cells.length;
var row = tbl.insertRow(-1);
for (var i = 0; i < cols; i++) {
row.insertCell();
}
}
</script>
<table id="tbl" onclick="test()">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
when I click on any table I want to add new row to table body, but the issue here is the new row is added to table footer. please help me how to fix this issue.

You insert the row into the tBody element. Since there can be more than one tBody, you should refer to the tBodies prop of table at index 0.
var row = tbl.tBodies[0].insertRow(-1);
function test() {
var tbl = document.getElementById("tbl");
var lastRow = tbl.rows.length - 1;
var cols = tbl.rows[lastRow].cells.length;
var row = tbl.tBodies[0].insertRow(-1);
for (var i = 0; i < cols; i++) {
row.insertCell().appendChild(document.createTextNode(i));
}
}
test();
<table id="tbl" onclick="test()">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

Try something like this. Just clone first row and then append it as child to your table. Hope it will help you
function appendRow() {
let tbl = document.getElementById("tbl");
let newRow = tbl.rows[0].cloneNode(true);
tbl.appendChild(newRow);

Remove extra cell spaces

I have a script below:
var cells = [].slice.call(document.querySelectorAll("#myTable td"));
var search = document.getElementById("myInput");
search.addEventListener("keyup", function() {
cells.forEach(function(cell) {
if (!search.value.trim()) {
cell.style.background = "white";
cell.style.display = 'table-cell';
} else if (cell.textContent.toLowerCase().indexOf(search.value.toLowerCase()) == 0) {
cell.style.background = 'yellow';
cell.style.display = "table-cell";
} else {
cell.style.background = "white";
cell.style.display = 'none';
}
});
});
<input id='myInput' type='text'>
<table id='myTable'>
<tr>
<td>a</td>
<td>ab</td>
<td>abs</td>
<td>ador</td>
<td>turous</td>
<td>acac</td>
<td>accle</td>
</tr>
<tr>
<td>ed</td>
<td>aced</td>
<td>ate</td>
<td>acg</td>
<td>aci</td>
<td>atic</td>
<td>ive</td>
</tr>
<tr>
<td>l</td>
<td>pt</td>
<td>able</td>
<td>ad</td>
<td>adoent</td>
<td>ble</td>
<td>d</td>
</tr>
<tr>
<td>ed</td>
<td>a</td>
<td>aate</td>
<td>a</td>
<td>aavating</td>
<td>aive</td>
<td>a</td>
</tr>
<tr>
<td>d</td>
<td>ng</td>
<td>eable</td>
<td></td>
<td>alarmed</td>
<td>ming</td>
<td>t</td>
</tr>
<tr>
<td>ted</td>
<td>ae</td>
<td>all</td>
<td>agjhistic</td>
<td>akjhkjg</td>
<td>hjious</td>
<td>ample</td>
</tr>
<tr>
<td>hjbsed</td>
<td>ahkjng</td>
<td>anhjkd</td>
<td>ahjhnt</td>
<td>ahjkjc</td>
<td>a</td>
<td>hjhed</td>
</tr>
<tr>
<td>aghjed</td>
<td>hjjal</td>
<td>ghjmher</td>
<td>amjhkiue</td>
<td>ahkjus</td>
<td>any</td>
<td>ahmkjehensive</td>
</tr>
<tr>
<td>ajhjkjiate</td>
<td>ahkjpt</td>
<td>arctic</td>
<td>arid</td>
<td>aromatic</td>
<td>artistic</td>
<td>ashamed</td>
</tr>
<tr>
<td>assured</td>
<td>astonishing</td>
<td>athletic</td>
<td>attached</td>
<td>attentive</td>
<td>atkjkjactive</td>
<td>ahghbtere</td>
</tr>
<tr>
<td>bhkuhish</td>
<td>hkjh</td>
<td>bhkre</td>
<td>barren</td>
<td>basic</td>
</tr>
<tr>
<td>befsgdfgful</td>
<td>bdsfsdfed</td>
<td>dsfsdfved</td>
<td>bedsfsfcial</td>
<td>better</td>
<td>best</td>
<td>bdfsfitched</td>
</tr>
</table>
I use this script for searching text with an HTML table. It have more than 500 cells like 100 rows and 5 columns etc. This script works well for finding text within a short table but when I search anything it also display gap of rows and columns, if i have a long table which has more than 500 cells.
Here I tried to used regular expressions like \s and /g but it doesn't work, may be I insert them on wrong place. Also I tried to change cell.style.display = "table-cell"; with many other style but doesn't work.
Can any one properly guide me what and where I have to put exactly to get output properly without rows/columns gap if i have more than 500 cells and what that mean with syntax description.

Try this! =)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="input"/>
<div class="print"></div>
<script>
var data = ['food', 'bar', 'google']; // your data
var fx = function(text) {
var print = function(list,s) {
var table = $('<table/>').css('width','100%');
var x = 0;
while (list[x]) {
var tr = $('<tr/>');
while (list[x] && x < 5) {
var td = $('<td/>').text(list[x])
if(s == list[x]){
td.css('background','red');
}
tr.append(td);
x++;
}
table.append(tr);
}
$('.print').html(table);
}
if (typeof text === "undefined") {
print(data, '');
} else {
var find = [];
for (var i = 0; data[i]; i++) {
if (data[i].toLowerCase().indexOf(text.toLowerCase()) == 0) find[find.length] = data[i];
}
print(find,text);
}
}
$(function() {
$('.input').keyup(function() {
fx($(this).val());
});
fx();
});
</script>

Categories

Resources