Develop Reference

Using javascript to populate a html table

Im trying to add input where you can select different options for a location. my issue is that its messing up the table and it just does not see me new input option that i've added. I can list other files or pictures if needed.
var items = 0;
function addItem() {
items++;
var html = "<tr>";
html += "<td>" + items + "</td>";
html += "<td><input type='number' name='idNumber[]'></td>";
html += "<td><input type='text' name='itemName[]'></td>";
html += "<td><input type='number' name='itemQuantity[]'></td>";
html += "<td><select name='itemLocation[]' id='location'><option value="Shop" name="Shop">Shop</option></select></td>";
html += "<td><input type='text' name='itemIndex[]'></td>";
html += "<td><button type='button' onclick='deleteRow(this);'>Delete</button></td>"
html += "</tr>";
Just trying to change to location button to a multiple choice selection

you have double quotes inside your string which is breaking your template
to avoid this kind of error you should use template literals its fully supported
Note it is backtick (`) not singlequote (')
see example
var value = "new entry"
var tr = `
<tr>
<td>${value}</td>
<td>${value}</td>
<td>${value}</td>
<td>${value}</td>
<td>${value}</td>
</tr>
`

How do you retrieve data from your firebase realtime database to selectable HTML table?

I am trying to retrieve data from my firebase realtime database, and then append them onto my HTML table. However, I don't have any ideas on how to create the HTML table that is selectable and submit what I selected. Here is how my database tree looks like.
Here is the HTML table I made.
<table class="hotel-list" id="Marriott-hotel-list">
<thead class="thead-inverse">
<tr>
<th>Hotel Name</th>
<th>Hotel Location</th>
<th>Cheap Room's Price</th>
<th>Amount of Cheap Room</th>
<th>Expensive Room's Price</th>
<th>Amount of Cheap Room</th>
</tr>
</thead>
<tbody>
<tr id="tr">
<td id="Hotel-Name"></td>
<td id="Hotel-location"></td>
<td id="Cheap-Rooms-Price"></td>
<td id="Amount-of-Cheap-Room"></td>
<td id="Expensive-Rooms-Price"></td>
<td id="Amount-of-Cheap-Room"></td>
</tr>
</tbody>
</table>
and here is the js that I used to try to append data onto the table.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
var database = firebase.database();
database.ref('projectTable/hotelTable/Hilton/').orderByChild('hotel_name').once('value', function (snapshot) {
if (snapshot.exists()) {
var content = '';
snapshot.forEach(function (data) {
var val = data.val();
content += '<tr>';
content += '<td>' + val.hotel_name + '</td>';
content += '<td>' + val.Location + '</td>';
content += '<td>' + val.cheap_room_price + '</td>';
content += '<td>' + val.max_amount_cheap_room + '</td>';
content += '<td>' + val.expensive_room_price + '</td>';
content += '<td>' + val.max_amount_expensive_room + '</td>';
content += '</tr>';
});
$('#Marriott-hotel-list').append(content);
}
});
</script>
I try to put the hotel name, Location, cheap_room_price, max_amount_cheap_room, expensive_room_price, max_amount_expensive_room, these values from the database onto the table.
But nothing shows on the web page and also I realize the table I made has no selectable feature.
Can any expert point out my error and help me fix it in Javascript? Thank you and much appreciation!

Create javascript function with JQuery

I'm getting JSon data from my server and building a table with this data. The last column of the table is a button that will grab the fields from the selected row to populate another fields, but it is returning: ReferenceError: response.DATA is not defined.
response = JSON.parse(response);
$('.myDiv').empty();
// Header
var table = '<table class="table table-striped"><thead><tr><th>First Name</th><th>Last Name</th><th>City</th><th>State</th><th>ZIP</th><th>Action</th></tr></thead><tbody>';
var i;
for(i=0; i<response.ROWCOUNT; i++){
table += '<tr>';
table += '<td>' + response.DATA.PROVIDERFIRSTNAME[i] + '</td>';
table += '<td>' + response.DATA.PROVIDERLASTNAME[i] + '</td>';
table += '<td>' + response.DATA.PROVIDERCITY[i] + '</td>';
table += '<td>' + response.DATA.PROVIDERSTATE[i] + '</td>';
table += '<td>' + response.DATA.PROVIDERPOSTALCODE[i] + '</td>';
table += '<td><input type="button" class="btn btn-primary" value="select" onClick="setData(response.DATA, i);" /></td>';
table += '</tr>';
}
table += '</tbody></table>';
$('.myDiv').append(table);
My setData function:
function setData(data, pos){
console.debug(data.PROVIDERFIRTNAME[pos]);
}

You're using an inline handler, and an inline handler can only reference global variables. Attach the listener properly using Javascript instead, so that it can reference the variables (most importantly, response and i) properly. Also make sure i is block scoped with let, rather than function-scoped.
You can also consider using template literals to make the code a lot more readable:
// Header
const $table = $('<table class="table table-striped"><thead><tr><th>First Name</th><th>Last Name</th><th>City</th><th>State</th><th>ZIP</th><th>Action</th></tr></thead><tbody></tbody>');
// make sure to use "let i" here
for (let i = 0; i < response.ROWCOUNT; i++) {
const $row = $(`
<tr>
<td>${response.DATA.PROVIDERFIRSTNAME[i]}</td>
<td>${response.DATA.PROVIDERLASTNAME[i]}</td>
<td>${response.DATA.PROVIDERCITY[i]}</td>
<td>${response.DATA.PROVIDERSTATE[i]}</td>
<td>${response.DATA.PROVIDERPOSTALCODE[i]}</td>
<td>${response.DATA.PROVIDERPOSTALCODE[i]}</td>
<td><input type="button" class="btn btn-primary" value="select"/></td>
</tr>
`);
$row.find('input').on('click', () => {
console.debug(response.DATA.PROVIDERFIRSTNAME[i]);
});
$table.find('tbody').append($row);
}
$('.myDiv').append(table);
Spelling matters - make sure to use PROVIDERFIRSTNAME instead of PROVIDERFIRTNAME.
Inline handlers are pretty universally considered to be poor practice - best to avoid them whenever possible.

How to use a variable as a JSON file name when using getJSON

I'm trying to develop a simple way to turn a .json file into an HTML table using javascript.
I've tried using a file upload input, text input, html form, as well as appending data from one .json file to another empty container .json file. The main thing(s) I'm trying to fix are located on lines 3, 5, and 17.
What I want to happen is the user inputs the name of the .json file via the text field (or just uploads the file), and the program turns it into an html table, but I can't figure out how to use a variable to implement that.
<script>
$(function() {
var whatname = document.getElementById("whatnametext")
var people = [];
$.getJSON(whatname, function(data) {
$.each(data.person, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" +
"<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
</script>
</head>
<body>
<input type="text" id="whatnametext">
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="2">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>City</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>```

Server tag not well formed - Create table with server control using JQuery

I am trying to create a table that has some dynamic data and some server controls. I need server controls so that they will be accessed in code behind. I am creating table in JQuery. My code is as below.
function createLeaveDetails(formattedArray) {
var leaveTable = "<table class='table table-striped table-hover table-bordered' style='width: 435px'>";
leaveTable += "<tr> <th>Date</th> <th>Full Day</th> <th>Half Day</th> </tr>";
for (i = 0; i < formattedArray.length; i++) {
leaveTable += "<tr> <td>" + formattedArray[i] + "</td> <td><asp:RadioButton ID='radHalf" + i + " runat='server' GroupName='grp" + i + "' /></td>";
leaveTable += "<td><asp:RadioButton ID='radFull" + i + " runat='server' GroupName='grp" + i + "' /></td> </tr>";
}
leaveTable = +"</table>"
$("#tblLeaveDetails").append();
}
but at run-time its giving The server tag is not well formed. error on line
leaveTable += "<tr> <td>" + formattedArray[i] + "</td> <td><asp:RadioButton ID='radHalf" + i + " runat='server' GroupName='grp" + i + "' /></td>";

First of all, you cannot create "server" controls from client side (i.e. JavaScript / Jquery). As the Browser does not understand the server tag. The Asp View engine render that server control to the HTML control accordingly. So all you can do is you create basic HTML elements from the client side scripting.
Create
<input type='radio'></input>
instead of
<asp:RadioButton />
As you need the value at the server you can create an Hidden Field and put the selected value of the input radio in that hidden field from JavaScript / Jquery. as follows
$('#yourRadiobuttonlist').change(function(){
yourHiddenField.value = $('#yourRadiobuttonlist :selected').val();
});
And at server side you can access the Hidden Field value for the desired selected value of the radio button.
Hope it helps....