Develop Reference

Pulling data from SQLite, but data is undefined

I have a class project where I need to pull data from my SQLite DB and place it into <table>.
But every time I reload the page I get this Table image and I was hoping for some help. I'm new to JavaScript and I need to finish this task in a few hours, I've tried to pull the data into an object and from the object into this line str += "<td>" + results.rows.item(i).Firstname + "</td>" and still it didn't work.
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM Customers_Table ', [], function (tx, results) {
var len = results.rows.length, i;
document.getElementById("tablea").innerHTML = '';
var str = '';
str += "<th>FirstName</th>";
str += "<th>LastName</th>";
str += "<th>Address</th>";
str += "<th>City</th>";
str += "<th>Email</th>";
for (i = 0; i < len; i++) {
str += "<tr>";
str += "<td>" + results.rows.item(i).Firstname + "</td>";
str += "<td>" + results.rows.item(i).Lastname + "</td>";
str += "<td>" + results.rows.item(i).Address + "</td>";
str += "<td>" + results.rows.item(i).City + "</td>";
str += "<td>" + results.rows.item(i).Email + "</td>";
str += "</tr>";
document.getElementById("tablea").innerHTML += str;
str = '';
}
});
});

Well, considering that you have data in results. It should be used as:
results.rows.item[i].Firstname
NOT
results.rows.item(i).Firstname

Finally figured out the problem, the .Firstname and the rest didn't match the column names from the Db table, it was lowercase,look carefully at your code guys!!

JavaScript-How to make Html Table editable

I have a function of creating table from a .csv file using JavaScript. I want to make the last column of the table editable. Part of that function where table is being generated is
for (var i = 0; i < CSVLines.length; i++) {
OutputTableRows += "<tr>";
var CSVValues = CSVLines[i].split(",");
for (var j = 0; j < CSVValues.length; j++) {
OutputTableRows += "<td>" + "<p>" + CSVValues[j] + "<p>" + "</td>";
}
OutputTableRows += "</tr>";
}
I have tried
OutputTableRows += "<td>" + "<p contenteditable="true">" + CSVValues[j] + "<p>" + "</td>";
but it's not working

I think you should say in your inner loop:-
if(j == CSVValues.length-1){
tableRow = '<td><input type="text" value="VALUE"/></td>';
tableRow = tableRow.replace('VALUE',CSVValues[j]);
OutputTableRows += tableRow;
}
else{
OutputTableRows += "<td>" + "<p>" + CSVValues[j] + "<p>" + "</td>";
}

I'd suggest, at first glance:
OutputTableRows += "<td>" + "<p" + (j === (CSVValues.length - 1) ? " contentEditable" : "") + ">" + CSVValues[j] + "</p>" +"</td>";
The relevant part, of course, is:
"<p" + (j === (CSVValues.length - 1) ? " contentEditable" : "") + ">"
If j is equal to the length of CSVValues minus 1, then it's reasonable to assume that this must be the last iteration of that for loop, and therefore this is the row that should have the contentEditable attribute, otherwise it should not (and must be an earlier iteration of the loop).
Also, note the changed </p> (from your original <p>), which closes the already-open <p>, as opposed to creating a new, sibling, paragraph element.
References:
Conditional ('ternary') operator.
contentEditable attribute.

Create a table in javascript from returned JSON object by http get

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

Creating a table in Javascript

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;

Javascript inserting data into HTML table

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.