Populate HTML table with javascript [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Hi all and thanks in advance. I need to learn how to fill a table ussing javascript using the structure below.
var contacts = [
{name:"name1", number:"number1", address:"address1", notes:"note1"},
{name:"name2", number:"number2", address:"address2", notes:"note2"},
{name:"name3", number:"number3", address:"address3", notes:"note3"},
{name:"name4", number:"number4", address:"address4", notes:"note4"},
{name:"name5", number:"number5", address:"address5", notes:"note5"}
]

HTML
<table id="tableID">
<tbody>
</tbody>
</table>
Javascript
var wrap= function(value) {
return "<td>" + value + "</td>";
};
$("#tableID tbody").append("<tr><th>Name</th><th>Number</th><th>Address</th><th>Notes</th></tr>");
for (var i = 0; i < contacts.length; i += 1) {
$("#tableID tbody").append("<tr>"+ wrap(contacts[i].name)+ wrap(contacts[i].number)+ wrap(contacts[i].address)+ wrap(contacts[i].notes)+ "</tr>")
}

var table = $('<table>');
var c, i, l, tr, td;
for (i = 0, l = contacts.length; i < l; i += 1) {
c = contacts[i];
tr = $('<tr>');
tr
.append($('<td>' + c.name + '</td>'))
.append($('<td>' + c.number + '</td>'));
table.append(tr);
}

Try this
HTML
<table>
</table>
Jquery
var output='';
for(var i in contacts)
{
output+='<tr><td>'+contacts[i].name+'</td><td>'+contacts[i].number+'</td><td>'+contacts[i].address+'</td><td>'+contacts[i].notes+'</td></tr>';
}
$('table').empty().append(output)
DEMO

Related

Empty <li> tag after append [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
This loop always gives me an empty <li></li> after creating the tags. Why is this? How can I fix it?
P.S. Loop goes 2 times (I checked).
function a(){
for (var i = 0; i < list.length; i++) {
$("#flist").append('<li id="file' + i '"<li/>');
$("#flist").append('<li id="file' + i '_info"<li/>');
}
}
HTML result:
<ul id="flist" style="display: block;">
<li id="file0">...</li>
<li></li>
<li id="file0_info"></li>
<li></li>
<li id="file1">...</li>
<li></li>
<li id="file1_info"></li>
<li></li>
</ul>
It's because you're missing a > on the opening li tag, and it should be </li>, not <li/>.
function a(){
for (var i = 0; i < list.length; i++) {
$("#flist").append('<li id="file' + i + '"></li>');
$("#flist").append('<li id="file' + i + '_info"></li>');
}
}
Also note that it would be quicker to generate a single HTML string and append to the DOM once:
function a() {
var html = '';
for (var i = 0; i < list.length; i++) {
html += '<li id="file' + i + '"></li><li id="file' + i + '_info"></li>';
}
$('#flist').append(html);
}
Try this :
function a(){
for (var i = 0; i < list.length; i++) {
$("#flist").append('<li id="file' + i '"></li>');
$("#flist").append('<li id="file' + i '_info"></li>');
}
}

When I'll click td get td text dynamic in jquery [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
i'm create table using javascript but i stuck when i'll click table td,get dynamically td text value in jquery without using for loop/each
function table_form(day, month, year) {
var tr = '';
var table = '<table id="tbl" border="1px"><thead><tr><th><</th><th>Mar</th><th>></th><th></th><th><</th><th>2016</th><th>></th></tr><tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead>';
//~ dynamic_date_form(2,2016);
var tr_inc = 0;
for (var i = 0; i < 5; i++) {
tr += '<tr>';
for (var j = 0; j < 7; j++) {
tr_inc++;
tr += '<td id="id_' + tr_inc + '">' + tr_inc + '';
}
}
tr += '</tr>';
tr_inc++;
return table += tr;
}
$(document).ready(function() {
$("#date_id").one("click", function() {
this.insertAdjacentHTML("afterEnd", "<div id='lbl_date'></div>");
$('#lbl_date').html(table_form(1, 1, 1));
});
$('#tbl').click(function() {
alert($(this).text());
});
});
#lbl_date{
position: absolute;
background-color:#FFAA41;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="text" id="date_id" class="date" />
<label for="lbl_date">date</label>
You need event delegation for dynamically generated element like following.
$(document).on('click', '#tbl td',function(){
alert($(this).text());
});

JavaScript works in Chrome but not ie9 [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am facing an issue with JavaScript.I see that it works fine in chrome but not in IE9.This would not display what chrome is displaying on the web page as expected.
I am new to JavaScripting can I get help in fixing this issue.
<script type="text/javascript">
var tds = document.getElementById('course_table')
.getElementsByTagName('td');
var sum = 0;
for (var i = 0; i < tds.length; i++) {
if (tds[i].className == 'count-me') {
sum += isNaN(tds[i].innerHTML) ? 0
: parseInt(tds[i].innerHTML);
}
}
var lastrecord = tds[tds.length - 2].innerHTML;
var table = document.getElementById('course_table')
.getElementsByTagName('tr');
var max = table.length - 2;
document.getElementById('course_table').innerHTML += '<tr bgcolor=#FFCCFF><td></td><td>Total Courses</td><td>' + max + '</td><td>Total Credits Remaining</td><td>'+ sum + '</td><td> Expected Graduation Date</td><td></td><td>' + lastrecord + '</td><td></td></tr> ';
</script>
Thanks
Niveditha
The problem is most likely in the last line:
document.getElementById('course_table').innerHTML += '<tr bgcolor=#FFCCFF><td></td><td>fsffd</td><td>' + max + '</td><td>abcdRemaining</td><td>'+ sum + '</td><td> abc</td><td></td><td>' + lastrecord + '</td><td></td></tr> ';
IE doesn't handle trs being added by strings; besides it is non-standard. Replace that line with this, it programmatically builds up the row and is faster. I added the corresponding <td> as comments.
var table = document.getElementById('course_table');
var row = table.insertRow(-1);
row.style.backgroundColor = '#FFCCFF'; // `bgcolor` attribute is deprecated
row.insertCell(-1); // <td></td>
row.insertCell(-1).textContent = "fsffd"; // <td>fsffd</td>
row.insertCell(-1).textContent = max; // <td>' + max + '</td>
row.insertCell(-1).textContent = "abcdRemaining"; // <td>abcdRemaining</td>
row.insertCell(-1).textContent = sum; // <td>' + sum + '</td>
row.insertCell(-1).textContent = "abc"; // <td> abc</td>
row.insertCell(-1); // <td></td>
row.insertCell(-1).textContent = lastRecord; // <td>' + lastRecord + '</td>
row.insertCell(-1); // <td></td>
The important methods here are insertRow and insertCell, they are guaranteed to work. textContent is faster and safer than innerHTML. Please use CSS instead of the deprecated bgcolor attribute
Internet Explorer doesn't like adding <tr> elements to the <table> in that manner. What you can do is append a new <tbody> element to the table:
// ... the first part of your function ...
var lastrecord = tds[tds.length - 2].innerHTML;
var table = document.getElementById('course_table');
var newbody = document.createElement('tbody');
newbody.innerHTML = '<tr bgcolor=#FFCCFF><td></td><td>Total Courses</td><td>' + max + '</td><td>Total Credits Remaining</td><td>'+ sum + '</td><td> Expected Graduation Date</td><td></td><td>' + lastrecord + '</td><td></td></tr> ';
table.appendChild(newbody);

"Message: Expected ')' " but that doesn't seem right [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
i have this code :
function createTable(tabletop, tableside, gridbutton, tabletype){
var spinner = createSpinner();
var table = '<table><tr><th> </th>';
for(var j = 0; j < tabletop.length; j++){
table +='<th scope="col">' + tabletop[j]+ '</th>'; // creates tableheader horizontally
}
table+='</tr>';
for(var i = 0; i < tableside.length; i++) {
table+='<tr><th>' + tableside[i] + '</th>' ; // creates table header vertically
for(var j = 0; j < tabletop.length; j++){ // inserts tablecell
table +='<td>';
function createButtons(tabletop[j], tableside[i], tabletype){
var rolebuttons = new Array();
var phasebuttons = new Array();
var systembuttons = new Array();
for(var i = 0; i < Articles.length; i++){
if(tabletype == 'role'){
if(contains(Article[i].System, tabletop[j] && Article[i].Phase, tableside[i])){
$.each(rolebuttons, function(i, a){
if($.inArray(a, rolebuttons) === -1) rolebuttons.push(a);
)};
table += '<input type="button" value="'+ rolebuttons[i] + '" class="'+ tabletype +'button" onclick="createListView(\'' + rolebuttons[i] + '\', \'' + tabletop[j] +'\', \''+ tableside[i] +'\', \'role\');"/>';
}
}else if(tabletype == 'phase'){
if(contains(Article[i].System, tabletop[j] && Article[i].Role, tableside[i])){
$.each(phasebuttons, function(i, a){
if($.inArray(a, phasebuttons) === -1) phasebuttons.push(a);
)};
}else if(tabletype == 'system'){
if(contains(Articles[i].Role, tabletop[j] && Article[i].Phase, tableside[i])){
$.each(systembuttons, function(i, a){¨
if($.inArray(a, systembuttons) === -1) systembuttons.push(a);
)};
}
}
}
}
table += '</td>';
}
table += '</tr>';
}
table+=('</table>');
$('body').html('<div class="wrapper">' + table + spinner + '</div>');
return table;
}
and I keep getting the message : Expected ')' at line xxx char xxx (in the middle of the tabletop variable):
this line:
function createButtons(tabletop[j], tableside[i], tabletype){
but I really cant see what the problem is?
did I go blind? :)
hop you can help me out :)
Firstly, you have some syntax mistakes in your code; I'm assuming you accidentally included some other characters in your code.
For example, the speech mark shouldn't appear here:
$.each(systembuttons, function(i, a){¨
Regarding your problem, parameter names cannot contain brackets. I can understand what you are trying to do in regards to running your original loop and then you are thinking that you can get the current loop iteration however this isn't how it works.
I think that you need not create a function called "createButtons". I would simply include your function's contents within your original loop.
Also, just a tip - try not to take directness as an insult, I'm sure the commentator didn't mean to come across as rude, he/she simply keeps things direct to get straight to the point. It enables us all to get the correct answer for you quicker :)

How to find empty tr in table using Javascript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to find Empty tr in table, is there any way to find it?
after finding empty row I want to insert some data in it.
Supposing you have this HTML :
<table id=tbl>
<tr><td>A</td><td>B</td></tr>
<tr><td>A</td><td>B</td></tr>
<tr><td></td><td></td></tr> <!-- this line is empty -->
<tr><td>A</td><td>B</td></tr>
</table>
Then you can fill the empty line like this :
var rows = document.getElementById('tbl').rows;
for (var i=0; i<rows.length; i++) {
var txt = rows[i].textContent || rows[i].innerText;
if (txt.trim()==="") rows[i].innerHTML="<td>Something</td>";
}
Demonstration
This uses :
the rows property of the table
textContent (or innerText for IE) to get the content without the tags
As this also use the trim function which isn't available in IE8, you might want to add this shim :
if(!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g,'');
};
}
There might be better ways, this is what occurred to me.
$('tr').each(function() {
if($(this).find('td').length == 0) {
// empty tr
// id of tr is available through this.id
}
});
Maybe something like this $('table tr:empty').html('....')
var tables = document.getElementsByTagName('table');
var table = tables[0];
var trs = table.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
if (trs[i].innerHTML === '') {
console.log('EMPTY', trs[i]);
} else {
console.log('NOT EMPTY', trs[i]);
}
}
I think its not easy. You can see this link.
HTML:
<table id="table" style="border: 1px solid green;"><tbody>
<tr id="empty"></tr>
<tr id="withText"><font style="color: red;">text</font></tr>
<tr id="withEmptyTd"><td></td></tr>
<tr id="withTdWithText"><td>text</td></tr>
</tbody></table>
<div id="output"></div>
Javascript:
var output = document.getElementById('output');
var table = document.getElementById('table');
var trs = table.querySelectorAll('tr');
var tr, id, text, tds, j, td, tdText;
for (var i = 0; i < trs.length; i++) {
tr = trs[i];
id = tr.id;
output.innerHTML += "Getting tr[" + id + "]<br />";
text = tr.innerHTML;
output.innerHTML += "tr[" + id + "].innerHTML = \"" + text + "\" it's length = " + text.length + "<br />";
tds = tr.querySelectorAll('td');
output.innerHTML += "tr[" + id + "] have " + tds.length + " tds<br />";
for (j = 0; j < tds.length; j++) {
td = tds[j];
tdText = td.innerHTML;
output.innerHTML += "tr[" + id + "] -> td[" + j + "].innerHTML = \"" + tdText + "\" its length = " + tdText.length + "<br />";
}
}
And output will be:
Getting tr[empty]
tr[empty].innerHTML = "" it's length = 0
tr[empty] have 0 tds
Getting tr[withText]
tr[withText].innerHTML = "" it's length = 0
tr[withText] have 0 tds
Getting tr[withEmptyTd]
tr[withEmptyTd].innerHTML = "" it's length = 9
tr[withEmptyTd] have 1 tds
tr[withEmptyTd] -> td[0].innerHTML = "" its length = 0
Getting tr[withTdWithText]
tr[withTdWithText].innerHTML = "text" it's length = 13
tr[withTdWithText] have 1 tds
tr[withTdWithText] -> td[0].innerHTML = "text" its length = 4
Cause any tag or text in tr but not in td shows before the table.

Categories

Resources