Question

I have this long code about a table width some various content.
It is also available at http://jsfiddle.net/Rtv7u/8/

I would like to rewrite it in jquery in the hope that it will work nice in IE and will be shorter and clearer.

I don’t ask you to “translate” the full code, but give instructions or reference how to do that. (Or example about the beginning)

Thanks.

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

With jquery, you can create elements using their HTML code. For example :

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

So, you can simply do that :

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