I'm trying to add <th> tag to the table, but I am not able to add. I want to add Id, Name and Prof as a table header.
var obj=[{id:"01",name:"Bob",prof:"Soft Engg"},{id:"02",name:"George",prof:"Admin"},{id:"03",name:"Paul",prof:"Front End"}];
var table = document.createElement("table");
table.setAttribute("id","myTable");
document.body.appendChild(table);
for(i=0;i<obj.length;i++) {
var row = document.createElement("tr")
table.appendChild(row);
var head = document.createElement("th");
row.appendChild(head);
for (key in obj[i]) {
var cell = document.createElement("td");
row.appendChild(cell);
cell.innerHTML = obj[i][key];
}
}
You can do something like this
var obj = [{
id: "01",
name: "Bob",
prof: "Soft Engg"
}, {
id: "02",
name: "George",
prof: "Admin"
}, {
id: "03",
name: "Paul",
prof: "Front End"
}];
var table = document.createElement("table");
table.setAttribute("id", "myTable");
document.body.appendChild(table);
// check array length
if (obj.length) {
// create row for table head
var row = document.createElement("tr")
// append it to table
table.appendChild(row);
// get kesys from first object and iterate
Object.keys(obj[0]).forEach(function(v) {
// create th
var cell = document.createElement("th");
// append to tr
row.appendChild(cell);
// update th content as key value
cell.innerHTML = v;
});
}
for (var i = 0; i < obj.length; i++) {
var row = document.createElement("tr")
table.appendChild(row);
for (key in obj[i]) {
var cell = document.createElement("td");
row.appendChild(cell);
cell.innerHTML = obj[i][key];
}
}
I couldn't stop thinking about this post and use it as JS practice, here I go:
var obj=[
{id:"01",name:"Bob",prof:"Soft Engg"},
{id:"02",name:"George",prof:"Admin"},
{id:"03",name:"Paul",prof:"Front End"}
];
var headers=['id','name','prof'];
var table = document.createElement("table");
table.setAttribute("id","myTable");
document.body.appendChild(table);
var tableHeader = document.createElement("thead");
table.appendChild(tableHeader);
tableHeaderRow = document.createElement("tr");
table.appendChild(tableHeaderRow);
for(i=0;i<headers.length;i++){
var tableHeader = document.createElement("th");
tableHeaderRow.appendChild(tableHeader);
tableHeader.innerHTML = headers[i]
}
var tableBody = document.createElement("tbody");
table.appendChild(tableBody);
for(i=0;i<headers.length;i++){
var tbodyrows=document.createElement("tr");
for (key in obj[i]) {
tableBody.appendChild(tbodyrows);
var cell = document.createElement("td");
tbodyrows.appendChild(cell);
cell.innerHTML = obj[i][key];
}
}
Related
I tried to create table but I can't create td in every tr, td is creating only in first td what is in table, how I can solve the problem?
// Creating div
var main = document.createElement("div")
main.innerHTML = ""
document.body.appendChild(main)
main.setAttribute("id", "main")
//Creating Icons
var puzzleico = document.createElement("div")
puzzleico.innerHTML = ""
document.getElementById("main").appendChild(puzzleico)
puzzleico.setAttribute("id", "puzzleico")
var puzzleico = document.getElementById("puzzleico").onclick = function() {createtable()};
//Creating tr and td
function createtable() {
//Creating Table
var table = document.createElement("table")
table.innerHTML = ""
document.body.appendChild(table)
table.setAttribute("id", "table")
for (var i = 0; i < 50; i++) {
var tr = document.createElement("tr")
tr.innerHTML = ""
document.getElementById("table").appendChild(tr)
tr.setAttribute("id", "tr")
var td = document.createElement("td")
td.innerHTML = ""
document.getElementById("tr").appendChild(td)
}
}
Element id's within a document need to be unique. The issue here is that your document.getElementById("tr") will always return the first element it finds with that id and so, all of your <td> elements will be appended to the first <tr>.
In order to fix it you can remove the tr.setAttribute("id", "tr") line and use the already existing tr variable to append the td child to.
function createtable() {
//Creating Table
var table = document.createElement("table")
table.innerHTML = ""
document.body.appendChild(table)
table.setAttribute("id", "table")
for (var i = 0; i < 50; i++) {
var tr = document.createElement("tr")
tr.innerHTML = ""
document.getElementById("table").appendChild(tr);
var td = document.createElement("td");
td.innerHTML = "test"
tr.appendChild(td)
}
}
createtable();
The above code will work, but using the already declared variables instead of finding them again can also be applied to the table case. Also, table.innerHTML = "" doesn't add any value because the innerHTML is already empty when you create a new element.
function createtable() {
//Creating Table
var table = document.createElement("table");
document.body.appendChild(table);
for (var i = 0; i < 50; i++) {
var tr = document.createElement("tr");
table.appendChild(tr);
var td = document.createElement("td");
td.innerHTML = "test";
tr.appendChild(td);
}
}
You can use this to create the table:
function createTable(){
//Creating And Appending Child
let table = document.createElement('table');
document.body.appendChild(table);
for(let i = 0; i < 50; i++){
let tr = document.createElement('tr');
let td = document.createElement('td');
td.innerHTML = i;
tr.appendChild(td);
table.appendChild(tr);
}
}
Here is the link to my codepen:
https://codepen.io/prabodhpanda/pen/gOPLqYe?editors=1010
id attribute of each element in DOM should be unique. You set same id for each tr element you create. document.getElementById element always returns the first element match by the id. This is the reason of the issue. Your last code snippet should be:
function createtable() {
//Creating Table
var table = document.createElement("table")
table.innerHTML = ""
document.body.appendChild(table)
table.setAttribute("id", "table")
for (var i = 0; i < 50; i++) {
var tr = document.createElement("tr")
tr.innerHTML = ""
document.getElementById("table").appendChild(tr)
tr.setAttribute("id", "tr" + i) // Check this
var td = document.createElement("td")
td.innerHTML = ""
document.getElementById("tr" + i).appendChild(td) // Check this
}
}
tr.appendChild(td) should also work if you don't need ID attribute.
I edited your answer and got what I want.
//Creating tr and td
function createtable() {
//Creating Table
var table = document.createElement("table")
table.innerHTML = ""
document.body.appendChild(table)
table.setAttribute("id", "table")
for (var i = 0; i < 50; i++) {
var tr = document.createElement("tr")
tr.innerHTML = ""
document.getElementById("table").appendChild(tr)
tr.setAttribute("id", "tr")
for (var v = 0; v < 50; v++) {
var td = document.createElement("td")
td.innerHTML = ""
tr.appendChild(td)
}
}
}
I want to export JSON data to pdf with out using any third party plugin.I am having data in Json and need to display data in pdf table structure using JQuery. Please let me know if its possible.
Here is sample JSON
jsonResult.Products[
{PRODUCT_ID: 123, PRODUCT_NUMBER: "00022", PRODUCT_NAME: "HONDA", PRODUCT_TYPE: "VEHICLE "},
{PRODUCT_ID: 783, PRODUCT_NUMBER: "08412394", PRODUCT_NAME: "HONDA", PRODUCT_TYPE: "MOTOR "}.....]
Code snippet using jS PDF-autotable
<script src="~/Scripts/JsPDF-Autotable.js"></script>
$("#btnExportPDF").click(function () {
let table = document.createElement('table');
table.setAttribute("id", "pdfTable");
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');
let thead_tr = document.createElement('tr');
let sample = dataResult.Cases[0];
let columns = [];
let columnData = [];
for (let column in sample) columns.push(column);
for (let i = 0; i < columns.length; i++) {
let th = document.createElement('th');
th.innerText = columns[i];
thead_tr.appendChild(th);
}
thead.appendChild(thead_tr);
for (let i = 0; i < dataResult.Cases.length; i++) {
let tr = document.createElement('tr');
let product = dataResult.Cases[i];
for (let column = 0; column < columns.length; column++) {
let td = document.createElement('td');
td.innerText = product[columns[column]];
columnData.push(product[columns[column]]);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(thead);
table.appendChild(tbody);
var doc = new jsPDF('p', 'pt');
doc.autoTable(columns, columnData)
doc.save("table.pdf");
});
I tried to export to pdf using jspdf autotable and I am getting below error
JsPDF-Autotable.js:1538 Use of deprecated autoTable initiation
Yes it's definitely possible.
The process is very simple:
Prepare your JSON data
Create a table element filled with your data
Export table with JSPDF
Creating the table
let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody ');
let thead_tr = document.createElement('tr');
let sample = jsonResult.Products[0];
let columns = [];
for (let column in sample) columns.push(column);
for (let i = 0; i<columns.length;i++){
let th = document.createElement('th');
th.innerText = columns[i];
thead_tr.appendChild(th);
}
thead.appendChild(thead_tr);
for (let i = 0; i<jsonResult.Products.length;i++){
let tr = document.createElement('tr');
let product = jsonResult.Products[i];
for (let column = 0; column < columns.length; column++){
let td = document.createElement('td');
td.innerText = product[columns[column]];
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(thead);
table.appendChild(tbody);
document.body.appendChild(table); // Now this is your table which you are going to export
Follow this SO answer/guide to export the HTML table with JSPDF
I'm making a table but using only Javascript. I did the table already and it shows right on console, but I can't make it visible on the page. I tried appendChild() and insertBefore() and it doesn't work, and also can't make the URL clickable.
Here is my code:
var companies = [
{
id: 1,
name: 'Google',
link: 'http://google.com/'
},
{
id: 2,
name: 'Microsoft',
link: 'http://microsoft.com/'
},
{
id: 3,
name: 'Apple',
link: 'http://apple.com'
}
];
var tbl = document.createElement('table');
var input = document.getElementById('input');
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");
var tr_head = document.createElement("tr");
var th_id = document.createElement("th");
var th_name = document.createElement("th");
var th_link = document.createElement("th");
th_id.textContent = "Id";
th_name.textContent = "Name";
th_link.textContent = "link";
tr_head.appendChild(th_id);
tr_head.appendChild(th_name);
tr_head.appendChild(th_link);
thead.appendChild(tr_head);
for(var i = 0; i < companies.length; i++) {
var tr_body = document.createElement("tr");
var td_id = document.createElement("td");
var td_name = document.createElement("td");
var td_link = document.createElement("td");
// var id = companies[i].id;
// var name = companies[i].name;
// var link = companies[i].link;
td_id.textContent = companies[i].id;
td_name.textContent = companies[i].name;
td_link.textContent = companies[i].link;
tr_body.appendChild(td_id);
tr_body.appendChild(td_name);
tr_body.appendChild(td_link);
tbody.appendChild(tr_body);
}
tbl.appendChild(thead);
tbl.appendChild(tbody);
console.log(tbl);
// input.appendChild(tbl);
Do you write the output to the document? Else it will just remain in the script.
Like this:
document.body.appendChild(tbl);
Not the best way, but it's a way...
var input = document.getElementById("input");
var rows = "";
for(var i = 0; i < companies.length; i++) {
rows += "<tr><td>"+companies[i].id+"</td>"
+ "<td><a href='"+companies[i].link+"'>"+companies[i].name+"</a></td></tr>"
}
var table = "<table>"+rows+"</table>";
input.innerHTML = table;
I'm trying to create dynamically a table using JavaScript.
Here is the code I'm using (or here http://liveweave.com/mqG5iT):
function Process(){
CreatTable(['First Name', 'Last Name', 'Email']);
}
function CreatTable(data) {
var checkbox;
var table;
var thead;
var tr;
var th;
var tbody;
tablearea = document.getElementById('ShowDataID');
table = document.createElement('table');
table.id = "ContactsTable";
thead = document.createElement('thead');
tr = document.createElement('tr');
tbody = document.createElement('tbody');
//create columns input checkbox column
checkbox = CreateHTMLElement("chkBoxAllEmails", "chkBoxAllEmails", "SelectAllEmails()", "checkbox", "false");
th = document.createElement('th');
th.appendChild(checkbox);
tr.appendChild(th);
thead.appendChild(tr);
//create columns FirstName,LastName,Emails
for (var i = 0; i < data.length; i++) {
var headerTxt = document.createTextNode(data[i]);
th = document.createElement('th');
th.appendChild(headerTxt);
tr.appendChild(th);
thead.appendChild(tr);
}
table.appendChild(thead);
//create rows and addind to table
for (var i = 0; i < 2000; i++) {
tr = document.createElement('tr');
checkbox = CreateHTMLElement("11", "11", "11", "checkbox", "11");
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.cells[0].appendChild(checkbox); tr.cells[1].appendChild(document.createTextNode('John'+i.toString()));
tr.cells[2].appendChild(document.createTextNode('McDowell'));
tr.cells[3].appendChild(document.createTextNode('ddd#gmail.com'));
tbody.appendChild(tr);
table.appendChild(tbody);
}
document.getElementById("TablePagingArea").appendChild(table);
//return table;
}
function CreateHTMLElement(id, name, onclick, type, value) {
var HTMLElement = document.createElement('input');
HTMLElement.id = id;
HTMLElement.name = name;
HTMLElement.onclick = onclick;
HTMLElement.type = type;
HTMLElement.value = value;
return HTMLElement;
}
With a small set of data 1000-3000 rows it works relatively well but, some of the data set contains upwards of 5000 rows which causes Firefox to crash and close or become unresponsive.
My question is: is there a better way to accomplish what I am trying to do?
Most efficient way to create a bunch of elements is to create a string and create element from this string.
Most efficient way to create a string of element is to join from array
So you should refactor your code to
Create an array of elements like a[i] = "<tr><intput type='checkbox'></tr>";
Join an array to get one string var s = a.join();
Create DOM elements like var div = document.createElement('div'); div.innerHTML = s;
I try to create dynamic table using JavaScript, the table contains two columns first name and family name.
Here is the JavaScropt code:
function CreatTable() {
var tablearea = document.getElementById('ShowDataID');
var table = document.createElement('table');
var thead = document.createElement("thead");
var tr = document.createElement('tr');
var th = document.createElement('th');
var firstNameTxt = document.createTextNode("First Name");
th.appendChild(firstNameTxt);
tr.appendChild(th);
thead.appendChild(tr);
table.appendChild(thead);
var familyNameTxt = document.createTextNode("Family Name");
th.appendChild(familyNameTxt);
tr.appendChild(th);
thead.appendChild(tr);
table.appendChild(thead);
for (var i = 1; i < 4; i++) {
var tr = document.createElement('tr');
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.cells[0].appendChild(document.createTextNode('John'))
tr.cells[1].appendChild(document.createTextNode('McDowell'))
table.appendChild(tr);
}
tablearea.appendChild(table);
}
And here the the result I get:
My question is why do I get "McDowell" not under the family name column.Why it is shifted?What I am missing?
Try to create a new th for the second time, don't use the already used one
function CreatTable() {
var tablearea = document.getElementById('ShowDataID');
var table = document.createElement('table');
var thead = document.createElement("thead");
var tr = document.createElement('tr');
var th = document.createElement('th');
var firstNameTxt = document.createTextNode("First Name");
th.appendChild(firstNameTxt);
tr.appendChild(th);
thead.appendChild(tr);
table.appendChild(thead);
//********* Look here *****************
var familyNameTxt = document.createTextNode("Family Name");
th = document.createElement('th'); //*** Create a new th here. Dont use the old one
//********* Look here *****************
th.appendChild(familyNameTxt);
tr.appendChild(th);
thead.appendChild(tr);
table.appendChild(thead);
for (var i = 1; i < 4; i++) {
var tr = document.createElement('tr');
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.cells[0].appendChild(document.createTextNode('John'))
tr.cells[1].appendChild(document.createTextNode('McDowell'))
table.appendChild(tr);
}
tablearea.appendChild(table);
}
DEMO
SOLUTION
function CreatTable() {
var tablearea = document.getElementById('ShowDataID');
var table = document.createElement('table');
var thead = document.createElement('thead');
var tr = document.createElement('tr');
var th = document.createElement('th');
var firstNameTxt = document.createTextNode("First Name");
th.appendChild(firstNameTxt);
tr.appendChild(th);
thead.appendChild(tr);
table.appendChild(thead);
var familyNameTxt = document.createTextNode("Family Name");
th = document.createElement('th');
th.appendChild(familyNameTxt);
tr.appendChild(th);
thead.appendChild(tr);
table.appendChild(thead);
for (var i = 1; i < 4; i++) {
tr = document.createElement('tr');
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.cells[0].appendChild(document.createTextNode('John'));
tr.cells[1].appendChild(document.createTextNode('McDowell'));
table.appendChild(tr);
}
tablearea.appendChild(table);
}
CreatTable();
you miss creating new th
var familyNameTxt = document.createTextNode("Family Name");
th = document.createElement('th'); // this line missed
th.appendChild(familyNameTxt);
Create dynamic table row and remove on click delete button row. for this you can use jQuery two method
.append() this method used for append html table row, on button click of .add_row_record its get value from text box and append data on table row.
.remove () this method is used for remove dynamic content data, in this example we are used for delete append record. .delete_row_record button remove the record on the basis of selected checkbox.
<script type="text/javascript">
$(document).ready(function(){
//add row
$(".add_row_record").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var mobile = $("#mobile_number").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td><td>" + mobile + "</td></tr>";
$("table tbody").append(markup);
});
// select record for delete
$(".delete_row_record").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
Demo