作成テーブルdom幅jquery

Question

私はこれを持っています長いコード表については多少の内容があります。 また、から入手可能ですhttp://jsfiddle.net/Rtv7u/8/

私はそれがIEでうまくいくようにjqueryで書き直したいと思っています。

私はあなたに完全なコードを "翻訳"することを求めませんが、指示を出したり、その方法を参考にしたりします。 （例についての最初の例）

ありがとうございました。

var table = document.createElement('table'); 
    table.width = 625; 
    table.className="feltoltesek_tabla_szegely"; 
    var tr1 = document.createElement('tr'); 
     var td1 = document.createElement('td'); 
     td1.width = 20; 
     td1.align="center"; 
     td1.height = 32; 
     td1.rowSpan=3; 
      var chb = document.createElement('input'); 
      chb.type="checkbox"; 
     var td2 = document.createElement('td'); 
     td2.rowSpan = 3; 
     td2.width = 20; 
     td2.align="center"; 
      var kuka = document.createElement('div'); 
      kuka.className = "spr_kuka"; 
     var td3 = document.createElement('td'); 
     td3.rowSpan = 3; 
     td3.width = 20; 
     td3.align="center"; 
      var dupl = document.createElement('div'); 
      dupl.className = "spr_dupl"; 
     var td4 = document.createElement('td'); 
     td4.rowSpan = 3; 
     td4.width = 135; 
     td4.align = "center"; 
     $('<img/>').attr('src',"http://jsfiddle.net/img/logo.png") 
      .css({display:'none',width:76}) 
      .appendTo(td4) 
      .load(function(){ 
      $(this).fadeIn(1000); }); 
     var td5 = document.createElement('td'); 
      td5.innerHTML = "file.name"; 
     var td6 = document.createElement('td'); 
     td6.width = 100; 
      var meret= document.createElement('select'); 
      meret.className = "sel_sm"; 
     var td7 = document.createElement('td'); 
     td7.width = 80; 
      var db = document.createElement('input'); 
      db.className = "box_sm"; 
      db.size=3; 
      db.type="text"; 
      var db_span = document.createElement('span'); 
      db_span.innerHTML = "&nbsp;*"; 
    var tr2 = document.createElement('tr'); 
     tr2.height = 21; 
     var tdu1 = document.createElement('td'); 
     var tdu2 = document.createElement('td'); 
     var tdu3 = document.createElement('td'); 
     var tdu4 = document.createElement('td'); 
     var tdu5 = document.createElement('td'); 
     var tdu6 = document.createElement('td'); 
     var tdu7 = document.createElement('td'); 
     var tdu8 = document.createElement('td');    
     var keparany = document.createElement('td'); 
     keparany.colSpan=3; 
     keparany.innerHTML = "row2"; 
     var felbontas = document.createElement('td'); 
     felbontas.colSpan=3; 
     felbontas.innerHTML = "row3"; 
    var tr3 = document.createElement('tr'); 
     tr3.height = 21; 
    td1.appendChild(chb); 
    td2.appendChild(kuka); 
    td3.appendChild(dupl); 
    td6.appendChild(meret); 
    td7.appendChild(db);   
    td7.appendChild(db_span);  
    tr1.appendChild(td1); 
    tr1.appendChild(td2); 
    tr1.appendChild(td3); 
    tr1.appendChild(td4); 
    tr1.appendChild(td5); 
    tr1.appendChild(td6); 
    tr1.appendChild(td7); 
    tr2.appendChild(keparany); 
    tr3.appendChild(felbontas); 
    table.appendChild(tr1); 
    table.appendChild(tr2); 
    table.appendChild(tr3); 
    var e2 = document.getElementById('id'); 
    e2.appendChild(table); 

Answer 1

jqueryを使用すると、HTMLコードを使用して要素を作成できます。たとえば：だから

jQuery("<p>hello <span style='color:green'>world !</span>"); 

、あなたは、単にそれを行うことができます。

http://jsfiddle.net/Rtv7u/9/

Answer 2

を使用できるさまざまなテクニックがいくつかあります。ここでやっているように、各要素を1つずつ追加して、テーブルを構築してDOMに追加することができます。また、HTMLの文字列としてテーブル全体を構築し、一気に追加します。なぜあなたが後者をする必要があるのか​​想像するのは難しいです。なぜなら、レスポンスで文字列としてテーブルを手作業で作るのと同じくらい簡単にできますが、これはまさにこのコードの代わりになるでしょう。

var tbl = '<table style="width: 625;" class="foo"><tr><td rowspan="3" style="width: 20; ...'; 
$(tbl).appendTo('#id'); 

または

var $row1 = $('<tr></tr>').append('<td rowspan="3" style="width: 20;...">content</td>') 
          .append(... more columns); 

$('<table></table>').css({ width: 625 }).addClass('foo') 
        .append($row1) 
        .append($row2) 
        .appendTo('#id'); 

Answer 3

あなたは、コードを入れたいタグを選択する必要があり、その後、あなただけの機能のHTML

$("#id").html('<table width="625" class="feltoltesek_tabla_szegely"><tr><td width="20" align="center" height="32" rowspan="3"><input type="checkbox"></td><td rowspan="3" width="20" align="center"><div class="spr_kuka"></div></td><td rowspan="3" width="20" align="center"><div class="spr_dupl"></div></td><td rowspan="3" width="135" align="center"><img src="http://jsfiddle.net/img/logo.png" style="width: 76px; "></td><td>file.name</td><td width="100"><select class="sel_sm"></select></td><td width="80"><input class="box_sm" size="3" type="text"><span>&nbsp;*</span></td></tr><tr><td colspan="3">row2</td></tr><tr><td colspan="3">row3</td></tr></table>'); 

でのHTML文字列を与える必要がありここの例：http://jsfiddle.net/Rtv7u/16/ .html（）のAPIはこちらです：http://api.jquery.com/html/