Question

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 1

再次将td定义为单独的variable。当您在同一行上有2个appendTo时，它会考虑最后一个appendTo以及您案例中发生的事情，即它将整个集合附加到tr而没有{{ 1}}被附加到td。因此，再将DOM存储在另一个td中，并每次追加到var ..最后将td追加到td和tr tr。

更新了部分

table

更新1

然后你不需要任何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); }声明。您可以在创建其他元素时创建td，并指定其td，如下所示：

工作代码段

＆＃13;

innerHTML/html

＆＃13;

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

＆＃13;

Answer 2

您好参考此链接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);

Answer 3

我现在在append之前使用appendTo解决了这个问题。

如果有人有更好的解决方案，请分享。

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

Answer 4

脚本中没有<td >可用。你必须在之后声明 var tr = $("<tr />")初始化;所以只有你可以在其中使用appendTo。

为什么`td`没有追加到结果中？

4 个答案: