Php 如何使用javascript创建表？_Php_Javascript_Html

Php 如何使用javascript创建表？

php javascript html

Php 如何使用javascript创建表？,php,javascript,html,Php,Javascript,Html,我有一个php函数，我想把它转换成javascript函数，但我不知道如何用javascript创建一个表我想我必须有一个容器（DIV）才能用javascript将表插入其中下面是简化的php函数：（它计算高度和宽度，并重复1px阴影以创建阴影效果）函数drpShadow（$pic_url）{ $pic_display=“”；对于（$i=0；$i只需准备HTML字符串（就像您在PHP中所做的那样）并将其指定为您想要的任何父元素的innerHTML属性--div当然可以，但实际上它可以是几

我有一个php函数，我想把它转换成javascript函数，但我不知道如何用javascript创建一个表

我想我必须有一个容器（DIV）才能用javascript将表插入其中

下面是简化的php函数：（它计算高度和宽度，并重复1px阴影以创建阴影效果）

函数drpShadow（$pic_url）{
$pic_display=“
”；
对于（$i=0；$i只需准备HTML字符串（就像您在PHP中所做的那样）并将其指定为您想要的任何父元素的innerHTML
属性--div
当然可以，但实际上它可以是几乎任何东西。您的PHP代码不会在任何地方插入HTML，您可以编写一个Javascript函数返回HTML字符串，并且它看起来非常类似--在任何一个ca中se，只需让函数执行任何操作，您就需要调用它并将其结果HTMLsomewhere！-）
如果您以后想对javascript表做更多的工作，您可能需要研究一些javascript框架的插件。这种插件的一个例子是……
它几乎是javascript
将“=”字符串连接更改为“+=”
另一件您必须更改的事情是：PHP可以看到字符串中的$variables，但JavaScript不能看到。
函数drpShadow（picu url）
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;
}

{    
pic_display=“
”；
对于（i=0；i试试这个
<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>


函数dynamictable（）
{
var table1=document.createElement（“表”）；
表1.id=“tab1”；
表1.边界=1；
var tmpRow=null；
var tmpCell=null；
tmpRow=table1.insertRow（）；
tmpCell=tmpRow.insertCell（）；
tmpCell.innerText=“行1单元格1”；
tmpCell=tmpRow.insertCell（）；
tmpCell.innerText=“行1单元格2”；
tmpRow=table1.insertRow（）；
tmpCell=tmpRow.insertCell（）；
tmpCell.innerText=“第2行单元格1”；
tmpCell=tmpRow.insertCell（）；
tmpCell.innerText=“第2行单元格2”；
文件.getElementById（“div1”）.appendChild（表1）；
}
首先，我想看看你是否可以用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;
}

函数drpShadow（图片url、宽度、高度）{
var i；
可变电压picu显示器
=“
”；
对于（i=0；i<（高度-4）；i++）{
PICU显示+=“
”；
}
picu显示器+=
"";
对于（i＝0；i），您还可以考虑像这样的JavaScript模板引擎。
这允许您将数据和HTML完全分离
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;
}