Question

我有这个php函数，我想将其转换为javascript函数，但我不知道如何在javascript中创建表。

我想我必须有一个容器（DIV）来将表插入到javascript中。

这是简化的php函数:(它计算高度和宽度并重复1px阴影以创建阴影效果）

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;
}

请指导我，或者更好，给我一些代码：）

由于

Answer 1

试试这个......

<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>

Answer 2

首先，我会看看您是否可以使用CSS，但是您的JavaScript可能看起来像以下内容，我还没有验证过。

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;
}

Answer 3

准备HTML字符串（就像你在PHP中做的那样）并将其指定为你想要的任何父元素的innerHTML属性 - 当然div是好的，但是它可能是最重要的，真的。你的PHP代码没有特别在任何地方插入HTML - 你可以编写一个返回HTML字符串的Javascript函数，它看起来非常相似 - 在任何一种情况下，只是让函数什么都不做，你需要称之为将生成的HTML 一些放在哪里！ - ）

Answer 4

如果你想在以后的javascript表中做更多的事情，你可能想要查看一些javascript框架的插件。这种插件的一个例子是http://www.datatables.net ......

Answer 5

这几乎是JavaScript。

将“。=”字符串连接更改为“+ =”。

你需要改变的另一件事：PHP可以看到字符串中的$变量，但JavaScript不能。

Answer 6

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;
}

Answer 7

您也可以考虑使用PURE

等javascript模板引擎

这允许您干净地分离数据和HTML。

如何用javascript创建表？

7 个答案: