2016-06-13 7 views
0

Warum `td` nicht im Ergebnis anhängen?

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) { 
 
    \t var container = $('#cblist'); 
 
    \t var tr = $("<tr />"); 
 
    \t // var inputs = container.find('input'); 
 
    \t // var id = inputs.length+1; 
 
\t $('<label />', { 'for': 'cb'+id, text: start}).appendTo($("<td />")).appendTo(tr); 
 
    \t $('<input />', { type: 'radio', id: 'cb'+id, name:'crm', value: start}).appendTo($("<td />")).appendTo(tr); 
 
    \t $('<label />', { 'for': 'cb'+id, text: text}).appendTo($("<td />")).appendTo(tr); 
 

 
    \t 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>

Antwort

1

td als separate variable wieder definieren. Wenn Sie 2 appendTo in der gleichen Zeile haben, wird es die letzte appendTo betrachten, und das war, was in Ihrem Fall passierte, d. H. Es wurde der ganze Satz an tr angefügt, ohne td an DOM angefügt zu werden. Also speichern td in einem mehr var und fügen Sie zu diesem td jedes Mal .. Am Ende appendieren Sie td zu tr und tr zu table.

Aktualisierte Teil

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


Dann brauchen Sie keine td Erklärung. Sie können nur td erstellen, wie Sie andere Elemente erstellen und geben ihre innerHTML/html wie folgt:

Arbeits 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>

+0

danke Guruprasad. Ihr Code funktioniert gut, aber ich möchte 3 td in einer Zeile. z.B. eins für 'A', zweites für' radio button' und drittes für 'text' –

+0

@JitendraTiwari Aktualisierte Antwort .. check und lass es mich wissen .. –

+1

fantastisches Rao :) es funktioniert für mich immer noch lernen. –

0

kein <td > im Skript zur Verfügung steht. müssen Sie dies nach der var tr = $("<tr />") Initialisierung erklären; also nur du kannst appendTo darin verwenden.

1

Hallo refere diesen Link https://plnkr.co/edit/XgQIHgnDDeFCjG6Jd6Ib?p=preview

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

    td.appendTo(tr); 
    td2.appendTo(tr); 
    td3.appendTo(tr); 
    tr.appendTo(container); 
+0

danke @gayathri. Ihr Code funktioniert gut, aber ich möchte 3 td in einer Zeile. z.B. eins für 'A', zweites für' radio button' und drittes für 'text' –

+1

überprüfen Sie meinen aktualisierten Bottker https://plnkr.co/edit/XgQIHgnDDeFCjG6Jd6Ib?p=preview –

+0

, das tadellos funktioniert. danke :) –

1

ich dieses Problem nun gelöst haben für append vor appendTo verwenden.

Wenn jemand eine bessere Lösung dann bitte teilen.

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