2016-06-13 22 views
0

結果に `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>

答えて

1

再び別variableとしてtdを定義します。同じ行に2つのappendToがある場合は、最後にappendToとみなされます。その場合はtrtdが添付されていない場合はDOMに追加されています。したがって、tdをもう1つvarに保存し、その都度、tdに追加してください。最後に、tdからtrtrから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); 
} 

UPDATE 1


次に、あなたはどんなtd宣言は必要ありません。あなたが他の要素を作成するとちょうどtdを作成し、そのinnerHTML/html次のように指定することができます。

作業は、スクリプトで使用可能な<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) { 
 
    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

Guruprasadに感謝します。あなたのコードは正常に動作していますが、私は行内に3つのTDをします。例えば1つは 'A'、2つ目は'ラジオボタン 'と'テキスト 'のためのものです。 –

+0

@JitendraTiwari更新された答え。確認してお知らせください.. –

+1

幻想的なラオ:それはまだ私のために働いています。 –

0

スニペット。 var tr = $("<tr />")の初期化後にそれを宣言する必要があります。だからあなただけがそれでappendToを使うことができます。

1

こんにちは今appendToappendを使用するため、私はこの問題を解決してきた。このリンク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

ありがとう@ガヤトリー。あなたのコードは正常に動作していますが、私は行内に3つのTDをします。例えば1つは 'A'、2つ目は'ラジオボタン 'と' text'のためのものです –

+1

私の更新されたプランカーhttps://plnkr.co/edit/XgQIHgnDDeFCjG6Jd6Ib?p=preview –

+0

を完全にチェックしてください。ありがとう:) –

1

をREFERE。

誰かがより良い解決策を持っている場合は、これを共有してください。

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