Jitendra Tiwari Jitendra Tiwari - 5 months ago 13
Javascript Question

Why `td` is not append in result?



var sritems=[];
sritems.push({
"start" : "A",
"text" : "CONTRACTORS OF HIGHWAY & HEAVY STRUCTURES: Contractors primarily engaged in the construction of highways, streets and roads,air strip paving, underground construction,excavating, maritime construction, and/or construction of other projects, with the exception of buildings",

},{
"start" : "B",
"text" : "CONTRACTORS OF HEAVY BUILDINGS: Contractors primarily engaged in the construction of heavy structures and planning of real estate developments (excluding housing contractors).",

},{
"start" : "C",
"text" : "CONTRACTORS OF BOTH OF THE ABOVE: Contractors substantially devoted to the construction of highways, heavy structures AND buildings.",

},{
"start" : "D",
"text" : "CONTRACTORS OF SINGLE AND MULTIFAMILY HOMES.",

},{
"start" : "E",
"text" : "CONTRACTORS OF PETROLEUM, SANITARY & PIPELINES.",

},{
"start" : "F",
"text" : "CONTRACTORS OR BUILDERS OTHER THAN THE ABOVE: Carpentry, masonry, plumbing, roofing,heating & air conditioning, electricity, painting etc.",

},{
"start" : "G",
"text" : "PRODUCERS OF BUILDING AND CONSTRUCTION MATERIALS: Aggregate producers: sand, gravel,rock, lime, cement, concrete mixers, concrete asphalt.",

},{
"start" : "H",
"text" : "MINING.",

},{
"start" : "I",
"text" : "GOVERNMENT, NATIONAL, STATE AND MUNICIPAL.",

},{
"start" : "J",
"text" : "MANUFACTURERS OF CONSTRUCTION EQUIPMENT AND SUPPLIES.",

},{
"start" : "K",
"text" : "DISTRIBUTORS OF CONSTRUCTION EQUIPMENT,MATERIALS AND SUPPLIES INCLUDING SALES AND RENTALS.",

},{
"start" : "L",
"text" : "IMPORTERS OF CONSTRUCTION EQUIPMENT AND SUPPLIES.",

},{
"start" : "M",
"text" : "CONSULTING ENGINEERING.",

},{
"start" : "N",
"text" : "ARCHITECTS.",

},{
"start" : "O",
"text" : "TRADE ASSOCIATIONS INCLUDING CONSTRUCTION CHAMBERS, LIBRARIES, CLUBS.",

},{
"start" : "P",
"text" : "OTHER (PLEASE SPECIFY).",

}
);

for(i=0;i<sritems.length;i++) {
addCheckbox(sritems[i].start,sritems[i].text,i);
}

function addCheckbox(start, text, id) {
var container = $('#cblist');
var tr = $("<tr />");
// var inputs = container.find('input');
// var id = inputs.length+1;
$('<label />', { 'for': 'cb'+id, text: start}).appendTo($("<td />")).appendTo(tr);
$('<input />', { type: 'radio', id: 'cb'+id, name:'crm', value: start}).appendTo($("<td />")).appendTo(tr);
$('<label />', { 'for': 'cb'+id, text: text}).appendTo($("<td />")).appendTo(tr);

tr.appendTo(container);
}

<script src="https://code.jquery.com/jquery-1.7.1.min.js" integrity="sha256-iBcUE/x23aI6syuqF7EeT/+JFBxjPs5zeFJEXxumwb0=" crossorigin="anonymous"></script>

<table id="cblist">

</table>




Answer

Define td as a separate variable again. When you have 2 appendTo on same line, it will consider the last appendTo and that's what was happening in your case i.e. It was appending whole set to tr without td being attached to DOM. So store td in one more var and append to that td each time.. At the end append td to tr and tr to table.

Updated Part

function addCheckbox(start, text, id) {
  var container = $('#cblist');
  var tr = $("<tr />");
  var td = $("<td/>"); //create a td

  $('<label />', {
    'for': 'cb' + id,
    text: start
  }).appendTo(td); //append to td each time new element is constructed
  $('<input />', {
    type: 'radio',
    id: 'cb' + id,
    name: 'crm',
    value: start
  }).appendTo(td);
  $('<label />', {
    'for': 'cb' + id,
    text: text
  }).appendTo(td)
  td.appendTo(tr); //append td to tr here
  tr.appendTo(container);
}

UPDATE 1


Then you don't need any td declaration. You can just create td as you create other elements and specify its innerHTML/html as below:

Working snippet

var sritems = [];
sritems.push({
  "start": "A",
  "text": "CONTRACTORS OF HIGHWAY & HEAVY STRUCTURES: Contractors primarily engaged in the construction of highways, streets and roads,air strip paving, underground construction,excavating, maritime construction, and/or construction of other projects, with the exception of buildings",

}, {
  "start": "B",
  "text": "CONTRACTORS OF HEAVY BUILDINGS: Contractors primarily engaged in the construction of heavy structures and planning of real estate developments (excluding housing contractors).",

}, {
  "start": "C",
  "text": "CONTRACTORS OF BOTH OF THE ABOVE: Contractors substantially devoted to the construction of highways, heavy structures AND buildings.",

}, {
  "start": "D",
  "text": "CONTRACTORS OF SINGLE AND MULTIFAMILY HOMES.",

}, {
  "start": "E",
  "text": "CONTRACTORS OF PETROLEUM, SANITARY & PIPELINES.",

}, {
  "start": "F",
  "text": "CONTRACTORS OR BUILDERS OTHER THAN THE ABOVE: Carpentry, masonry, plumbing, roofing,heating & air conditioning, electricity, painting etc.",

}, {
  "start": "G",
  "text": "PRODUCERS OF BUILDING AND CONSTRUCTION MATERIALS: Aggregate producers: sand, gravel,rock, lime, cement, concrete mixers, concrete asphalt.",

}, {
  "start": "H",
  "text": "MINING.",

}, {
  "start": "I",
  "text": "GOVERNMENT, NATIONAL, STATE AND MUNICIPAL.",

}, {
  "start": "J",
  "text": "MANUFACTURERS OF CONSTRUCTION EQUIPMENT AND SUPPLIES.",

}, {
  "start": "K",
  "text": "DISTRIBUTORS OF CONSTRUCTION EQUIPMENT,MATERIALS AND SUPPLIES INCLUDING SALES AND RENTALS.",

}, {
  "start": "L",
  "text": "IMPORTERS OF CONSTRUCTION EQUIPMENT AND SUPPLIES.",

}, {
  "start": "M",
  "text": "CONSULTING ENGINEERING.",

}, {
  "start": "N",
  "text": "ARCHITECTS.",

}, {
  "start": "O",
  "text": "TRADE ASSOCIATIONS INCLUDING CONSTRUCTION CHAMBERS, LIBRARIES, CLUBS.",

}, {
  "start": "P",
  "text": "OTHER (PLEASE SPECIFY).",

});

for (i = 0; i < sritems.length; i++) {
  addCheckbox(sritems[i].start, sritems[i].text, i);
}

function addCheckbox(start, text, id) {
  var container = $('#cblist');
  var tr = $("<tr />");
  
  $('<td/>', {
    html:$('<label />',{
    'for': 'cb' + id,
    text: start
  })}).appendTo(tr);
  $('<td/>', {
    html:$('<input />',{
    type: 'radio',
    id: 'cb' + id,
    name: 'crm',
    value: start
  })}).appendTo(tr);
  $('<td/>', {
    html:$('<label />',{
    'for': 'cb' + id,
    text: text
  })}).appendTo(tr);
  
  tr.appendTo(container);
}
<script src="https://code.jquery.com/jquery-1.7.1.min.js" integrity="sha256-iBcUE/x23aI6syuqF7EeT/+JFBxjPs5zeFJEXxumwb0=" crossorigin="anonymous"></script>

<table id="cblist">

</table>

Comments