0

I have this php function, which I want to convert to javascript function, but I don't know how to create a table in javascript.

I guess I have to have a container (DIV) to insert the table into with javascript.

Here is the php function simplified: (it counts height and width and repeats a 1px shadow to create a drop-shadow effect)

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

Please guide me, or even better, give me some code :)

Thanks

Improve this question
0

7 Answers 7

Reset to default
1

First, I'd see if you can do it with CSS, however your JavaScript might look something like the following, I have not verified this.

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;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Try this...

<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>
Improve this answer

Comments

0

Just prep the HTML string (just like you're doing in PHP) and assign it as the innerHTML attribute of whatever parent element you want -- a div is fine, of course, but it could be most anything, really. Your PHP code doesn't insert that HTML anywhere in particular -- you can write a Javascript function that returns the HTML string, and it will look very similar -- in either case, just having the function does nothing, you'll need to call it and put its resulting HTML somewhere!-)

Improve this answer

Comments

0

In the case you want to do more with your javascript table later, you might want to look into some kind of plugin for some javascript framework. One example of such a plugin would be http://www.datatables.net ...

Improve this answer

Comments

0

It's almost JavaScript.

Change the ".=" string concatenation to "+=".

The other thing you'll have to change: PHP can see the $variables inside the strings, but JavaScript can't.

Improve this answer

Comments

0 
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;
}
Improve this answer

Comments

0

You can consider as well a javascript template engine such as PURE

This allows you to separate cleanly the data and the HTML.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.