Develop Reference

How to make columns with collapsible ul and li tags dynamically?

I am currently using the following two functions to dynamically create a collapsible list from an object which contains info on the individual parts within the object. I have also included a checkbox for each item in the collapsible list, but that check box always appears right next to the names. I would prefer these checkboxes to be in the same row as the list item, but in a separate column so that it looks neater. I might also add more columns later on with material info. So I was trying to figure out how I can do this with my current setup below or if there was a better way to achieve what I want instead of using my list.
<div class="objtree"></div>
function check(obj) {
var html = '';
var name = obj.name ? obj.name +' (' +obj.type+')' : obj.type;
html +='<div class="node">'
html += '<li class="ntitle">' + name + '<input type="checkbox" name="'+(obj.id-id)+'" value="checked" onchange="snap(this)"/></li>';
if (obj.children) {
html += '<ul class="children hide">';
for (var i = 0; i < obj.children.length; i++) {
html += check(obj.children[i],)
}
html += '</ul>';
}
html += "</div>";
return html;
}
function assignEvent() {
$('.ntitle').click(function () {
var p = $(this);
var c = p.parent().find('.children:first')
if (c.hasClass('hide')) {
c.removeClass('hide');
p.addClass('open');
}
else {
c.addClass('hide');
p.removeClass('open');
}
})
}
The following is what I currently have which is collapsible if I click on the items:
And I am trying to achieve the following:

Get value of first <td> element in same row as input button

I am trying to get the text from the first td tag from each row by using the input button as shown below:
for(var i in obj.questions){
question += '<tr class="row">';
question += "<td>"+ obj.questions[i].question+"</td>";
question += '<td><input type="button" class="question" value="Add question" onclick="addQuestion()"></td>';
question += "</tr>";
document.getElementById("t01").innerHTML = question;
}
The id=t01 is for the table tag. Here is the js that I tried working on but is not working:
var question;
$('.question').click(function() {
question = $(this).parent().find('td:first-child').text();
});

You have to iterate through each row like below
$('.question').click(function () {
$('#t01 .row').each(function () {
console.log($(this).find("td:first-child").text());
});
});
Also I would suggest to write html use jQuery instead of javascript instead of document.getElementById("t01").innerHTML
$('#t01').html(question);
Also your implementation of creating rows dynamically have one problem , you will get only one row every time. You can change your code like below
var question = "";
for (var i in questions) {
question += '<tr class="row">';
question += "<td>" + questions[i].question + "</td>";
question += '<td><input type="button" class="question" value="Add question" onclick="addQuestion()"></td>';
question += "</tr>";
}
$('#t01').html(question);
I have created a running sample for you
https://stackblitz.com/edit/jquery-n4spxc?file=index.js

You may need to use .live() to achieve this, depending on the order of your event binding and HTML generation. Also, consider revising your click event logic so that you iterate over all rows of the table to access the text of "first cell" for each table row:
// When the .question input is added to the DOM, this event logic will
// be bound to the input element automatically
$(document).live('.question', 'click', function() {
var question;
// Iterate over each row of the table
$('#t01 .row').forEach(function() {
// For each row, extract the text from first row cell
var row = $(this);
var firstCell = row.find('td:first-child');
var firstCellText = firstCell.text();
// Not sure how you want to use the data, this shows
// how to construct a comma separated string of text
// from all first row cells
question += firstCellText + ',';
});
// Print result to console
console.log(question);
});

Why doesn't my innerHTML method work to list things in my contact form?

I am making a program, and I'm wondering why all I see on my html page is the form, but only a single . where the bulleted list for an unordered list should be. I input the user input in the fields, but it doesn't show me the data in the fields, like it's supposed to, when I click submit. Here's the code.
function getFormElements() {
var gather_form_elements = new Array(
$("#first_name").val(),
$("#last_name").val(),
$("email").val(),
$("#phone_number").val()
);
displayValues(gather_form_elements);
}
function displayValues(gather_form_elements) {
for(i=0; i<gather_form_elements.length; i++)
{
document.getElementById("contact_info").innerHTML = "<li>" + gather_form_elements[i] + "</li>";
}
}

Because you are overiding it on every iteration. Try to accumulate the html before using innerHTML like this:
var html = "";
for(var i = 0; i < gather_form_elements.length; i++) {
html += "<li>" + gather_form_elements[i] + "</li>";
// ^^ the += is crucial. If you don't use it, it will just replace the content of html (the innerHTML in your code), we need to use += to append to html instead of overriding it.
}
document.getElementById("contact_info").innerHTML = html;
You can acheive the same result using only one line of code:
document.getElementById("contact_info").innerHTML =
'<li>' + gather_form_elements.join('</li><li>') + '</li>';

Javascript function for adding row to html table does not work

I developed two javascript functions which create a html table (showList4() ) and which add rows (addRow() ), pls see code below. showList4() works fine, but addRow() does not; addRow() adds row, but:
(error 1): the row is not added straight under the previous row, but shifted to the left.
(error 2): executing addRow the second time does not put the row after/under the previously added row, but before/above it.
For adding a row I looked at the solution at Add table row in jQuery but I dont know where I go wrong with the addRow() code?
javascript code:
function showList4(title, wrapper, wrappermethod, tableid){ //this functions works fine
if((!$('#'+wrapper).length) ){//no action if no info or invalid wrapper agurment type
return;
}//if
var form = '<table id="'+tableid+'">';
//add title
if(typeof title === 'string'){
form += '<caption> '+ title +' </caption>';
}//if
form += '<tbody>';
var nrofrows = arguments.length - 4;
console.log('Showlist3- nrofrows: '+nrofrows)
//add following rows with vert labels in first colum and datavalues in following columns
for(var row=0;row<nrofrows;row++){ //for each following row
form += '<tr> <td> ';
for(var column=0, column_max=arguments[4+row].length;column<column_max;column++){
if(arguments[4+row] !== undefined){
form += '<td>' + arguments[4+row][column] + ' </td>';
}//if
}//for(var column=0, column_max=labels_hori.length;column<column_max;column++){
form += '</tr>';
}//for(var i=0,i_max=labels_hori.length;i<i_max;i++
form += '<tr><td> </tr></td> </tbody> </table>'; //add empty line and finish table
switch(wrappermethod){
case 'html':
$('#'+wrapper).html(form);
break;
default: //no action if invalid wrapper argument
break;
};//switch
return;
};//showList4()
function addRow(tableid,values){
var form = '<tr>';
for(var i=0,i_max=values.length;i<i_max;i++){
form += '<td>' + values[i] + '</td>';
}//for
form += '</tr>';
$('#'+tableid+' > tbody:last').after(form); //reference example code: https://stackoverflow.com/questions/171027/add-table-row-in-jquery
//$('#'+tableid+' tr:last').after(form); //reference example code: https://stackoverflow.com/questions/171027/add-table-row-in-jquery
return;
}//addrow
$(document).ready(function(){
showList4('Title table','myDivid','html','myTable',
['Some text1','Some text2','Some text3','Some text4'],
['1','2','3','4']);
addRow('myTable',['A','B','C','D']);
addRow('myTable',['E','F','G','H']);
});//$(document).ready(function(){
html code:
<div id="myDivid" style="width:500px; "> </div>

There are a few things wrong with your code.
First, you are targeting the "last body tag" rather than the "last row in the body". So change your line
$('#'+tableid+' > tbody:last').after(form);
to
$('#'+tableid+' > tbody > tr:last').after(form);
This will ensure that the new row is inserted within the body of the table.
Second, you are creating an additional cell in your first two rows. See this line
form += '<tr> <td> ';
Change it to
form += '<tr>';
Third, you have broken html on this line
form += '<tr><td> </tr></td> </tbody> </table>'; //add empty line and finish table
Change it to
form += '<tr><td colspan="4"></td></tr></tbody> </table>'; //add empty line and finish table. NOTE the colspan to format the table correctly.
Here is a working version at jsbin
p.s. jsbin suggest some other fixes to missing semi-colons, misuse of the switch statement and unnecessary semi-colons.

html table editable and non-editable cells with jQuery

Is there a plugin or way to make certain table columns (not rows) editable and others not editable
with jQuery?
I have seen plugins for clicking on a cell to make it editable, but I mean explicitly making a cell/column editable or not.
I have a way of doing it but it feels like a bit of a hack job.
Here is my function for making a column editable:
function isEditable(rowArray, headersArray)
{
var counter = 0;
var notEditable = ['product code', 'product'];
for(i in rowArray){
counter = 0;
data = headersArray[i].toLowerCase();
for(a in notEditable){
if(data == notEditable[a]){
counter++;
}
}
if(counter > 0){
rowArray[i] += 'notEditable';
}
}
return rowArray;
}
it compares the header of the cell to an array of predefined values which = a non-editable column.
Then I build the row:
function buildHTMLTableRow(row, mutable)
{
output = '';
output += '<tr>';
for(var i = 0; i < row.length; i++)
{
value = trim(row[i]);
if(mutable){
index = value.indexOf('notEditable');
if(index != -1){
value = value.substring(0, index);
output += '<td>' + value + '</td>';
}
else{
output += '<td><input size="5" type="text" value="' + value + '" /></td>';
}
}
else{
output += '<td>' + value + '</td>';
}
}
output += '</tr>';
return output;
}
The mutable parameter decides if the row is editable or not, and the indexOf('noteditable') decides for the cell(but pretty much column) from the isEditable function.
Is there a plugin that does this better, or should I just settle with what I have?

Visit this jsFiddle link: Disable Columns
Following is the data flow:
I have created a row Array named "rowsD". When page loads I am populating my table (id=myData) with these rows.
Now creating another array called disableHeaders wherein I am passing the headers,
which you need to disable entire columns.
I am calling function disableFields passing disableHeaders as parameter
In the function, first I am fetching the index of the header whose value is equal to the values in headers array
If I find one, then from Input tag I am extracting the Value attribute using $(this).find('input') selector
Finally I am replacing the current child with Label tag passing the extracted Input tags Value
You may also comment out disableFields(disableHeaders); line to actually see, how table gets rendered initially
Thank you