爲什麼`td`沒有附加在結果中？

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>

來源

2016-06-13 Jitendra Tiwari

定義td作爲再次單獨variable。當你在同一行上有2 appendTo時，它將考慮最後的appendTo，這就是你的情況，即它將整個集合追加到tr而不是td被附加到DOM。因此，將td另存爲var並每次追加td ..最後附加td至tr和tr至table。

更新部分

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); 
}

更新1

那麼你不需要任何td聲明。你可以創建td在創建其他元素和低於其innerHTML/html註明：

工作片斷

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>

來源

2016-06-13 07:09:04

感謝Guruprasad。你的代碼工作正常，但我想在一行3 td。例如一個用於'A'，第二個用於'單選按鈕'，第三個用於'文本' –

@JitendraTiwari更新回答..檢查並讓我知道.. –

夢幻般的饒:)它適用於我仍在學習。 –

沒有<td >在腳本中可用。你必須聲明， var tr = $("<tr />")初始化後;所以只有你可以在其中使用appendTo。

來源

2016-06-13 07:11:14 Maharajan

嗨參考，此鏈接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);

來源

2016-06-13 07:16:00

謝謝@gayathri。你的代碼工作正常，但我想在一行3 td。例如一個用於'A'，第二個用於'單選按鈕'，第三個用於'文本' –

檢查我更新的plunker https://plnkr.co/edit/XgQIHgnDDeFCjG6Jd6Ib?p=preview –

完美運行。謝謝:) –

我已經解決了這個問題，現在appendTo之前使用append。

如果有人有更好的解決方案，那麼請分享。

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); 
}

來源

2016-06-13 07:51:50

爲什麼`td`沒有附加在結果中？

回答

相關問題