We Keep Coding

Get one specific row in automatically generated table

I am building a web application for the school. And I need to populate a table with data from a database. To do so, I used the following javascript :
http.onload = function (){
var roomData = JSON.parse(this.response);
roomData.forEach(data => {
var location=data.location;
var price=data.price;
var size=data.size;
var available=data.available;
var index = $("table tbody tr:last-child").index();
var row = '<tr>' +
'<td>'+location+'</td>' +
'<td>'+size+'</td>' +
'<td class="price">'+price+'</td>' +
'<td>'+available+'</td>' +
actions +
'</tr>'
$("table").append(row);
});
console.log((roomData));
}
http.open('GET', url, true);
http.send();
With the following architecture for the table :
<table class="table table-bordered">
<thead>
<tr>
<th>Address</th>
<th>Size</th>
<th>Price</th>
<th>Available</th>
</tr>
</thead>
<tbody>
</tbody></table>
But then, when I try to access one specific data with javascript, for example the price, I cannot really make the distinction between the rows because they have all the same id. Here is the code I am using to get the row's price :
$('td.price').html());
But obviously it only returns the price of the first row and not the one I want. How can I do it ?

You can achieve it as below:
Add the index in your forEach and use it as Id of the row:
roomData.forEach(function (element, index) {
var location=data.location;
var price=data.price;
var size=data.size;
var available=data.available;
var index = $("table tbody tr:last-child").index();
var row = '<tr>' +
'<td>'+location+'</td>' +
'<td>'+size+'</td>' +
'<td id="pricerow' + index + '" class="price">'+price+'</td>' +
'<td>'+available+'</td>' +
actions +
'</tr>'
$("table").append(row);
$('#pricerow1').html());
$('#pricerow2').html());

Ok I finally figured how to do it, I used :
var rows = document.getElementsByTagName('tr');
console.log(rows[$(this).closest("tr").index()+1].cells[2].innerHTML);

Your 'roomdata' info should have an ID of some sort, which you can use as an ID on the . Like (roomdata ID 5), en then access it with $('#rd-5 td.price').
Not sure if I understand you correctly, but that's the easiest way. Always have an unique reference and work with ID's.

The html td is not updating via jquery

I have this little method which, on the first load, created a <tr> and some <td>'s. That works. But if the underlying data changes, the <td>'s are not updated. I'm not sure why.
function ParseJson(json, isFirstLoad)
{
json = $.parseJSON(json);
var tr;
for (var i = 0; i < json.length; i++) {
if (isFirstLoad === 1)
{
tr = $('<tr/>');
tr.append("<td id='" + json[i].LocationName + "'>" + json[i].LocationName + "</td>");
tr.append("<td id='" + json[i].LocationName + "Count'>" + json[i].Count + "</td>");
$('#MainTable').append(tr);
}
else
{
var td = $("#" + json[i].LocationName + "Count");
td.html = json[i].Count;
}
}
When isFirstLoad is 1, the html is rendered as I would expect. Example:
<tr>
<td id="ChemLab">ChemLab</td>
<td id="ChemLabCount">24</td>
</tr>
But the next time around, if the data has changed and someone has left the Chem Lab, the html for ChemLabCount does not change.
I have verified that the json being passed into this method is correct. Meaning, the count DOES indeed change. It just doesn't get displayed on the screen.

jQuery .html() is a function, not a property.
td.html(json[i].Count);

The problem comes from td.html = json[i].Count; because it's not the right way of using html() method.
To set the Count to your td you could use .text() instead :
td.text( json[i].Count );
Else if you want to set an HTML code the you could use .html() :
td.html( json[i].Count );

Table rows are not rendering on separate lines

I am trying to render a table, wherein each row of data is on a separate line. From my understanding, this is the default behavior for how data between <tr></tr> tags is rendered. At least, that is how it is has always functioned for me.
This is the code I am using:
function GetLastTen(){
$.ajax({url: LastTen, success: function(result) {
var location = document.getElementById('l_ten');
location.innerHTML = "<table>\n";
function format(location,object){
location.innerHTML += '<tr>\n' +
'<td>' + object.id + '</a></td>\n' +
'</tr>\n';
}
$.each(result, function(elem){
format(location, result[elem]);
});
location.innerHTML += "</table>"
}});
}
The code obtains the proper data--there is nothing wrong with what I am getting from the API endpoint, but all the rows are on the same line.
I am using bootstrap 3.3.7 and the latest version of jQuery.

Try constructing a HTML string first into variable and setting the innerHTML once you are done:
var result = [{id:1},{id:2},{id:3}]
$(document).ready(function(){
var location = $("#l_ten")
var tableHTML = "<table>\n"
function format(object){
tableHTML += '<tr>\n<td>' + object.id + '</a></td>\n</tr>\n';
}
$.each(result, function(elem){
format(result[elem]);
});
location.html(tableHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="l_ten"></div>

jquery adding columns based on database records

I have an sqlite table with these columns:
| date | weight | bmi | mood | etc.
I want a table on my html page to display like this on the html page:
<table>
<caption></caption>
<thead>
<tr>
<td>(empty cell over row headings)</td>
Additional tH's as needed (this is where each date entry goes)
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Weight</th>
additional tD's as needed (this is where each weight entry goes matched with date in column heading)
</tr>
<tr>
<th scope="row">BMI</th>
additional tD's as needed (same as above)
</tr>
</tbody>
</table>
so basically I'm flipping the rows and columns for display purposes. This is all so I can graph the table using jQuery Visualize plugin that goes out as the date progresses. As you can imagine, over time more entries will be made adding to the columns of the display table. Here is what I have been messing around with so far (not including the graphing scripts ). I've gotten myself totally confused and now I'm just a mess...
Any suggestions would be a big help. I think I'm running into problems when trying to insert data into a table that's also trying to insert itself. I'm probably going about this wrong I bet.
Thanks
Mike
function homeSuccess(tx, results) {
// Gets initial count of records in table...
var entries = results.rows.length;
// Iterates over all the existing records...
for (var i = 0; i < entries; ++i) {
// The following element id's can be found in the div's within the table below, see element.innerHTML line...
var element = document.getElementById('colDate');
element.innerHTML += '<th scope="col">' + results.rows.item(i).timeStamp + '</th>';
var element2 = document.getElementById('tdWeight');
element2.innerHTML += '<td>' + results.rows.item(i).weight + '</td>';
var element3 = document.getElementById('tdBmi');
element3.innerHTML += '<td>' + results.rows.item(i).bmi + '</td>';
};
// 'screenView2 is a placeholder on the main html page...
var element = document.getElementById('screenView2');
element.innerHTML = '<br /><br /><h1>Data:</h1><br />Number of entries: ' + entries + '<br />' + '<table><caption>Mikes Health</caption><thead><tr><td></td><div id="colDate"></div></tr></thead><tbody><tr><th scope="row">Weight</th><div id="colWeight"></div></tr><tr><th scope="row">BMI</th><div id="colBmi"></div></tr></tbody></table>';
// This section is just a test trying to plug in static elements prior to trying database data... When using this section I had the iteration section commented out.
var element2 = document.getElementById('colDate');
element2.innerHTML = '<th scope="col">4-1-13</th>';
var element3 = document.getElementById('colWeight');
element3.innerHTML = '<td scope="col">123</td>';
var element4 = document.getElementById('colBmi');
element4.innerHTML = '<td scope="col">321</td>';
}
function homeQuery(tx) {
console.log("entering homeQuery");
tx.executeSql('SELECT * FROM HEALTHGRAPH', [], homeSuccess, onSqlError);
console.log("leaving homeQuery");
}
// Function that is called on initial page load
function homeDBopen() {
console.log("opening db for home data");
theDB = window.openDatabase("hgDB", "1.0", "HealthGraph", 3 * 1024 * 1024);
theDB.transaction(homeQuery, onTxError, onTxSuccess);
console.log("leaving homeDBopen");
}

Thought for sure someone would have answered this question as it seems like an issue lots of people must run into. A little discouraging. Anyway, I found an answer that I can adapt to my own project here:
http://msdn.microsoft.com/en-us/library/ie/ms532998(v=vs.85).aspx
// Insert cells into the header row.
for (i=0; i<heading.length; i++)
{
oCell = oRow.insertCell(-1);... etc.

Append dynamically created table javascript

I make an xhr request, I get the response and I append some values that I get to a table by appending. then I make second xhr request on another page, get some other results that I want to append under the previously inserted row..the problem is that every next append that I make instead of getting "under" the previously created row, gets before it..
I guess this is because these are dynamically created..but is there any way to solve this? without adding classes or ids to table or rows..
here is my code..
first the html
<body>
<table border="1">
<tr>
<th>first cell</th>
<th>second cell</th>
</tr>
</table>
<div id="div1">
</body>
and my javascript
function response(url, callback{
//xhr request
}
var url1 = "http://example1.com";
request(url1, function(response){
var temp1 = document.getElementsByTagName("table")[0];
var temp2create = document.createElement("tr");
var temp3 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");
temp2create.innerHTML = temp3;
temp1.appendChild(temp2create);
});
var url2 = "http://example1.com";
request(url2, function(response){
var temp4 = document.getElementsByTagName("table")[0];
var temp5create = document.createElement("tr");
var temp6 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");
temp5create.innerHTML = temp6;
temp4.appendChild(temp5create);
});
so, instead of having new row added after previous row, it gets before..

It could be that the first xhr request is taking longer to complete than the second one. Therefore the second one appends its response before the first receives and appends its response. You could either make placeholder rows in the table if a fixed amount of requests will come back, such as:
<body>
<table border="1">
<tr>
<th>first cell</th>
<th>second cell</th>
</tr>
<tr id="tr1">
</tr>
<tr id="tr2">
</tr>
</table>
</body>
and javascript:
(url1,response())
{
document.getElementById("tr1").innerHTML("someresponse");
}
(url2,response())
{
document.getElementById("tr2").innerHTML("some other response");
}
Or you could link the requests to occur in sequence if time is not of the essence.
request(url1, function(response){
var temp1 = document.getElementsByTagName("table")[0];
var temp2create = document.createElement("tr");
var temp3 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");
temp2create.innerHTML = temp3;
temp1.appendChild(temp2create);
var url2 = "http://example1.com";
request(url2, function(response){
var temp4 = document.getElementsByTagName("table")[0];
var temp5create = document.createElement("tr");
var temp6 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");
temp5create.innerHTML = temp6;
temp4.appendChild(temp5create);
});
});

nikolas, no. The calls are asynchronous, meaning the order they run, and complete is undefined. You can not rely on the order of completion matching the order of initiation. If you need that, then the thing to do is have the second xhr be called from the first's callback (chaining).

This is what I used on a recent project had to append JSON to an HTML.
Define the Table
<table id="geoTable" border="1"></table>
Populate
appendTableRow('geoTable', "MPH", 70);
appendTableRow('geoTable', "KPH ", 112.654);
Function to add rows
function appendTableRow(tableName,name,value)
{
tableName = "#" + tableName;
//<tr><td>name</td><td>value</td></tr>
var tableRow = "<tr><td>$name</td><td>$value</td></tr>";
tableRow = tableRow.replace("$name",name);
tableRow = tableRow.replace("$value",value);
$(tableName).append(tableRow);
}