動的に作成されたテーブル - 一緒に栽培

jqueryで動的にいくつかの個別のhtmlテーブルを作成しています。しかし、現時点での問題は、テーブルが一緒にsiamese双子のように成長しているということです。 PaymentTablesというdivファイルがあります。このdivには、作成されたクラスセレクタpaymentoptionsが追加されています。これは、呼び出された後にテーブルを作成する機能で行われます。しかし、私がこの機能を2回呼び出すと、classobjectsは大きく成長するようです。動的に作成されたテーブル - 一緒に栽培

この問題をどうやって分けることができますか？回呼び出さ

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

2つのテーブルがあります。あなたが周囲の<div>にpaymentoptionsクラスを配置しているため、境界線は1つのテーブルのように見えます。

あなたが生成しているHTMLには別の問題があります。生成されたテーブルにidを配置しています。生成されたすべてのテーブルは同じidを持ちますが、idの値は一意でなければなりません。このライン

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

と変更：これに

mytable.appendTo(".paymentoptions");

：

mytable.appendTo("#paymentTables");

をこれに

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

：

おそらくあなたは、この行を変更する必要があります

そして、この行削除：これは、各テーブルが同じpaymentoptionsクラスを持っていながら、それはこれだけ周囲のコンテナ<div>は、ユニークなidを持っています

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

を。

jsfiddle

出典

2016-06-26 16:02:51

あなたはすべてのテーブルが含まれているのdivのCSSを適用しているので、あなたのテーブルが分離されていません。

したがって、すべてのテーブルの親divにCSSを適用するのではなく、個々のテーブルに適用することができます。

あなたの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

動的に作成されたテーブル - 一緒に栽培

答えて

関連する問題