$(document.ready(function() {
var laterbox = document.getElementById('laterbox');
var tabl = document.createElement('table');
var trh = document.createElement('tr');
var trd = document.createElement('tr');
var txt = document.createTextNode('book_id');
var tr1 = document.createElement('th');
tr1.appendChild(txt);
trh.appendChild(tr1);
tabl.appendChild(trh);
tabl.appendChild(trd);
laterbox.appendChild(tabl);
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laterbox">
<table>
<tr>
<th>aa</th>
<th>bb</th>
</tr>
<tr>
</tr>
</table>
</div>
But the second table does't display, I don't know why. I tried many times but could not find the error. You can see the output here: https://codepen.io/sandesh_bafna8/pen/BwQZGv
You don't have ) in your document and extra ) at the end. Remove it and it will work..
$(document).ready(function(){
var laterbox=document.getElementById('laterbox');
var tabl=document.createElement('table');
var trh=document.createElement('tr');
var trd=document.createElement('tr');
var txt=document.createTextNode('book_id');
var tr1=document.createElement('th');
tr1.appendChild(txt);
trh.appendChild(tr1);
tabl.appendChild(trh);
tabl.appendChild(trd);
laterbox.appendChild(tabl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laterbox">
<table>
<tr>
<th>aa</th>
<th>bb</th>
</tr>
<tr>
</tr>
</table>
</div>
Tip: If your code is not working try to look at the console if there is an error.. Missing or extra bracket and parenthesis will be displayed as an error in there..
$(document).ready(function() {
var laterbox = document.getElementById('laterbox');
var tabl = document.createElement('table');
var trh = document.createElement('tr');
var trd = document.createElement('tr');
var txt = document.createTextNode('book_id');
var tr1 = document.createElement('th');
tr1.appendChild(txt);
trh.appendChild(tr1);
tabl.appendChild(trh);
tabl.appendChild(trd);
laterbox.appendChild(tabl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laterbox">
<table>
<tr>
<th>aa</th>
<th>bb</th>
</tr>
<tr>
</tr>
</table>
</div>
$(document.ready(function() { => $(document).ready(function() {
You have some typo errors:
$(document.ready(function() { should be $(document).ready(function() {
Closing })); should be });
Here is the corrected code:
$(document).ready(function() {
var laterbox=document.getElementById('laterbox');
var tabl=document.createElement('table');
var trh=document.createElement('tr');
var trd=document.createElement('tr');
var txt=document.createTextNode('book_id');
var tr1=document.createElement('th');
tr1.appendChild(txt);
trh.appendChild(tr1);
tabl.appendChild(trh);
tabl.appendChild(trd);
laterbox.appendChild(tabl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laterbox">
<table>
<tr>
<th>aa</th>
<th>bb</th>
</tr>
<tr>
</tr>
</table>
</div>
Related
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>
I used to have $("#results_table tr").remove()
If I put the table selector in a variable var table = $("#results_table"), how do I access tr?
results_table.tr.remove(); doesn't seem to work.
You already have jquery object saved in variable, you can use all jquery methods on it directly, example: table.find("tr").remove();
var table = $("table")
table.find("tr").remove()
var table = $("table")
table.find("tr").remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>test
<td>
</tr>
</table>
var table = $("table")
table.find("tr").addClass("active")
example:
var table = $("table")
table.find("tr").addClass("active")
.active{
color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>test
<td>
</tr>
</table>
And if you save it as vanilla JS you can use rows:
var table = document.querySelector("table");
table.rows[0].remove();
var table = document.querySelector("table");
table.rows[0].remove();
.active{
color:red;}
<table>
<tr>
<td>test
<td>
</tr>
</table>
I hope I have been helpful
var x = document.getElementById("results_table");
var y = x.querySelector("tr");
y.remove();
I have designed a table with headers. I am appending dynamic rows <tr> to this table. While appending I am losing the order of the rows. Any suggestion or ideas as to how can I solve this problem? Thanks in advance.
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
-- dynamic rows will come.
</table>
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable').append(html1);
$('#myTable').append(html2);
$('#myTable').append(html3);
Desired Output :
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tr id="1">
<td>aaa</td>
<td>aaa</td>
</tr>
<tr id="2">
<td>ccc</td>
<td>ccc</td>
</tr>
<tr id="3">
<td>bbb</td>
<td>bbb</td>
</tr>
</table>
This you will do. Add a sorting function and then call that function as described in below link.
Added snippet based on Jquery content sorting link:- https://www.shift8web.ca/2017/01/use-jquery-sort-reorganize-content/
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable').append(html1);
$('#myTable').append(html2);
$('#myTable').append(html3);
var i;
var htmlcontent = $('#myTable').html();
$('#myTableOriginalContent ').html( $('#myTable').html())
sortMeBy('id', 'myTable', 'tr', 'asc')
function sortMeBy(arg, sel, elem, order) {
var $selector = $('#'+sel),
$element = $selector.children(elem);
$element.sort(function(a, b) {
var an = parseInt(a.getAttribute(arg)),
bn = parseInt(b.getAttribute(arg));
if (order == "asc") {
if (an > bn)
return 1;
if (an < bn)
return -1;
} else if (order == "desc") {
if (an < bn)
return 1;
if (an > bn)
return -1;
}
return 0;
});
$element.detach().appendTo($selector);
}
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Original Content
<table id="myTableOriginalContent">
<thead>
<tr><td></td></tr>
<tr>
<th><span>Name</span></th>
<th><span>Description</span></th>
</tr>
</thead>
</table>
Desired Result
<table id="myTable">
<thead>
<tr><td></td></tr>
<tr>
<th><span>Name</span></th>
<th><span>Description</span></th>
</tr>
</thead>
</table>
</body>
</html>
Change $('#myTable').append(html3); to $(html3).insertAfter('#1'). Also note that you'll need a tbody element after the thead to contain your rows, but I would imagine the browser will be inserting one for you automatically. Try this:
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>';
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>';
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>';
$('#myTable tbody').append(html1).append(html2);
$(html3).insertAfter('#1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<td></td>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody></tbody>
</table>
The logic is you append all dynamic table rows then reorder them based on the attribute of the id.
Sorting code source: Using jquery, how do you reorder rows in a table based on a TR attribute?
I just modified it a little.
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
var html4 = '<tr id="5"><td>5th</td><td>5th</td></tr>'; // This should go to 5th position.
var html5 = '<tr id="4"><td>4th</td><td>4th</td></tr>'; // This should go to 4th position.
$('#myTable tbody').append(html1);
$('#myTable tbody').append(html2);
$('#myTable tbody').append(html3);
$('#myTable tbody').append(html4);
$('#myTable tbody').append(html5);
var $table=$('#myTable');
var rows = $table.find('tr').get();
rows.sort(function(a, b) {
var keyA = $(a).attr('id');
var keyB = $(b).attr('id');
if (keyA > keyB) return 1;
if (keyA < keyB) return -1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Simple just you are calling wrong way call this way
$('#myTable').append(html1);
$('#myTable').append(html3);
$('#myTable').append(html2);
Complete Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
</table>
</body>
</html>
<script type="text/javascript">
$( document ).ready(function() {
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>';
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>';
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>';
$('#myTable thead').after(html1,html3,html2);
});
</script>
Try Following
Add <tbody> in table & append rows
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable tbody').append(html1);
$('#myTable tbody').append(html2);
$('#myTable tbody').append(html3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I have an array and I just want to use it in my table.
This is my idea but i don't know how to use the array to be shown inside a td-tag:
<head>
<script type="text/javascript">
function list() {
var list = ['Tim','Tom','Tam']
}
</script>
</head>
<body>
<table>
<tr>
<td>Place 1: list[0]</td>
<td>Place 2: list[1]</td>
<td>Place 3: lsit[2]</td>
</tr>
</table>
</body>
The hole idea is to generate an array from a Python Script, which gets it from a xlsx file, and give it over to a HTML page.
Create an array, and for each element create an TD element.
var list = [0, 1, 2, 3, 4, 5],
pushTo = arr => {
arr.forEach((cur , i) => {
let tempElem = document.createElement("TD");
tempElem.innerHTML = `list[${i}]`;
tlist.appendChild(tempElem);
});
};
pushTo(list);
<table>
<tr id="tlist">
</tr>
</table>
Pure JS:
<html>
<head>
<script type="text/javascript">
var list = ['Tim', 'Tom', 'Tam'];
</script>
</head>
<body>
<table>
<tbody>
<tr>
</tr>
</tbody>
</table>
<script>
var tr = document.querySelectorAll('table > tbody > tr')[0];
for (var l in list) {
var index = parseInt(l) + 1;
var td = document.createElement('td');
td.innerHTML = 'Place ' + index + ': ' + list[l];
tr.appendChild(td);
}
</script>
</body>
</html>
AngularJS:
var angularApp = angular.module('angularApp', []);
angularApp.controller('angularCtrl', function ($scope) {
$scope.list = ['Tim', 'Tom', 'Tam'];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularApp" ng-controller="angularCtrl">
<table>
<tbody>
<tr>
<td ng-repeat="l in list">Pace {{$index + 1}}: {{l}}</td>
</tr>
</tbody>
</table>
</div>
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>