how to create a table with javascript?
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(开发者_JAVA百科$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
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;
}
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>
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!-)
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 ...
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.
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;
}
You can consider as well a javascript template engine such as PURE
This allows you to separate cleanly the data and the HTML.
加载中,请稍侯......
精彩评论