I am creating a table that has api data.
This is my js file fetching data:
$(document).ready(function(){
$.getJSON(endpoint, function(data){
var topAgent = [];
$.each(data, function(key, value){
topAgent.push ("<tr>");
topAgent.push ("<td>" + value.agentId + "</td>");
topAgent.push ("<td>" + value.firstName + "</td>");
topAgent.push ("</tr>");
});
$('#topAgents').append(topAgent);
console.log(topAgent);
});
});
When I am checking the console log, it seems fine.
0: "<tr>"
1: "<td>5</td>"
2: "<td>Glenn</td>"
3: "</tr>"
4: "<tr>"
5: "<td>6</td>"
6: "<td>Glenell</td>"
7: "</tr>"
But when I inspect element, the table row element closes automatically:
<tr></tr>
<td>5</td>
<td>Glenn</td>
<tr></tr>
<tr></tr>
<td>6</td>
<td>Glenell</td>
<tr></tr>
I tried to remove the table row element in the js file but the outcome is all the data are aligned together. I also tried to combine the table row element along with the Table Data Cell element but it still automatically closes.
What could cause the problem and what are the possible solutions?
The line topAgent.push ("</tr>"); is causing an issue because since it is inside .each() method <tr> will get close everytime after the data gets filled inside value.agentId and value.firstName
Use append instead:
$(function() {
$.each(data, function(key, value){
var $tr = $('<tr>').append(
$('<td>').text(value.agentId),
$('<td>').text(value.firstName)
);
$('#topAgents').append(topAgent);
});
});
Inspired from: https://stackoverflow.com/a/17724264/6029001
Related
I've created a table using an AJAX request to the database of items in our inventory displaying a picture/part name/price/stock remaining. When the table displays I would like to be able to click on any part of one of the rows and have it link to the item page associated with that item but it won't work.
I've tried the on.click with a static table written right into the html and it worked fine. Also if I direct the on.click script to just the table id instead of the table id and tr i can make the entire table clickable to the first row's href. So it appears that since the tr doesn't really exist in the html the javascript won't find it. Is there a way to get the script to recognize each 's href attribute?
HTML CODE + on.click script:
<html>
<body>
<table id="ctable">
<tbody id="tbody1" class="tbody1">
</tbody>
</table>
<script>
$('#ctable tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
</script>
</body>
</html>
.JS File CODE that creates table from .php file/mysql database
document.addEventListener('DOMContentLoaded', function() {
$.post('test.php', function(data) {
$("#tbody1").empty();
$.each(JSON.parse(data), function (index, value){
var eachrow = "<tr>" +
"<td class=\"image\">" + '<img src="images/thumbs/' +
value.image + '">' + "</td>" +
"<td>" + '<a href="' + value.link + '">' + value.part + "
</td>" +
"<td>" + value.price + "</td>"
"<td>" + value.stock + "</td>"
"</tr>";
$('#tbody1').append(eachrow);
});
});
}, false);
If you are dynamically adding rows, you need to either restructure your click event to listen from the context of the parent as in:
$("#tbody1").on("click", "tr", function(e) {
});
Assuming #tbody1 is a good place to start since you probably don't want the header row to be clickable. Or, every time you dynamically add rows, since the code is rebuilding the table, you can reattach the click event handlers:
$("#tbody1").empty();
$.each(JSON.parse(data), function (index, value){
var eachrow = "..
$('#tbody1').append(eachrow);
});
// or .on("click", function() { })
$("#tbody1 tr").click(function() { });
If you attach click handler via on, it would be good to then do an off as in:
$("#tbody1").off("click", "tr");
To remove the existing click handlers.
What I am trying to do is retrieve the information passed from a previous page through and display this within a table on another page.
I have currently got the following code:
PAGE NAME: EMBELLISHMENT
<script>
var embellishmentlist_var = embellishment;
var embellishment_explode = embellishmentlist_var.split("#");
for(var i = 1; i < embellishment_explode.length; i++)
{
var embellishment_explode_singleinfo = embellishment_explode.split("_");
//var table = '<tr><td>' + embellishment_explode[3] + '</td><td>' + data[7] + '</td><td>' + data[1] + '</td><td>' + data[2] + '</td><td>' + data[4] + '</td><td>' + data[5] + '</td>' + data1 + '<td>' + data[9] + '</td></tr>';
var table = '<tr><td></td></tr>';
$('#tableshow > tr').append( table );
//alert(embellishment_explode[4]);
}
}
</script>
<html>
<table>
<tr id="tableshow">
</tr>
</table>
The foreach can loop round a maximum of 6 times which I hope will create 6 rows within the table however this does not seem to be working. I currently have similar code to the above on another page however the HTML is slightly different. On that page the HTML looks like the following:
PAGE NAME: INFO
<table id="items_table">
<th>1</th>
<th>2</th>
///etc
</table>
The Javascript on that page insert rows into the table. This all works.
Therefore the only difference between the two pages is that on the EMBELLISHMENT page I want to create table rows within a table whereas on the INFO page I am creating the complete table.
Could I please have some assistance even if it is just to say it isn't possible.
You're trying to append table rows to a table row. That's not possible. You could only add rows to a table
HTML
<table id="tableshow"></table>
JS
for(var i = 0; i <= 6; i++){
$('#tableshow').append('<tr><td></td></tr>');
}
for(var i=0;i<Result.length;i++){
$('<tr>').appendTo('#resultstable');
for(var j=0;j<tableID.length;j++){
$('<td>' + Result[i][tableID[j]] + '</td>').appendTo('#resultstable');
}
$('</tr>').appendTo('#resultstable');
When trying to display a table from JSON data, it displays the headers correctly (not shown here), but when I want the data to show on a new row, it doesn't work. The first row of data is shown correctly, but what should be on the second row continues on from the end of the first row.
In the HTML (when loaded), it shows it as:
..Table headers..
<tbody>
<tr></tr>
</tbody>
<td>1</td>
...Rest of cell data is put in <td> tags...
That is happening because
$('<tr>').appendTo('#resultstable');
creates <tr></tr> dom element and adds it to #resultstable table.
With this statement
$('<td>' + Result[i][tableID[j]] + '</td>').appendTo('#resultstable');
you are not adding html after <tr>. You are creating td tag and assigning it to #resultstable table. But td tag can be assigned only to tr tag.
So the right syntax will be.
for(var i=0;i<Result.length;i++){
var tr = $('<tr>').appendTo('#resultstable');
for(var j=0;j<tableID.length;j++) {
$('<td>' + Result[i][tableID[j]] + '</td>').appendTo(tr);
}
You are appending your data after the table, not after the last row, see Add table row in jQuery for more information how to add a row after the last row.
You don't append <td> elements to the table, you have to append them to the row you just added.
for(var i=0;i<Result.length;i++){
var row = $('<tr>').appendTo('#resultstable');
for(var j=0;j<tableID.length;j++){
$('<td>' + Result[i][tableID[j]] + '</td>').appendTo(row);
}
}
Your code should be well
for(var i=0;i<Result.length;i++){
var tr = $('<tr>').appendTo('#resultstable');
for(var j=0;j<tableID.length;j++){
$('<td>' + Result[i][tableID[j]] + '</td>').appendTo(tr );
}
}
I am trying to create a HTML table like the following dynamically using jQuery:
<table id='providersFormElementsTable'>
<tr>
<td>Nickname</td>
<td><input type="text" id="nickname" name="nickname"></td>
</tr>
<tr>
<td>CA Number</td>
<td><input type="text" id="account" name="account"></td>
</tr>
</table>
This is my actual table :
<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'> </table>
This is the method which will create tr and td elements taking id and labelText:
function createFormElement(id, labelText) {
// create a new textInputBox button using supplied parameters
var textInputBox = $('<input />').attr({
type: "text", id: id, name: id
});
// create a new textInputBox using supplied parameters
var inputTypeLable = $('<label />').append(textInputBox).append(labelText);
// append the new radio button and label
$('#providersFormElementsTable').append(inputTypeLable).append('<br />');
}
I also have a value which will be shown as tool tip.
Please help me to create a table dynamically with tool tip and tr td.
EDIT:
I have almost done with the following code:
function createProviderFormFields(id, labelText,tooltip,regex) {
var tr = '<tr>' ;
// create a new textInputBox
var textInputBox = $('<input />').attr({
type: "text",
id: id, name: id,
title: tooltip
});
// create a new Label Text
tr += '<td>' + labelText + '</td>';
tr += '<td>' + textInputBox + '</td>';
tr +='</tr>';
return tr;
}
Here label is coming properly and the input box is not coming and it shows [object Object] where the text box has to come...
When I printed the textInputBox using console.log, I get the following:
[input#nickname, constructor: function, init: function, selector: "", jquery: "1.7.2", size: function…]
What could be the issue?
Thanks to #theghostofc who showed me path... :)
You may use two options:
createElement
InnerHTML
Create Element is the fastest way (check here.):
$(document.createElement('table'));
InnerHTML is another popular approach:
$("#foo").append("<div>hello world</div>"); // Check similar for table too.
Check a real example on How to create a new table with rows using jQuery and wrap it inside div.
There may be other approaches as well. Please use this as a starting point and not as a copy-paste solution.
Edit:
Check Dynamic creation of table with DOM
Edit 2:
IMHO, you are mixing object and inner HTML. Let's try with a pure inner html approach:
function createProviderFormFields(id, labelText, tooltip, regex) {
var tr = '<tr>' ;
// create a new textInputBox
var textInputBox = '<input type="text" id="' + id + '" name="' + id + '" title="' + tooltip + '" />';
// create a new Label Text
tr += '<td>' + labelText + '</td>';
tr += '<td>' + textInputBox + '</td>';
tr +='</tr>';
return tr;
}
An example with a little less stringified html:
var container = $('#my-container'),
table = $('<table>');
users.forEach(function(user) {
var tr = $('<tr>');
['ID', 'Name', 'Address'].forEach(function(attr) {
tr.append('<td>' + user[attr] + '</td>');
});
table.append(tr);
});
container.append(table);
Here is a full example of what you are looking for:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
$("#providersFormElementsTable").html("<tr><td>Nickname</td><td><input type='text' id='nickname' name='nickname'></td></tr><tr><td>CA Number</td><td><input type='text' id='account' name='account'></td></tr>");
});
</script>
</head>
<body>
<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'> </table>
</body>
I understand you want to create stuff dynamically. That does not mean you have to actually construct DOM elements to do it. You can just make use of html to achieve what you want .
Look at the code below :
HTML:
<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'></table>
JS :
createFormElement("Nickname","nickname")
function createFormElement(labelText, id) {
$("#providersFormElementsTable").html("<tr><td>Nickname</td><td><input type='text' id='"+id+"' name='nickname'></td><lable id='"+labelText+"'></lable></td></tr>");
$('#providersFormElementsTable').append('<br />');
}
This one does what you want dynamically, it just needs the id and labelText to make it work, which actually must be the only dynamic variables as only they will be changing. Your DOM structure will always remain the same .
WORKING DEMO:
Moreover, when you use the process you mentioned in your post you get only [object Object]. That is because when you call createProviderFormFields , it is a function call and hence it's returning an object for you. You will not be seeing the text box as it needs to be added . For that you need to strip individual content form the object, then construct the html from it.
It's much easier to construct just the html and change the id s of the label and input according to your needs.
FOR EXAMPLE YOU HAVE RECIEVED JASON DATA FROM SERVER.
var obj = JSON.parse(msg);
var tableString ="<table id='tbla'>";
tableString +="<th><td>Name<td>City<td>Birthday</th>";
for (var i=0; i<obj.length; i++){
//alert(obj[i].name);
tableString +=gg_stringformat("<tr><td>{0}<td>{1}<td>{2}</tr>",obj[i].name, obj[i].age, obj[i].birthday);
}
tableString +="</table>";
alert(tableString);
$('#divb').html(tableString);
HERE IS THE CODE FOR gg_stringformat
function gg_stringformat() {
var argcount = arguments.length,
string,
i;
if (!argcount) {
return "";
}
if (argcount === 1) {
return arguments[0];
}
string = arguments[0];
for (i = 1; i < argcount; i++) {
string = string.replace(new RegExp('\\{' + (i - 1) + '}', 'gi'), arguments[i]);
}
return string;
}
I'm having a bit of trouble figuring out how to go about self-referencing a table row in Javascript.
Here's the boiled down code:
$( "#listitems tbody" ).append( "<tr onclick=\"editListItem(this)\">" +
"<td>" + id.val() + "</td>" +
"<td>" + title.val() + "</td>" +
"<td>" + description.val() + "</td>" +
"<td>" + TF + "</td>" +
"<td style=\"visibility: hidden;\">" + id.val() + "</td>" +
"</tr>" );
As you can see, I'm setting the contents of this table row and cells dynamically. However, I need to pass a reference to this table row into its onClick function, which calls this Javascript method:
function editListItem(obj) {
var id = obj.cells[4].innerHTML;
var cells = document.getElementById('listitems').rows[id].cells;
DATA[0] = cells[0].innerHTML;
DATA[1] = cells[1].innerHTML;
DATA[2] = cells[2].innerHTML;
DATA[3] = cells[3].innerHTML;
}
In this method, I need to access the value contained inside the 4th "hidden" cell of the table row that was clicked. I normally would just pass the ID variable into the onClick method, but this table's contents can be sorted and rearranged, so the ID variable will not necessarily correspond to the contents of the row.
I've been Googling for the past four hours but can't find any specific examples for this situation; everything I've tried just triggers a Javascript error proclaiming that obj.cells, obj[4], obj.childNodes, etc, does not exist, depending on which one I'm trying.
Does anyone know how you can access the innerHTML of table cell elements inside a table row element by passing "this" into the table row's onClick?
Please let me know if any part of this was confusing, I'm trying to get this done before I leave today or I know I'll forget it all and have to start all over.
how about:
$( "#listitems tbody" ).append(
$('<tr>....</tr>')
.bind('click', function(){
var tds = $(this).find('td'),
id = tds.eq(4).text();
})
);
And if that's not what you meant, let me know. I'm not 100% sure I understand what you're asking for :)
From the looks of your code, your using jQuery so you can easily grab the 5th td by using
$(this).children('td').eq(4)
and then do whatever you want with that jQuery element
checkout jQuery eq selector for more info
Create your <tr> element on its own first, and use proper JS to register the handler rather than embedding the handler in the element's attributes:
var tr = $('<tr>').click(editListItem);
$("#listitems tbody").append(tr);
$(tr).append( ... );
In editListItem, this will automatically apply to the whole row element:
function editListItem(row) {
var cells = $(this).children('td');
var id = $cells.eq(4).text();
var data = [];
data[0] = cells.eq(0).html();
}