I have this script, but i'd like to be able to display 2 rows / 7 cols instead of 7 rows / 2 cols.
<script type="text/javascript">
var date = new Date(); // today
var times = prayTimes.getTimes(date, [48.23, 4.28], 2);
var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
var html = '<table id="timetable">';
html += '<tr><td colspan="7">'+ date.toLocaleDateString()+ '</td></tr>';
for(var i in list) {
html += '<tr><td>'+ list[i]+ '</td>';
html += '<td>'+ times[list[i].toLowerCase()]+ '</td></tr>';
}
html += '</table>';
document.getElementById('table').innerHTML = html;
</script>
Use separate loops to create each row, first iterating and printing the items from the list, then the corresponding times.
var date = new Date(); // today
var times = prayTimes.getTimes(date, [48.23, 4.28], 2);
var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
var html = '<table id="timetable">';
html += '<tr><td colspan="7">'+ date.toLocaleDateString()+ '</td></tr>';
html += '<tr>';
for(var i in list) {
html += '<td>'+ list[i]+ '</td>';
}
html += "</tr>";
html += "<tr>";
for (var i in list) {
html += '<td>'+ times[list[i].toLowerCase()]+ '</td></tr>';
}
html += '</tr></table>';
document.getElementById('table').innerHTML = html;
Here's my solution
2 rows with the first row showing list[i] and the second row showing times[list[i].toLowerCase()]
<script type="text/javascript">
var date = new Date(); // today
var times = prayTimes.getTimes(date, [48.23, 4.28], 2);
var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
var html = '<table id="timetable">';
html += '<tr><td colspan="7">'+ date.toLocaleDateString()+ '</td></tr>';
html += '<tr>';
for(var i in list) {
html += '<td>'+ list[i]+ '</td>';
}
html += '</tr>';
html += '<tr>';
for(var i in list) {
html += '<td>'+ times[list[i].toLowerCase()]+ '</td>';
}
html += '</tr>';
html += '</table>';
document.getElementById('table').innerHTML = html;
Related
var serial_no = 1;
if (response.length > 0) {
for (var count = 0; count < response.length; count++)
{
html += '<tr>';
html += '<td>' + response[count].id + '</td>';
html += '<td>€' + response[count].inkoopprijs + '</td>';
html += '<td>€' + response[count].verkoopprijs + '</td>';
html += '<td>' + response[count].producten + '</td>';
html += '<td><a href="../prijswijzigen.php?edit=' + response[count].id + '" class="edit_btn">Edit</td>';
html += '<td><a href="C_R_U_D.php?del=' + response[count].id + '" class="del_btn">Delete</td>';
html += '</tr>';
serial_no++;
}
} else {
html += '<tr><td colspan="3" class="text-center">No Data Found</td></tr>';
}
document.getElementById('post_data').innerHTML = html;
document.getElementById('total_data').innerHTML = response.length;
I have this for code for a data table, I made this to support a search function, but I can figure out how to set a table length. I want to set it to ten.
im curently working on a script that pulls data from google sheets and transforms it in to a html table. but i have links in my google sheets tabele so i want that these links get but in a button that looks nice but icant figure out how to do that.
i curently have this loob
for (var i = 0; i < entry.length; i++) {
html += '<tr>';
html += '<td>' + entry[i]['gsx$komponente']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$name']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$hersteller']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$preis']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$link']['$t'] + '</td>';
html += '</tr>';
}
html += '</table>';
the entry[i]['gsx$link']['$t'] gets me the links i just cant get it to work inside a button
if you have any idea how i can solve this problem please help me
here is the Complete code
<!DOCTYPE html>
<meta charset="ISO-8859-1">
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
// ID of the Google Spreadsheet
var spreadsheetID = "1Xx0qGY_5Ic1KNB7m8Lu5mZqHE4XQzauvcugTVUGwgqk";
// Make sure it is public or set to Anyone with link can view
var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json";
// make JSON call to Google Data API
$.getJSON(url, function(data) {
// set global html variable
var html = '';
// build table headings
html += '<table>';
html += '<tr>';
html += '<th>Komponente</th>';
html += '<th>Name</th>';
html += '<th>Hersteller</th>';
html += '<th>Preis</th>';
html += '<th>Link</th>';
html += '</tr>';
// loop to build html output for each row
var entry = data.feed.entry;
/**
** Change to descending order
** for (var i = entry.length - 1; i >= 0; i -= 1) {
*/
for (var i = 0; i < entry.length; i++) {
html += '<tr>';
html += '<td>' + entry[i]['gsx$komponente']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$name']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$hersteller']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$preis']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$link']['$t'] + '</td>';
html += '</tr>';
}
html += '</table>';
// output html
$('.console').html(html);
});
// loading animation
var loading = $('.loading');
loading.hide();
$(document)
.ajaxStart(function() {
loading.show();
})
.ajaxStop(function() {
loading.hide();
});
</script>
<div class="console"></div>
<div class="loading">
</div>
</body>
</html>
You just need to wrap the link inside <a> tag
for (var i = 0; i < entry.length; i++) {
html += '<tr>';
html += '<td>' + entry[i]['gsx$komponente']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$name']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$hersteller']['$t'] + '</td>';
html += '<td>' + entry[i]['gsx$preis']['$t'] + '</td>';
html += '<td><a href=' + entry[i]['gsx$link']['$t'] + '>' +entry[i]['gsx$link']['$t'] + '</a></td>';
html += '</tr>';
}
I am pulling all of my data from an Sqlite3 table using Knex, electron and JavaScript and I wish to reorder the columns either on the Knex query or in the HTML/JavaScript side.
My sqlite3 db has the following header data:
id|Role|Password|Reference
With the following code, the table displays in the following order:
Password|Reference|Role|id
I have attempted to utilize the .orderBy method in Knex and have also attempted to reorder in JavaScript, but I cannot seem to reorder the columns.
The Electron side of things, I have:
ipcMain.on('getUserTable:all', (event) => {
let getUserTable =
knex('User').select(['id','Role','Reference','Password']).orderBy('Role');
getUserTable.then(function(tableData){
newWin.webContents.send("userResultSent", tableData);
});
});
In the HTML side of things, I have:
ipc.on('userResultSent', (event, tableData) => {
var html = '<table>';
html += '<tr>';
for( var j in tableData[0] ) {
html += '<th>' + j + '</th>';
}
html += '</tr>';
for( var i = 0; i < tableData.length; i++) {
html += '<tr>';
for( var j in tableData[i] ) {
html += '<td>' + tableData[i][j] + '</td>';
}
}
html += '</table>';
document.getElementById('db_output_container').innerHTML = html;
});
I wish to be able to query the db so that the array displays in the exact order as in the table.
The problem with your current approach is that object are unordered bags of properties. So it does not matter how order your columns - properties order is not guaranteed.
If you need specific order you could use Array instead.
Since you have general code to display tabular data you could do the following
ipcMain.on('getUserTable:all', (event) => {
const columns = ['id','role','reference','password']
let getUserTable =
knex('User').select(columns).orderBy('role');
getUserTable.then(function(tableData){
newWin.webContents.send("userResultSent", {columns, tableData});
});
});
When creating html
ipc.on('userResultSent', (event, {columns, tableData}) => {
var html = '<table>';
html += '<tr>';
columns.forEach(column => {
// if you want to capitalize names just do it here
html += '<th>' + column + '</th>';
})
html += '</tr>';
for( var i = 0; i < tableData.length; i++) {
html += '<tr>';
columns.forEach(column => {
html += '<td>' + tableData[i][column] + '</td>';
})
html += '</tr>';
}
html += '</table>';
document.getElementById('db_output_container').innerHTML = html;
})
At the end of the second for loop, you should close the tr tag. Indeed, you open it right after the second for loop but you don't close it.
I haven't tested yet but it should work.
Your html file should looks like this.
ipc.on('userResultSent', (event, tableData) => {
var html = '<table>';
html += '<tr>';
for( var j in tableData[0] ) {
html += '<th>' + j + '</th>';
}
html += '</tr>';
for( var i = 0; i < tableData.length; i++) {
html += '<tr>';
for( var j in tableData[i] ) {
html += '<td>' + tableData[i][j] + '</td>';
}
html += '</tr>'; /* i added this line here */
}
html += '</table>';
document.getElementById('db_output_container').innerHTML = html;
});
I want to be able to iterate though a html table, get the number of rows, and output the row number of each row on the leftmost field. However, I have 2 problems: not being able to get the number of rows and not getting the desired output.
$(document).ready(function($) {
function create_html_table(tbl_data) {
var tbl = '';
tbl += '<table id ="datarepo">';
tbl += '<thead>';
//Some headers
tbl += '</thead>';
tbl += '<tbody>';
$.each(tbl_data, function(index, val) {
/* This is what I want to use to get the number of rows in the table.
However, uncommenting the following line will cause the whole table to disappear altogether.*/
// var numberrows = document.getElementById("datarepo").rows.length;
// Using static value here instead of numberrows because it is not working.
for (i = 1; i <= 2; i++) {
tbl += '<tr>';
tbl += '<td >' + i + '</td>';
tbl += '<td ><div col_name="filename">' + val['filename'] + '</div></td>';
tbl += '</tr>';
}
});
tbl += '</tbody>';
tbl += '</table>';
}
}
Desired output:
What I got:
You can just get rid of your for loop and use the index of the each loop plus one:
$.each(tbl_data, function(index, val) {
tbl += '<tr>';
tbl += '<td >' + (index + 1) + '</td>';
tbl += '<td ><div col_name="filename">' + val['filename'] + '</div></td>';
tbl += '</tr>';
});
var menuStarters = [["chicken", "5.00"], ["salad", "4.11"], ["soup", "3.88"]];
document.getElementById("menu").innerHTML += '<table>';
for (var i = 0; i < menuStarters.length; i++)
{
document.getElementById("menu").innerHTML += '<tr><td>' + menuStarters[i][0] + '</td><td>' + menuStarters[i][1] + '</td></tr>';
}
document.getElementById("menu").innerHTML += '</table>';
I'm sure I'm probably missing something obvious.
You can't have partial tags in a document. Adding an opening <table> to the innerHTML will cause a full (closed) tag to be inserted. Subsequent additions are outside the table, where tr and td are illegal.
Build the string first, then add it to the container:
var menuStarters = [
["chicken", "5.00"],
["salad", "4.11"],
["soup", "3.88"]
];
var thtml = '<table>';
for (var i = 0; i < menuStarters.length; i++) {
thtml += '<tr><td>' + menuStarters[i][0] + '</td><td>' + menuStarters[i][1] + '</td></tr>';
}
thtml += '</table>';
document.getElementById("menu").innerHTML += thtml
<div id="menu"></div>
I've created a fiddle here
https://jsbin.com/jeguka/edit?html,js,output
var menuStarters = [["chicken", "5.00"], ["salad", "4.11"], ["soup", "3.88"]];
var html = '<table>';
menuStarters.forEach(function(item, index){
html += '<tr><td>' + item[0] + '</td><td>' + item[1] + '</td></tr>';
});
html += '</table>';
document.getElementById("menu").innerHTML = html;