Develop Reference

Alternative ways to dynamically create li elements

Using JavaScript, I need to dynamically create a list like this:
<ul id="list">
<li>2015</li>
<li>2016</li>
<li>2017</li>
<li>2018</li>
<li>2019</li>
<li>2020</li>
</ul>
The "classic solution" (as far as I know) is:
for (var i = 2015; i <= 2020; i++) {
var li = document.createElement("li");
li.innerHTML = i;
list.appendChild(li);
}
It works perfectly.
But I would like to find alternative, better - in terms of performance - solutions, if there are (I want to learn something more).
So I tried:
for (var i = 2015; i <= 2020; i++) {
var el = "<li>" + i + "</li>";
list.insertAdjacentHTML('beforeend', el);
console.log(el);
el += el;
}
<ul id="list"></ul>
AND
for (var i = 2015; i <= 2020; i++) {
var el = "<li>" + i + "</li>";
list.innerHTML += el;
console.log(el);
}
<ul id="list"></ul>
But in both cases this is the result:
in the DOM:
<ul id="list">
<li>2015</li>
<li></li>
<li>2016</li>
<li></li>
<li>2017</li>
<li></li>
<li>2018</li>
<li></li>
<li>2019</li>
<li></li>
<li>2020</li>
<li></li>
</ul>
while in the console:
<li>2015<li>
<li>2016<li>
<li>2017<li>
<li>2018<li>
<li>2019<li>
<li>2020<li>
Why those empty nodes (<li></li>)? And why in the DOM only?

In both you added "<li>" + i + "<li>" instead of "<li>" + i + "</li>"
Missing slash small thing, but user agents are prepared to fix missing closing... and your code appeared with doubled li

BootstrapJS - Nav Nav-list not collapsing on click.

Stumped on another one. I'm using boostrapJS to create a Nav-List. Ideally the headers will remain collapsed by default, but will expand when clicked. Right now I have some javascript that will go and dynamically populate the List, but the click event seems to be doing nothing. (sort of - I click on the header and it jitters a bit, but it does not collapse).
I've looked at the code examples, and I'm pretty sure I'm using the same classes and div structure, but It still seems to be not working, and it's not throwing any errors.
Here is my Code:
$('#header').append('<ul class="nav nav-list">');
for (i = 0; i < len; i++) {
k = keys[i];
$('#header').append('<label class="tree-toggle nav-header">' + keys[i] + '</label>');
for (var j in groupedtemplates[k]) {
$('#header').append('<li data-value=' + groupedtemplates[k][j].id + '>' + groupedtemplates[k][j].attributes.im_name.value + '</li>');
}
}
$('#header').append('</ul>');
$(document).ready(function () {
$('.tree-toggle').click(function () {
$(this).parent().children('ul.tree').toggle(200);
});
});
The HTML that it's being inserted into is just a simple container.
<div class="well" style="width:100%; padding: 8px 0;" id="header">
</div>

Figured it out.
When you append a tag without a closing tag, the browser inserts one for you. Because of this the objects were not appearing as children.
This is my revised solution that puts all the data to be appended in a variable, then appends it afterwards.
for (i = 0; i < len; i++) {
k = keys[i];
var toAppend = "";
toAppend = toAppend + '<ul class="nav nav-list">' + '<li><label class="tree-toggle nav-header">' + keys[i] + '</label</li>' + '<ul class="nav nav-list tree">'
for (var j in groupedtemplates[k]) {
toAppend = toAppend + '<li data-value=' + groupedtemplates[k][j].id + '>' + groupedtemplates[k][j].attributes.im_name.value + '</li>'
}
toAppend = toAppend + "</ul></ul>";
$('#header').append(toAppend);
}

Populate HTML table with javascript [closed]

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

"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.