javascript ile bir tablo oluşturmak nasıl?

6 Cevap php

Ben javascript işlevi dönüştürmek istiyorsanız bu php fonksiyonu var, ama ben javascript bir tablo oluşturmak için nasıl bilmiyorum.

Ben javascript ile içine tablo eklemek için bir konteyner (DIV) olması gerekir sanırım.

İşte php function basitleştirilmiş: (bu yükseklik ve genişliğini sayar ve gölge efekti oluşturmak için bir 1px gölge tekrarlar)

function drpShadow($pic_url){

    $pic_display="<table border='0' style='display:inline;' cellspacing='0' cellpadding='0'><tr><td width='4px' height='$height'><img src='/SV/Graphics/drop_shadow_top_left_corner_4x4.jpg'><br>";
    for ($i=0; $i<($height-4); $i++){
    	$pic_display.="<img src='/SV/Graphics/drop_shadow_left_4x1.jpg'><br>";
    }
    $pic_display.="</td><td width='$width' height='$height'><img src='../temp_images/$pic_url'></td></tr><tr><td colspan='2' height='4px' width='($width+4)'><img src='/SV/Graphics/drop_shadow_left_bottom_corner_4x4.jpg'>";
    for ($i=0; $i<=($width-6); $i++){
    	$pic_display.="<img src='/SV/Graphics/drop_shadow_bottom_1x4.jpg'>";
    }
    $pic_display.="<img src='/SV/Graphics/drop_shadow_right_bottom_corner_4x4.jpg'></td></tr></table>";
    return $pic_display;
}

Bana rehberlik, hatta daha iyi, bana bazı kod verin :)

Teşekkürler

6 Cevap

CSS ile bunu eğer ilk, ben ancak JavaScript aşağıdaki gibi bir şey olabilir, görmek istiyorum, ben bu doğrulanmış değil.

function drpShadow(pic_url, width, height) {
    var i;
    var pic_display
        = "<table border='0' style='display:inline;' cellspacing='0' cellpadding='0'><tr><td width='4px' height='" + height + "'><img src='/SV/Graphics/drop_shadow_top_left_corner_4x4.jpg'><br />";

    for (i = 0; i < (height - 4); i++) {
        pic_display += "<img src='/SV/Graphics/drop_shadow_left_4x1.jpg'><br />";
    }

    pic_display +=
        "</td><td width='" + width +
              "' height='" + height +
              "'><img src='../temp_images/" + pic_url + "'></td></tr><tr><td colspan='2' height='4px' width='" + (width + 4) + "'><img src='/SV/Graphics/drop_shadow_left_bottom_corner_4x4.jpg'>";

    for (i = 0; i <= (width - 6); i++) {
        pic_display += "<img src='/SV/Graphics/drop_shadow_bottom_1x4.jpg'>";
    }

    pic_display
       += "<img src='/SV/Graphics/drop_shadow_right_bottom_corner_4x4.jpg'></td></tr></table>";
    return pic_display;
}

Bu deneyin ...

<html><head>
<script language =javascript >
function dynamictable()
{
var table1=document.createElement("table");
table1.id="tab1";
table1.border=1;
var tmpRow = null;
var tmpCell = null;
tmpRow=table1.insertRow();
tmpCell=tmpRow.insertCell();
tmpCell.innerText = "Row1 Cell1";
tmpCell=tmpRow.insertCell();
tmpCell.innerText = "Row1 Cell2";
tmpRow=table1.insertRow();
tmpCell=tmpRow.insertCell();
tmpCell.innerText = "Row2 Cell1";
tmpCell=tmpRow.insertCell();
tmpCell.innerText = "Row2 Cell2";
document.getElementById("div1").appendChild(table1);

}

</script></head>
<body onload="dynamictable()">
<div id="div1"></div>
</body>
</html>

Sadece HTML dize hazırlık (PHP yaptığınızı gibi) ve istediğiniz ne olursa olsun, ana elemanı innerHTML nitelik olarak atayın - Bir div Elbette, gayet iyi, ama gerçekten, çok şey olabilir. PHP kodu her yerde özellikle bu HTML eklemek değil - HTML dizesini döndüren bir JavaScript işlevi yazabilirsiniz, ve çok benzer olacak - her iki durumda da, sadece işlev hiçbir şey yapmaz sahip, yapmanız gerekir diyoruz ve put onun sonuçlanan HTML some burada -!)

Eğer daha sonra javascript tablo ile daha yapmak istiyorum durumda, bazı javascript framework için eklenti çeşit içine bakmak isteyebilirsiniz. Böyle bir eklentinin bir örnek olacaktır http://www.datatables.net ...

Neredeyse JavaScript bulunuyor.

". =" String birleştirme için "+ =" olarak değiştirin.

Değiştirmek gerekecek diğer şey: PHP dizge içinde $ değişkenleri görebilirsiniz, ancak JavaScript yapamam.

Siz de böyle PURE gibi bir javascript şablon motoru düşünebilirsiniz

Bu temiz veri ve HTML ayrı sağlar.

etiketler