I am trying to create dynamic table in js.
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
for (var i = 0; i < results.rows.length; i++)
{
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for(var j = 0; j < 7; j++)
{
var td = document.createElement('TD');
td.width = '75';
td.appendChild(document.createTextNode(results.rows.item(i).medicine_name));
tr.appendChild(td);
td.appendChild(document.createTextNode(results.rows.item(i).tm_1));
tr.appendChild(td);
td.appendChild(document.createTextNode(results.rows.item(i).tm_2));
tr.appendChild(td);
td.appendChild(document.createTextNode(results.rows.item(i).tm_3));
tr.appendChild(td);
td.appendChild(document.createTextNode(results.rows.item(i).dosage));
tr.appendChild(td);
td.appendChild(document.createTextNode(results.rows.item(i).diagnosis));
tr.appendChild(td);
td.appendChild(document.createTextNode(results.rows.item(i).instructions));
tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
When I execute this code, 7 rows will be created with all the items together. I want to insert each of the data in seperate columns. How can I do it? I want medicine_name to be in one column. tm_1 to be in another and so on.
**The rows will be decided based on results.rows.length value and the number of columns is 7
Totally you have 7 columns and 7 rows.So in first text node td.appendChild(document.createTextNode(results.rows.item((i*7) + 0).medicine_name)); And in second text node use
td.appendChild(document.createTextNode(results.rows.item((i*7) + 1).tm_1)); and so on...
for (var i = 0; i < results.length; i++) {
var html = "";
html += "<tr>";
html += "<td>" + results[i].MedicineName + "</td>";
html += "<td>" + results[i].tm_1+ "</td>";
html += "<td>" + results[i].tm_2+ "</td>";
html += "<td>" + results[i].dosage+ "</td>";
html += "<td>" + results[i].diagnosis+ "</td>";
html += "<td>" + results[i].instructions+ "</td>";
html += "</tr>";
$('#myTableDiv').append(html);
}
<script>
$(document).ready(function () {
var results = getResults();
createTable(results);
});
function createTable(results) {
for (var i = 0; i < results.length; i++) {
var html = "";
html += "<tr>";
html += "<td>" + results[i].MedicineName + "</td>";
html += "<td>" + results[i].tm_1 + "</td>";
html += "<td>" + results[i].tm_2 + "</td>";
html += "<td>" + results[i].dosage + "</td>";
html += "<td>" + results[i].diagnosis + "</td>";
html += "<td>" + results[i].instructions + "</td>";
html += "</tr>";
$('#myTableDiv').append(html);
}
}
function getResults() {
var Results = new Array(0);
for (var j = 0; j < 4; j++) {
var data = new medicine;
data.MedicineName = "Medicine" + j;
data.tm_1 = "tm1" + j;
data.tm_2 = "tm2" + j;
data.dosage = "tm3" + j;
data.diagnosis = "tm4" + j;
data.instructions = "tm5" + j;
Results.push(data);
}
return Results;
};
function medicine() {
var MedicineName = new String();
var tm_1 = new String();
var tm_2 = new String();
var dosage = new String();
var diagnosis = new String();
var instructions = new String();
}
</script>
Related
I have tried everything i know and can't get an alterate tablerow class to work , without having all the rows duplicated or having a bunch of dummy rows inserted
Here is what i have
<script>
fetch("https://www63.myfantasyleague.com/2021/export?TYPE=league&L=43570&JSON=1").then(
res => {
res.json().then(
data => {
console.log(data.league.franchises.franchise);
if (data.league.franchises.franchise.length > 0) {
var temp = "";
temp += "<table id='league_emails'>";
temp += "<tbody>";
temp += "<tr><th>Franchise</th><th>Owner Name</th><th>Email</th></tr>";
data.league.franchises.franchise.forEach((itemData) => {
for (var i = 0; i < data.league.franchises.franchise.length; i++) {
if (i % 2)
temp += '<tr class="eventablerow">';
else
temp += '<tr class="oddtablerow">';
}
temp += "<td>" + itemData.name + "</td>";
temp += "<td>" + itemData.owner_name + "</td>";
temp += "<td>" + itemData.email + "</td>";
});
temp += "</tbody>";
temp += "</table>";
document.getElementsByClassName('commish_league_safe')[0].innerHTML = temp;
}
}
)
}
)
</script>
<div class="commish_league_safe"></div>
The issue lays here and i have tried a dozen things and wrapped it different ways
for (var i = 0; i < data.league.franchises.franchise.length; i++) {
if (i % 2)
temp += '<tr class="eventablerow">';
else
temp += '<tr class="oddtablerow">';
}
<script>
fetch(https://www63.myfantasyleague.com/2021/export?TYPE=league&L=43570&JSON=1).then(
res => {
res.json().then(
data => {
console.log(data.league.franchises.franchise);
if (data.league.franchises.franchise.length > 0) {
var temp = "";
temp += "<table id='league_emails'>";
temp += "<tbody>";
temp += "<tr><th>Franchise</th><th>Owner Name</th><th>Email</th></tr>";
data.league.franchises.franchise.forEach((itemData,i) => {
/* for (var i = 0; i < data.league.franchises.franchise.length; i++) { */
if (i % 2)
temp += '<tr class="eventablerow">';
else
temp += '<tr class="oddtablerow">';
/* } */
temp += "<td>" + itemData.name + "</td>";
temp += "<td>" + itemData.owner_name + "</td>";
temp += "<td>" + itemData.email + "</td>";
temp += "</tr>";
});
temp += "</tbody>";
temp += "</table>";
document.getElementsByClassName('commish_league_safe')[0].innerHTML = temp;
}
}
)
}
)
</script>
<div class="commish_league_safe"></div>
Just before ending the loop close the tr tag.
temp += "" + itemData.email + ""; after this line just add closing tag to append that to temp variable.
This question already has answers here:
How to return an image from http source in Javascript
(5 answers)
Closed 3 years ago.
Hi I want to display multiple image into html table using jquery check my code for more clearification.
In Console i get only image source as
<img src="uploads/">
$.ajax({
url : 'check.php',
success: function (data) {
data = $.parseJSON(data);
var html = "";
for(var a = 0; a < data.length; a++) {
var firstName = data[a].first_name;
var email = data[a].email;
var dob = data[a].dob;
var country = data[a].country;
var gender = data[a].gender;
var meal= data[a].meal;
var img = data[a].profile_pic;
var array = img.split(',');
for (var i = 0; i < array.length; i++) {
var src = "uploads/"+ array[i];
var img1 = '<img src='+ src +'>';
}
html += "<tr>";
html += "<td>" + firstName + "</td>";
html += "<td>" + email + "</td>";
html += "<td>" + dob + "</td>";
html += "<td>" + country + "</td>";
html += "<td>" + gender + "</td>";
html += "<td>" + meal + "</td>";
html += "<td>" + img1 + "</td>";
html += "</tr>";
document.getElementById("data").innerHTML += html;
}
},
Just move your img content inside for loop.
$.ajax({
url : 'check.php',
success: function (data) {
data = $.parseJSON(data);
var html = "";
for(var a = 0; a < data.length; a++) {
var firstName = data[a].first_name;
var email = data[a].email;
var dob = data[a].dob;
var country = data[a].country;
var gender = data[a].gender;
var meal= data[a].meal;
var img = data[a].profile_pic;
var array = img.split(',');
html += "<tr>";
html += "<td>" + firstName + "</td>";
html += "<td>" + email + "</td>";
html += "<td>" + dob + "</td>";
html += "<td>" + country + "</td>";
html += "<td>" + gender + "</td>";
html += "<td>" + meal + "</td>";
html += "<td>";
for (var i = 0; i < array.length; i++) {
var src = "uploads/"+ array[i];
var img1 = '<img src='+ src +'>';
html += img1
}
html += "</td>";
html += "</tr>";
document.getElementById("data").innerHTML += html;
}
},
This is the function in my javascript. Triggered by an onclick function by an another function.
function getValueUsingParentTag(){
var tv_type = [];
var screen_size = [];
var connectivity = [];
var features = [];
var chkArray = [tv_type,screen_size,connectivity,features];
$("#tvtype input:checked").each(function() {
tv_type.push($(this).val());
});
$("#screensize input:checked").each(function() {
screen_size.push($(this).val());
});
$("#connection input:checked").each(function() {
connectivity.push($(this).val());
});
$("#feature input:checked").each(function() {
features.push($(this).val());
});
console.log(chkArray);
//alert(JSON.stringify(chkArray));
alert('hello');
$.get("output-tv.php",{tv_type:tv_type,screen_size:screen_size,connectivity:connectivity,features:features},function(chkArray){
});
}
This is the sample json object returned
{"result":[
{"product_code":"B2810","tv_name":"32B2810","size":"32","tv_type":"INTERNET TV"},
{"product_code":"B2610","tv_name":"48B2610","size":"48","tv_type":"INTERNET TV"}
]}
I need to create a table in javascript based on the json object returned. I dont know how. Please Help.
following function builds the table in a string.
function getTable(data) {
var html = "";
html += "<table><tr><td>product_code</td><td>tv_name</td><td>size</td><td>tv_type</td></tr>";
html += "<tr>";
for(var i = 0, ceiling = data.result.length; i < ceiling; i++) {
var row = data.result[i];
html += "<td>" + row.product_code + "</td>";
html += "<td>" + row.tv_name + "</td>";
html += "<td>" + row.size + "</td>";
html += "<td>" + row.tv_type + "</td>";
}
html += "</tr>";
html += "</table>";
return html;
}
suppose you have a div with id mydiv, you can add the table to this div with following code:
document.getElementById("mydiv").innerHTML = getTable(data);
Here's a simple Javascript only loop example:
http://jsfiddle.net/mCLVL/
var tableData = {"result":[
{"product_code":"B2810","tv_name":"32B2810","size":"32","tv_type":"INTERNET TV"},
{"product_code":"B2610","tv_name":"48B2610","size":"48","tv_type":"INTERNET TV"}
]};
var tableHTML = "<table>";
for (var i = 0; i < tableData["result"].length; i++) {
tableHTML += "<tr>";
tableHTML += "<td>" + tableData["result"][i]["product_code"] + "</td>";
tableHTML += "<td>" + tableData["result"][i]["tv_name"] + "</td>";
tableHTML += "<td>" + tableData["result"][i]["size"] + "</td>";
tableHTML += "<td>" + tableData["result"][i]["tv_type"] + "</td>";
tableHTML += "</tr>";
}
tableHTML += "</table>";
console.log(tableHTML);
It will be so simple by using JSRender. I made a fiddle using jsrender template check it.
Using JSRender Fiddle
I am reading data from an XML file then displaying it in a table in Javascript. However, only the first row displays well and the rest of the rows dont as follows:
results = "<table class= \"table table-condensed table-hover table-bordered table-striped\">";
results += "<caption>Payment History</caption>";
results += "<thead>";
results += "<tr>";
results += "<th>User</th>";
results += "<th>Video Name</th>";
results += "<th>Payment Date</th>";
results += "<th>Time</th>";
results += "</tr>";
results += "</thead>";
results += "<tbody>";
for (var index = 0; index < items.length; index++)
{
var deviceNumElement = items[index].getElementsByTagName("devicenumber")[0];
var VideoNumElement = items[index].getElementsByTagName("videonumber")[0];
var dateElement = items[index].getElementsByTagName("paymentdate")[0];
var timeElement = items[index].getElementsByTagName("paymenttime")[0];
if (deviceNumElement && VideoNumElement && dateElement && timeElement)
{
deviceNum[index] = deviceNumElement.firstChild.data;
videoNum[index] = VideoNumElement.firstChild.data;
paidDate[index] = dateElement.firstChild.data;
paidTime[index] = timeElement.firstChild.data;
results += "<tr>";
results += "<td>"+ deviceNum[index] + "</td>";
results += "<td>" + videoNum[index] + "</td>";
results += "<td>" + paidDate[index] + "</td>";
results += "<td>" + paidTime[index] + "</td>";
results += "</tr>";
}
results += " </tbody>";
results += " </table>";
alert(results);
var div = document.getElementById("paymentDetails");
div.innerHTML = results;
}
The data gets displayed as follows:
Payment History
User VideoName Payment Date Time
43CA3KZXYQGBK Animal Series 14-01-2014 14:12:20
43CA3KZXYQGBKAnimalSeries10-01-201415:40:12
43CA3KZXYQGBKAnimalSeries10-01-201403:21:15
43CA3KZXYQGBKAnimalSeries10-01-201416:39:28
The XML Data:
<xml>
<payments>
<devicenumber>43CA3KZXYQGBK</devicenumber>
<videonumber>1234567</videonumber>
<paymentdate>2014-01-11</paymentdate>
<paymenttime>19:38:19</paymenttime>
</payments>
<payments>
<devicenumber>43CA3KZXYQGBK</devicenumber>
<videonumber>1234567</videonumber>
<paymentdate>2014-01-10</paymentdate>
<paymenttime>19:38:19</paymenttime>
</payments>
<payments>
<devicenumber>43CA3KZXYQGBK</devicenumber>
<videonumber>1234567</videonumber>
<paymentdate>2014-01-01</paymentdate>
<paymenttime>19:38:19</paymenttime>
</payments>
<payments>
<devicenumber>43CA3KZXYQGBK</devicenumber>
<videonumber>1234567</videonumber>
<paymentdate>2014-01-09</paymentdate>
<paymenttime>19:38:19</paymenttime>
</payments>
</xml>
What could i be doing wrong?
The closing tag for table is in the for-loop. You need to put it outside the for-loop:-
for (var index = 0; index < items.length; index++)
{
var deviceNumElement = items[index].getElementsByTagName("devicenumber")[0];
var VideoNumElement = items[index].getElementsByTagName("videonumber")[0];
var dateElement = items[index].getElementsByTagName("paymentdate")[0];
var timeElement = items[index].getElementsByTagName("paymenttime")[0];
if (deviceNumElement && VideoNumElement && dateElement && timeElement)
{
deviceNum[index] = deviceNumElement.firstChild.data;
videoNum[index] = VideoNumElement.firstChild.data;
paidDate[index] = dateElement.firstChild.data;
paidTime[index] = timeElement.firstChild.data;
results += "<tr>";
results += "<td>"+ deviceNum[index] + "</td>";
results += "<td>" + videoNum[index] + "</td>";
results += "<td>" + paidDate[index] + "</td>";
results += "<td>" + paidTime[index] + "</td>";
results += "</tr>";
}
}
results += " </tbody>";
results += " </table>";
alert(results);
var div = document.getElementById("paymentDetails");
div.innerHTML = results;
This is a rather simple question, I am having problems inserting data from Javascript into an HTML table.
Here is an excerpt of my JavaScript:
UPDATED - I got rid of the two loops and simplified it into one, however there is still a problem..
for (index = 0; index < enteredStrings.length; index++) {
output.innerHTML += "<td>" + enteredStrings[index] + "</td>"
+ "<td>" + enteredStringsTwo[index] + "</td>";
nameCounter++;
total.innerHTML = "Total: " + nameCounter;
}
And here is an except of my HTML page:
<table id="nameTable">
<tr>
<th>First</th><th>Last</th>
</tr>
Updated Picture:
Try this (edited):
var tableContent = '<tr>';
for (index = 0; index < enteredStrings.length; index++) {
tableContent += "<td>" + enteredStrings[index] + "</td>";
nameCounter++; // I don't know if this should be there,
// logically the counter should be incremented here as well?
total.innerHTML = "Total: " + nameCounter;
}
tableContent += '</tr><tr>';
for (index = 0; index < enteredStringsTwo.length; index++) {
tableContent += "<td>" + enteredStringsTwo[index] + "</td>";
nameCounter++;
total.innerHTML = "Total: " + nameCounter;
}
tableContent += '</tr>';
output.innerHTML += tableContent;
Edit2 (for updated question code):
var tableContent = '<tr>';
for (index = 0; index < enteredStrings.length; index++) {
tableContent += "<td>" + enteredStrings[index] + "</td>"
+ "<td>" + enteredStringsTwo[index] + "</td>";
nameCounter++;
total.innerHTML = "Total: " + nameCounter;
}
tableContent += '</tr>';
output.innerHTML += tableContent;
Edit3 (after looking at the code sent in email):
var tableContent = "";
for (index = 0; index < enteredStrings.length; index++) {
tableContent += "<tr><td>" + enteredStrings[index] + "</td>"
+ "<td>" + enteredStringsTwo[index] + "</td></tr>";
nameCounter++;
total.innerHTML = "Total: " + nameCounter;
}
output.innerHTML = tableContent;
instead of closing the td you are opening new ones
try
for (index = 0; index < enteredStrings.length; index++) {
output.innerHTML += "<td>" + enteredStrings[index] + "</td>";
total.innerHTML = "Total: " + nameCounter;
}
for (index = 0; index < enteredStringsTwo.length; index++) {
output.innerHTML += "<td>" + enteredStringsTwo[index] + "</td>";
nameCounter++;
total.innerHTML = "Total: " + nameCounter;
}
UPDATE:
you are appending the html to the table instead of the row.
in this case, the browser created a row for you automatically after the each td is appended.
With slight modifications in your code,
var outputTbl = document.getElementById('nameTable');
var output = document.createElement("tr");
outputTbl.appendChild(output);
for (index = 0; index < enteredStrings.length; index++) {
output.innerHTML += "<td>" + enteredStrings[index] + "</td>";
total.innerHTML = "Total: " + nameCounter;
}
for (index = 0; index < enteredStringsTwo.length; index++) {
output.innerHTML += "<td>" + enteredStringsTwo[index] + "</td>";
nameCounter++;
total.innerHTML = "Total: " + nameCounter;
}
If you need to add inner html code here.
<table id="nameTable" style="width:300px;">
<tr>
<th>First</th><th>Last</th>
</tr>
</table>
You can use Jnerator in this case.
If this is your data:
var data = [
{ first: 'Cole', last: 'Alan'},
{ first: 'Michael', last: 'Scott'}
]
You can add them to you table in next way:
for(var i=0; i<data.length; i++) {
var item = data[i];
var row = $j.tr({ child:[$j.td(item.first), $j.td(item.last)] });
nameTable.appendChild(row.dom());
}
nameTotal.innerHTML = 'Total: ' + data.length;
This is example.