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;
}
},
Related
My code is this
var html = "<table>";
for (var i = 0; i < data.length; i++) {
html += "<tr>";
html += "<td>" + data[i].personName + "</td>";
html += "<td>" + data[i].fatherName + "</td>";
html += "<td>" + data[i].personPhone + "</td>";
html += "<td>" + data[i].personCnic + "</td>";
html += "<td>" + data[i].deliveryDate + "</td>";
html += "<td>" + data[i].submissionDate + "</td>";
html += "<td>" + data[i].year + "</td>";
html += "<td>" + data[i].session + "</td>";
html += "<td>" + data[i].board + "</td>";
html += "<td>" + data[i].amount + "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("box").innerHTML = html;
How can I use an event listeners using this approach?
I have seen many methods but none of that match my scenario.
You need to add an onClick which is different for every row, in there you pass as parameter the row index :) than you can handle it on the function.
var html = "<table>";
for (var i = 0; i < data.length; i++) {
html+="<tr onclick='myFunction("+i+")'>";
html+="<td>"+data[i].personName+"</td>";
html+="<td>"+data[i].fatherName+"</td>";
html+="<td>"+data[i].personPhone+"</td>";
html+="<td>"+data[i].personCnic+"</td>";
html+="<td>"+data[i].deliveryDate+"</td>";
html+="<td>"+data[i].submissionDate+"</td>";
html+="<td>"+data[i].year+"</td>";
html+="<td>"+data[i].session+"</td>";
html+="<td>"+data[i].board+"</td>";
html+="<td>"+data[i].amount+"</td>";
html+="</tr>";
}
html+="</table>";
function myFunction(x) {
console.log('index' + x + 'was clicked')
// do the handling here
}
HERE YOU HAVE YOUR DEMO
let data = [{ personName: "test1"}, {personName: "test2"}]
var html = "<table>";
for (var i = 0; i < data.length; i++) {
html+="<tr onclick='myFunction("+i+")'>";
html+="<td>"+data[i].personName+"</td>";
html+="</tr>";
}
html+="</table>";
document.getElementById("demo").innerHTML = html;
function myFunction(i) {
console.log('index ' + i + ' was clicked')
// do the handling here
console.log(data[i])
}
<p id="demo"></p>
You can add the event listeners after you adding their html into the DOM.
Like this:
document.getElementById("box").querySelectorAll('tr').forEach(tr => {
tr.addEventListener('click', function() {
console.log(tr.textContent);
});
});
And working demo: (I added some dumb data so the demo will work)
const data = new Array(5).fill(0).map((_, idx) => ({
personName: `personName-${idx}`,
fatherName: `fatherName-${idx}`,
personPhone: `personPhone-${idx}`,
personCnic: `personCnic-${idx}`,
deliveryDate: `deliveryDate-${idx}`,
submissionDate: `submissionDate-${idx}`,
year: `year-${idx}`,
session: `session-${idx}`,
board: `board-${idx}`,
amount: `amount-${idx}`
}));
var html = "<table>";
for (var i = 0; i < data.length; i++) {
html += "<tr>";
html += "<td>" + data[i].personName + "</td>";
html += "<td>" + data[i].fatherName + "</td>";
html += "<td>" + data[i].personPhone + "</td>";
html += "<td>" + data[i].personCnic + "</td>";
html += "<td>" + data[i].deliveryDate + "</td>";
html += "<td>" + data[i].submissionDate + "</td>";
html += "<td>" + data[i].year + "</td>";
html += "<td>" + data[i].session + "</td>";
html += "<td>" + data[i].board + "</td>";
html += "<td>" + data[i].amount + "</td>";
html += "</tr>";
}
html += "</table>";
const box = document.getElementById("box");
box.innerHTML = html;
box.querySelectorAll('tr').forEach(tr => {
const _tr = tr;
tr.addEventListener('click', () => {
console.log(_tr.textContent);
});
});
<div id="box"></div>
I want to add a td which contains image data which I will add when I calling a function. The function I am returning td with image data, I get blank row only.
var html = "";
html += "<td>" + country + "</td>";
html += "<td>" + gender + "</td>";
html += "<td>" + meal + "</td>";
html+= load_image(img);
html += "<td>" + doc + "</td>";
document.getElementById("data").innerHTML += html;
function
function load_image(ref)
{
var array = ref.split(',');
var html = "";
return "<td>";
for (var i = 0; i < array.length; i++) {
var src = "uploads/"+ array[i];
var img1 = '<img src='+ src +' height="42" width="42">';
return img1
}
html += "</td>";
return html;
}
Use appendChild instead of innerHTML.
Here is a sample:
function load_image(image_src, parentElement){
//image_src is your image's path
//parentElement is your <td> which you want to put an image into it
var newImage = document.createElement('img');
newImage.src = image_src;
newImage.style.width = "300px";
newImage.style.height = "300px";
parentElement.appendChild(newImage);
}
var elem = document.getElementById("data"); //This your parent element, i.e. <td>
load_image("some_image.jpg", elem);
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>
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;