This is my current table-
txt += "<table border='2'>";
for (x in myObj) {
txt += "<tr>"
txt += "<td>" + myObj[x].friend_id + "</td>";
txt += "<td>" + myObj[x].birth_date + "</td>";
txt += "<td>" + myObj[x].first_name + "</td>";
txt += "<td>" + myObj[x].last_name + "</td>";
txt += "<td>" + myObj[x].gender + "</td>";
txt += "<td>" + myObj[x].phone+ "</td>";
txt += "</tr>"
I'm populating it with JSON output, which works fine. However, I don't know how to add the header to the table. I tried adding the header out of the for loop, but it wouldn't align with the table in the loop. How do I connect both?
Current table- https://imgur.com/a/Fo7OdfX
txt += "<table border='2'>";
txt += "<tr>"
txt += "<th>Friend Id</th>";
txt += "<th>Birth Date</th>";
txt += "<th>First Name</th>";
txt += "<th>Last Name</th>";
txt += "<th>Gender</th>";
txt += "<th>Phone</th>";
txt += "</tr>"
for (x in myObj) {
txt += "<tr>"
txt += "<td>" + myObj[x].friend_id + "</td>";
txt += "<td>" + myObj[x].birth_date + "</td>";
txt += "<td>" + myObj[x].first_name + "</td>";
txt += "<td>" + myObj[x].last_name + "</td>";
txt += "<td>" + myObj[x].gender + "</td>";
txt += "<td>" + myObj[x].phone+ "</td>";
txt += "</tr>"
}
Related
I am trying to get my dynamically created HTML table to display text (contained within an array) on hover of a given cell, using the title attribute, but it will not read the contents of the array and instead reads the array name as a string.
Here is the table generating code and have attempted to add titles to cells of 2 columns currently:
var result = "<table id='dataEditTableid' class='stripe' border=1><thead><tr><th><b>Name</b></th><th><b>7.1</b></th><th><b>7.2</b></th><th><b>7.3</b></th><th><b>7.4</b></th><th><b>7.5</b></th><th><b>7.6</b></th><th><b>8.1</b></th><th><b>8.2</b></th><th><b>8.3</b></th><th><b>8.4</b></th><th><b>8.5</b></th><th><b>8.6</b></th><th><b>9.1</b></th><th><b>9.2</b></th><th><b>9.3</b></th><th><b>9.4</b></th><th><b>9.5</b></th><th><b>9.6</b></th></tr></thead>";
result += "<tbody>";
for (var i=0; i < studentsList.length; i++) {
result += "<tr>";
result += "<td>"+studentsList[i][0]+"</td>";
result += "<td title = studentsList[i][3] style='background-color: "+redBlue(studentsList[i][3])+";' id=" + i+3 + "></td>";
result += "<td title = studentsList[i][4] style='background-color: "+redBlue(studentsList[i][4])+";' id=" + i+4 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][5])+";' id=" + i+5 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][6])+";' id=" + i+6 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][7])+";' id=" + i+7 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][8])+";' id=" + i+8 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][9])+";' id=" + i+9 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][10])+";' id=" + i+10 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][11])+";' id=" + i+11 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][12])+";' id=" + i+12 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][13])+";' id=" + i+13 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][14])+";' id=" + i+14 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][15])+";' id=" + i+15 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][16])+";' id=" + i+16 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][17])+";' id=" + i+17 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][18])+";' id=" + i+18 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][19])+";' id=" + i+19 + "></td>";
result += "<td style='background-color: "+redBlue(studentsList[i][20])+";' id=" + i+20 + "></td>";
result += "</tr>";
}
result += "</tbody></table>";
dataTable.innerHTML = result;
What have I done wrong?
result += "<td title='"+ studentsList[i][4] +"' style='background-color: "+redBlue(studentsList[i][4])+";' id=" + i+4 + "></td>";
you've messed quotations, please replace this with the older ones
also, no need to repeat stuff just add another for loop inside the for:
for (var i = 0; i < studentsList.length; i++) {
result += "<tr>";
result += "<td>" + studentsList[i][0] + "</td>";
result += "<td title='"+ studentsList[i][3] +"' style='background-color: "+redBlue(studentsList[i][3])+";' id=" + i+3 + "></td>";
result += "<td title='"+ studentsList[i][4] +"' style='background-color: "+redBlue(studentsList[i][4])+";' id=" + i+4 + "></td>";
for (var j = 4; j = < 20; i++) {
result += "<td style='background-color: " + redBlue(studentsList[i][j]) + ";' id=" + i + j + "></td>";
}
result += "</tr>";
}
I have a searchable HTML table, that retrieves SharePoint list items from a multiple subsites, and everything about it is nearly perfect. The one issue I am facing is that the "Program" item keeps printing every time the function runs through/loops, but I only want it to print the "Program" header/item once, and have the correlating items all print under the one Program header. I will attach below a screenshot of my table and how it prints, as well as my function that reads the information and prints it to the table. Any suggestions/help/advice would be greatly appreciated.
Would I use something along the lines of an if statement?
For example, have the Meeting Minutes and MSR rows for each type of Program print under only one Program.
Actual Result:
**Expected Result**
+------------+----------------------+-----------+------------+--------------+--------------+
| Program | To | Date | Approved | Notes | Deliverable |
+------------+----------------------+-----------+------------+--------------+--------------+
| Program 1 | example#example.com | 12/23/2018| Yes | Example Notes| MSR |
| | example#example.com | 03/30/2020| Yes | Example Notes| Meeting Mins |
+------------+----------------------+-----------+------------+--------------+--------------+
| Program 2 | example#example.com | 12/23/2018| Yes | Example Notes| MSR |
| | example#example.com | 12/03/2017| Yes | Example Notes| Meeting Mins |
+------------+----------------------+-----------+------------+--------------+--------------+
| Program 3 | example#example.com | 04/17/2020| Yes | Example Notes| MSR |
| | example#example.com | 03/30/2020| No | Example Notes| Meeting Mins |
+------------+----------------------+-----------+------------+--------------+--------------+
Here is my code:
.then(([r1, r2, r3]) => {
const objItems = r1.concat(r2,r3);
console.log(objItems);
var tableContent =
'<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
"<td><strong>To</strong></td>" +
"<td><strong>Date Submitted</strong></td>" +
"<td><strong>Approved</strong></td>" +
"<td><strong>Notes</strong></td>" +
"<td><strong>Deliverable</strong></td>" +
"</tr></thead><tbody>";
for (var i = 0; i < objItems.length; i++) {
if (objItems.Program == "1"){
tableContent += "<tr>";
tableContent += "<td>" + objItems[i].Program + "</td>";
tableContent += "</tr>";
tableContent += "<tr>";
tableContent += "<td> </td>";
tableContent += "<td>" + objItems[i].To + "</td>";
tableContent += "<td>" + objItems[i].Date + "</td>";
tableContent += "<td>" + objItems[i].Approved + "</td>";
tableContent += "<td>" + objItems[i].Notes + "</td>";
tableContent += "<td>" + objItems[i].Deliverable + "</td>";
tableContent += "</tr>";
}
else if (objItems.Program == "2"){
tableContent += "<tr>";
tableContent += "<td>" + objItems[i].Program + "</td>";
tableContent += "</tr>";
tableContent += "<tr>";
tableContent += "<td> </td>";
tableContent += "<td>" + objItems[i].To + "</td>";
tableContent += "<td>" + objItems[i].Date + "</td>";
tableContent += "<td>" + objItems[i].Approved + "</td>";
tableContent += "<td>" + objItems[i].Notes + "</td>";
tableContent += "<td>" + objItems[i].Deliverable + "</td>";
tableContent += "</tr>";
}
else if (objItems.Program == "3"){
tableContent += "<tr>";
tableContent += "<td>" + objItems[i].Program + "</td>";
tableContent += "</tr>";
tableContent += "<tr>";
tableContent += "<td> </td>";
tableContent += "<td>" + objItems[i].To + "</td>";
tableContent += "<td>" + objItems[i].Date + "</td>";
tableContent += "<td>" + objItems[i].Approved + "</td>";
tableContent += "<td>" + objItems[i].Notes + "</td>";
tableContent += "<td>" + objItems[i].Deliverable + "</td>";
tableContent += "</tr>";
}
}
$("#deliverables").append(tableContent);
})
.catch((err) => {
alert("Error: " + err);
console.error(err);
});
});
[1]: https://i.stack.imgur.com/ULOMF.png
var tableData =
[{'program': 'Program 1', 'To': 'example1', Date: '8/5', Approved: 'Yes', Notes: 'Note', Deliverable: 'Deliverable'},
{'program': 'Program 1', 'To': 'example2', Date: '8/5', Approved: 'Yes', Notes: 'Note', Deliverable: 'Deliverable'},
{'program': 'Program 2', 'To': 'example3', Date: '8/5', Approved: 'No', Notes: 'Note', Deliverable: 'Deliverable'},
{'program': 'Program 3', 'To': 'example4', Date: '8/5', Approved: 'Yes', Notes: 'Note', Deliverable: 'Deliverable'},
{'program': 'Program 3', 'To': 'example4', Date: '8/5', Approved: 'Yes', Notes: 'Note', Deliverable: 'Deliverable'},
{'program': 'Program 3', 'To': 'example4', Date: '8/5', Approved: 'Yes', Notes: 'Note', Deliverable: 'Deliverable'}]
//Fake loadData(...)
Promise.all(tableData)
.then((r1) => {
const objItems = r1;
makeTable(objItems);
})
function makeTable(tableData){
var group = {};
for(var d of tableData){
if(group[d.program]){
group[d.program].push(d);
} else {
group[d.program] = [d];
}
}
var tableContent = ''; // I put the table in the html but you can populate it here
for (var prop in group) {
tableContent += "<tr>";
tableContent += "<td rowspan=\""+ group[prop].length +"\">" + prop + "</td>";
tableContent += "<td>" + group[prop][0].To + "</td>";
tableContent += "<td>" + group[prop][0].Date + "</td>";
tableContent += "<td>" + group[prop][0].Approved + "</td>";
tableContent += "<td>" + group[prop][0].Notes + "</td>";
tableContent += "<td>" + group[prop][0].Deliverable + "</td>";
tableContent += "</tr>";
for(var i = 0; i < group[prop].length - 1; i++){
tableContent += "<tr>";
tableContent += "<td>" + group[prop][i+1].To + "</td>";
tableContent += "<td>" + group[prop][i+1].Date + "</td>";
tableContent += "<td>" + group[prop][i+1].Approved + "</td>";
tableContent += "<td>" + group[prop][i+1].Notes + "</td>";
tableContent += "<td>" + group[prop][i+1].Deliverable + "</td>";
tableContent += "</tr>";
}
}
$("#deliverablesTable").append(tableContent);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="deliverablesTable" style="width:100%" border="1 px">
<thead>
<tr>
<td><strong>Program</strong></td>
<td><strong>To</strong></td>
<td><strong>Date</strong></td>
<td><strong>Approved</strong></td>
<td><strong>Notes</strong></td>
<td><strong>Deliverable</strong></td>
</tr></thead><tbody>
I have a code that automatically creates a table for me. It gathers information from a saved file, however, I have two of these files and currently can call one at the time. How can I possibly wrap this code in a function so that there are two calls on the same code with different information that will be put in it? So right now I am using getElementById on file "house-data" but I also want to have this same js on a file "senate-data"
I thought of creating some sort of if statement where if(you have one file): do this
else
do that. But this method doesnt work.
var table = "";
var cols = 1;
var members = data.results[0].members;
var rows = members.length;
table += "<tr>" +
"<th>" + "Full Name" + "</th>" +
"<th>" + "Party" + "</th>" +
"<th>" + "State" + "</th>" +
"<th>" + "Seniority"+ "</th>" +
"<th>" + "Total Votes"+ "</th>" + "</tr>";
for (var r = 0; r < rows; r++) {
table += "<tr>";
for (var c = 0; c < cols; c++) {
table +=
"<td>" + members[r].first_name +", "+
(members[r].middle_name || " ") +" "+
members[r].last_name + "</td>";
table += "<td>" + members[r].party + "</td>" + "<td>" + members[r].state + "</td>" + "<td>" + members[r].seniority + "</td>";
if (members[r].votes_with_party_pct === undefined) {
table += "<td>" + "-" + "</td>"
} else {
table += "<td>" + members[r].votes_with_party_pct + "%" + "</td>"
}
}
table += "<tr>";
}
document.getElementById("house-data").innerHTML = JSON.stringify(table);
function tableCreator(elementID, data) {
[...]
document.getElementById(elementID)[...]
}
above will work for you and keep in mind to check
var members = data.results[0].members;
is available before going to for loop
i want to ask about my code..
i have made jquery server side function for diplaying data from database into a table. i made the code firstly working well but after i try to add more code for creating a thead before creating the tbody the code wont work..
this is the code i made..
please help me to solve this
// JavaScript Document
$(document).ready(function() {
$.ajax({
type:"POST",
url:"../php/absen/spl_inputselect_data.php",
success: function(data){
var list = JSON.parse(data);
for(var i=0; i < list.length; i++){
var tr = "<tr>";
theadData = '<tr>' +
'<th>Nama Karyawan</th>' +
'<th>Tanggal</th>' +
'<th>Bagian</th>' +
'<th>Cost Center</th>' +
'<th>Jam Mulai</th>' +
'<th>Jam Selesai</th>' +
'<th>Status Lembur</th>' +
'<th>Total Jam</th>' +
'<th>Tugas</th>' +
'</tr>';
tr += "<td>" +list[i]['no']+"</td>";
tr += "<td>" +list[i]['nama']+"</td>";
tr += "<td>" +list[i]['tanggal']+"</td>";
tr += "<td>" +list[i]['jam_mulai']+"</td>";
tr += "<td>" +list[i]['jam_selesai']+"</td>";
tr += "<td>" +list[i]['status']+"</td>";
tr += "<td>" +list[i]['total']+"</td>";
tr += "<td>" +list[i]['bagian']+"</td>";
tr += "<td>" +list[i]['cost']+"</td>";
tr += "<td>" +list[i]['tugas']+"</td>";
tr += "</tr>";
$("#check_data tbody").append(tr);
}
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
You should append your head directly to the table only once and not within the loop:
$(document).ready(function() {
$.ajax({
type:"POST",
url:"../php/absen/spl_inputselect_data.php",
success: function(data){
var list = JSON.parse(data);
if(list.length > 0)
{
$("#check_data thead").html('<tr>' +
'<th>Nama Karyawan</th>' +
'<th>Tanggal</th>' +
'<th>Bagian</th>' +
'<th>Cost Center</th>' +
'<th>Jam Mulai</th>' +
'<th>Jam Selesai</th>' +
'<th>Status Lembur</th>' +
'<th>Total Jam</th>' +
'<th>Tugas</th>' +
'</tr>');
for(var i=0; i < list.length; i++){
var tr = "<tr>";
tr += "<td>" +list[i]['no']+"</td>";
tr += "<td>" +list[i]['nama']+"</td>";
tr += "<td>" +list[i]['tanggal']+"</td>";
tr += "<td>" +list[i]['jam_mulai']+"</td>";
tr += "<td>" +list[i]['jam_selesai']+"</td>";
tr += "<td>" +list[i]['status']+"</td>";
tr += "<td>" +list[i]['total']+"</td>";
tr += "<td>" +list[i]['bagian']+"</td>";
tr += "<td>" +list[i]['cost']+"</td>";
tr += "<td>" +list[i]['tugas']+"</td>";
tr += "</tr>";
$("#check_data tbody").append(tr);
}
}
return false;
}
});
});
I'm trying to get a JSON input with AJAX and load it in a select control.
but when I run it :\ It stuck on "Downloading the recipes....".
anyone see the problem maybe? (I tried couple of changes but nothing work so far)
1 more issue can anyone think on a shorter way to do the
ConvertToTable(targetNode)
cuse it's way to long and complex, I think :\
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp;
document.getElementById("span").style.visibility = "visible";
document.getElementById("span1").style.visibility = "hidden";
document.getElementById("button").style.visibility = "hidden";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
result = xmlhttp.responseText;
result = eval('(' + result + ')');
txt = "<select onchange='ShowRecipeDetails(this)'>";
for (i = 0; i < result.length; i++) {
txt = txt + "<option VALUE=" + result[i].recipe + ">" + result[i].recipe + "</option>";
}
txt = txt + "</select >";
document.getElementById("span").style.visibility = "hidden";
document.getElementById("span1").style.visibility = "visible";
document.getElementById("myDiv").innerHTML = txt;
}
}
xmlhttp.open("POST", "http://food.cs50.net/api/1.3/menus?meal=BREAKFAST&sdt=2011-03-21&output=json", true);
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xmlhttp.send();
}
function ShowRecipeDetails(event) {
// get the index of the selected option
var idx = event.selectedIndex;
// get the value of the selected option
var field = event.options[idx].value;
$.ajax({
type: "GET",
url: "http://food.cs50.net/api/1.3/recipes?&output=json&id=" + field,
success: function (data) {
$("#TableDiv").html(ConvertToTable(data[0]));
}
});
}
function ConvertToTable(targetNode) {
var table = "<table border = 1 borderColor =green>";
table += "<tr>";
table += "<td>" + "ID" + "</td>";
table += "<td>" + targetNode.id + "</td>";
table += "</tr>";
table += "<td>" + "Ingredients:" + "</td>";
table += "<td>" + targetNode.ingredients + "</td>";
table += "</tr>";
table += "<td>" + "Name:" + "</td>";
table += "<td>" + targetNode.name + "</td>";
table += "</tr>";
table += "<td>" + "Size:" + "</td>";
table += "<td>" + targetNode.size + "</td>";
table += "</tr>";
table += "<td>" + "Unit" + "</td>";
table += "<td>" + targetNode.unit + "</td>";
table += "</tr>";
table += "<td>" + "VEGETARIAN:" + "</td>";
table += "<td>" + targetNode.VEGETARIAN + "</td>";
table += "</tr>";
table += "</tr>";
table += "</table>"
return table;
}
</script>
and the HTML:
<button id="button" type="button" onclick="loadXMLDoc()" >Get all recipes</button>
<br />
<span id="span" style="visibility:hidden">Downloading the recipes....</span>
<span id="span1" style="visibility:hidden">Please choose a recipe ID to view</span>
<div id="jsonDiv"></div>
<div id="myDiv"></div>
<div id="TableDiv"></div>
The HarvardFood API also supplies a JSONP version. So if you change your URL to this:
http://food.cs50.net/api/1.3/menus?meal=BREAKFAST&sdt=2011-03-21&output=jsonp&callback=parseResponse
you can create a parseResponse function to handle the data that comes back, and you can do the AJAX by inserting a script tag.
The problem is that you're running afoul the Same Origin Policy.
I see that you've updated the question to use jQuery AJAX. That offers a jsonp data type, which might be easier than adding a script tag.