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!!

Need help referencing elements

I know I'm asking really simple questions but I'm a beginner and it the process of learning. I've got this code but I don know how to make it work. The output i expect is upon clicking the button it activates function insertAfter and adds text/paragraph that ill write.
I've tried: onclick='insertAfter(test,index.this)'
It didn't work and consoled said it was undefined.
var content = "";
Applications.forEach(generatetable);
function testfn(index, tdElement) {
console.log(tdElement.parentElement);
console.log(index);
console.log(Applications[index].Name);
}
function generatetable(item, index, arrays) {
var columns = "";
columns = columns + "<td onclick='testfn(\"" + index + "\", this)'>" + "<button onclick='insertAfter(test?,???)' type=\"button\">Click Me!</button>" + item.UAID + "</td>";
columns = columns + "<td>" + item.Name + "</td>";
columns = columns + "<td>" + "<a href='www.wahtever.com'>map</a>" + "</td>";
content = content + "<tr>" + columns + "</tr>";
}
var test = "<tr><td>fsdf</td></tr>";
document.getElementById("table").innerHTML = content;
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
It is supposed to insert a paragraph preferably what i put in the test variable but if there is better is better solution please let me know.

<button onclick='insertAfter(test,ElementID)>
The second refference node (ElementID) should be be the id of the element after which it is to be put. So it has to be somehow refferenced for example by id.

How do I add different classes to <td> in Javascript

Hey I have two td elements in a table.
I want the have separate style classes for them. How do I do this?
This is my code:
table += "<tr>";
for(var i = 0; i < data.list.length; i++){
table += "<td>" + "<table>" + "<td>" + value1 "</td>" + "<td>" + value2 + "</td>" + "</table>";
}
table += "</tr>";
I have tried to simply add class in td element but that does not work.
Any ideas? I use Javascript to create the table.
So this does not work:
table += "<tr>";
for(var i = 0; i < data.list.length; i++){
table += "<td>" + "<table>" + "<td class="one">" + value1 "</td>" + "<td class="two">" + value2 + "</td>" + "</table>";
}
table += "</tr>";

You should be using single quotes inside double-quoted strings, like this
table += "<tr>";
for(var i = 0; i < data.list.length; i++){
table += "<td>" + "<table>" + "<td class='one'>" + value1 "</td>" + "<td class='two'>" + value2 + "</td>" + "</table>";
}
table += "</tr>";

Displaying Date in Javascript table that is returned into a list

I have the following code, in which a table is built in JavaScript and passed to the HTML using an ID.
html += "<tbody>"
for (var i = 0; i < list.length; i++) {
html += "<tr><td>" + list[i].GroupId + "</td>";
html += "<td>" + list[i].GroupType + "</td>";
html += "<td>" + list[i].GroupName + "</td>";
html += "<td>" + list[i].Updated + "</td>";
html += "<td>" + list[i].MemberCount + "</td>";
}
html += "</tbody>"
My problem is that list[i].Updated returns a date and it looks like the following /Date(1448996589783)/. How can I convert this so it displays as the proper date on the page?

Thanks for the help people, but after messing around and a lot of google searching I managed to figure this out. I created another function as shown below in the JavaScript file:
function parseJsonDate(jsonDateString)
{
return new Date(parseInt(jsonDateString.substr(6))).toLocaleString();
}
and updated my list[] to this:
html += "<td>" + parseJsonDate(list[i].Updated) + "</td>";
and when run it displays exactly what I wanted: 12/1/2015 7:03:09 PM

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.