动态创建表 - 一起成长

我几乎在那里创建几个单独的html表在jQuery中动态地。但目前的问题是，桌子像连体双胞胎一样长大。我在HTML文件一divblock称为PaymentTables和这个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; 
}

调用一次

称为第二次

可能的答案是，有接近标签丢失？但是哪里？

来源

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

你的表没有分开，因为你已经申请了一个包含所有表的DIV的CSS。

因此，要解决的问题是，您可以做的不是将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

动态创建表 - 一起成长

回答

相关问题