Question

我几乎在jquery中动态创建几个单独的html表。但目前的问题是桌子像暹罗双胞胎一样长大。我在html文件中有一个名为 PaymentTables 的divblock，我在这个div中添加了一个创建的类选择器 paymentoptions 。所有这一切都是在一个函数中完成的，在它被调用后，创建一个表 - 正是我想要的。但是，如果我将这个函数调用两次，那么类对象似乎会变得更加强大。

如何解决这个问题，使它们分开？

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

调用一次

再次召集

答案是否有关闭标签丢失？但在哪里？

Answer 1

你有两个单独的表。边框使它们看起来像一个表，因为您将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

Answer 2

您的表格不是分开的，因为您已将css应用于包含所有表格的div。

所以要解决的问题是你可以做的不是在所有表的父div上应用css而是将它应用于各个表。

在你的css中用.paymentoptions替换table。

请参阅此示例。

＆＃13;

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

＆＃13;

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

＆＃13;

动态创建的表 - 一起成长

2 个答案: