Динамически создаваемые таблицы - выросли вместе

Я почти там, создавая несколько отдельных html-таблиц динамически в jquery. Но проблема на данный момент заключается в том, что таблицы растут вместе, как сиамские близнецы. У меня есть divblock в html-файле с именем PaymentTables и этому элементу добавляется созданный класс-селектор paymentoptions. Все это делается в функции, которая после ее вызова создает таблицу - именно то, что я хочу. Но если я вызову эту функцию два раза, классные объекты, похоже, растут togehter.Динамически создаваемые таблицы - выросли вместе

Как я могу решить эту проблему, чтобы они стали отдельными?

HTML

<body> 

    <div id="paymentTables"> 
    </div> 

</body>

Javascript

window.onload = function() { 


    createTable(); 
    //createTable(); call this a second time generate a second table but that seem to be grown together with the first one. 


}; 



function createTable(){ 

    var desc = "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur"; 
    var mytable = $('<table></table>').attr({ id: "paymentoptions_id" }); 
    var rows = 1; 
    var cols = 2; 
    for (var i = 0; i < rows; i++) { 
     var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable); 
     for (var j = 0; j < cols; j++) { 

      switch (j) { 
      case 0: 
       $('<td valign="top"></td>').append('<input type="checkbox">').appendTo(row); 
      break; 
      case 1: 
       $('<td valign="top"></td>').html("text1<br><span>" + desc + "</span>").appendTo(row); 
      break; 
      } 
     } 

    } 

    $('#paymentTables').addClass("paymentoptions"); 

    mytable.appendTo(".paymentoptions");   
}

CSS

.paymentoptions { 

    width: 300px; 
    border: 1px solid black; 
    border-radius: 5px; 
}

вызывается один раз

называется второй раз

Может быть ответ, что есть крупный тег отсутствует? Но где?

источник

2016-06-26 java

У вас есть две отдельные таблицы. Граница делает их похожими на один стол, потому что вы размещаете класс paymentoptions на окружающих <div>.

Существует еще одна проблема с HTML, который вы генерируете. Вы размещаете id на сгенерированных таблицах. Все созданные таблицы будут иметь тот же самый id, но значения id должны быть уникальными.

Может быть, вы должны изменить эту строку:

var mytable = $('<table></table>').attr({ id: "paymentoptions_id" });

Для этого:

var mytable = $('<table></table>').addClass("paymentoptions");

И изменить эту строку:

mytable.appendTo(".paymentoptions");

Для этого:

mytable.appendTo("#paymentTables");

И удалить эту строку:

$('#paymentTables').addClass("paymentoptions");

Это делает его таким образом, только окружающий контейнер <div> имеет уникальный id, в то время как каждая из таблиц имеет один и тот же класс paymentoptions.

jsfiddle

источник

2016-06-26 16:02:51

Ваши таблицы не разделены, потому что вы применили CSS для DIV, который содержит все таблицы.

Итак, чтобы исправить то, что вы можете сделать, вместо применения css в родительском div всех таблиц примените его к отдельным таблицам.

В вашем css заменить .paymentoptions на table.

Посмотрите это, например.

window.onload = function() { 
 

 

 
    createTable(); 
 
    createTable(); 
 
    createTable(); 
 
    //createTable(); call this a second time generate a second table but that seem to be grown together with the first one. 
 

 

 
}; 
 

 

 

 
function createTable(){ 
 

 
    var desc = "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur"; 
 
    var mytable = $('<table></table>').attr({ id: "paymentoptions_id" }); 
 
    var rows = 1; 
 
    var cols = 2; 
 
    for (var i = 0; i < rows; i++) { 
 
     var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable); 
 
     for (var j = 0; j < cols; j++) { 
 

 
      switch (j) { 
 
      case 0: 
 
       $('<td valign="top"></td>').append('<input type="checkbox">').appendTo(row); 
 
      break; 
 
      case 1: 
 
       $('<td valign="top"></td>').html("text1<br><span>" + desc + "</span>").appendTo(row); 
 
      break; 
 
     } 
 
    } 
 

 
} 
 

 
    $('#paymentTables').addClass("paymentoptions"); 
 

 
    mytable.appendTo(".paymentoptions");   
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<style> 
 
    table { 
 

 
    width: 300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
} 
 
    </style> 
 
<div id="paymentTables"> 
 
    </div>

источник

2016-06-26 16:03:02 Neelesh

Динамически создаваемые таблицы - выросли вместе

ответ

Смежные вопросы