用js怎么建表格?
发布网友
发布时间:2022-04-24 14:38
我来回答
共2个回答
懂视网
时间:2022-05-18 00:46
JS部分:
代码如下:
function next() {
//得到table对象
var oTable = document.getElementById("table1");
//插入tr
var oTr = oTable.insertRow();
//一行tr插入3个td
var oTd1 = oTr.insertCell();
var oTd2 = oTr.insertCell();
var oTd3 = oTr.insertCell();
//指定td内容
oTd1.innerHTML = "@process_time显示处理某个页面所需要的时间";
oTd2.innerHTML = "无需设置参数";
oTd3.innerHTML = "无需设置参数值";
}
JSP:
代码如下:
热心网友
时间:2022-05-17 21:54
<input type="button" value="创建一个新表格" onclick="createTable(800,8,5)" />
<script type="text/javascript">
function createTable(width,rows,cells)
{
//创建一个表格对象
var mytable=document.createElement("table");
mytable.cellSpacing="1px";
//创建一个表头对象
var mythead=document.createElement("thead");
for(a=0;a<1;a++)
{
var myrow=document.createElement("tr");
for(b=0;b<cells;b++)
{
var mytd=document.createElement("td");
mytd.innerHTML="表 头 " +(b+1);
mytd.style.cssText="text-align:center;";
myrow.appendChild(mytd);
}
mythead.appendChild(myrow);
}
//创建一个表体对象
var mytbody=document.createElement("tbody");
for(i=0;i<rows;i++)
{
var myrow=document.createElement("tr");
for(j=0;j<cells;j++)
{
var mytd=document.createElement("td");
mytd.style.backgroundColor="#fff";
mytd.innerHTML="第"+(i+1)+"行第"+(j+1)+"列";
myrow.appendChild(mytd);
}
mytbody.appendChild(myrow);
}
//创建一个表脚对象
var mytfoot=document.createElement("tfoot");
for(c=0;c<1;c++)
{
var myrow=document.createElement("tr");
for(d=0;d<1;d++)
{
var mytd=document.createElement("td");
mytd.innerHTML="脚"+(d+1);
mytd.style.cssText="text-align:center;";
mytd.colSpan="10";
myrow.appendChild(mytd);
}
mytfoot.appendChild(myrow);
}
//将表头追加到表格
mytable.appendChild(mythead)
//将表体追加到表格
mytable.appendChild(mytbody);
//将表脚追加到表格
mytable.appendChild(mytfoot);
//追加对象样式
mythead.style.cssText="background-color:#003; color:#FFF; font-size:14px; font-weight:600; width:"+width+"px;";
mytable.style.cssText="background-color:#999; border:0px; width:"+width+"px;";
mytfoot.style.cssText="background-color:#003; color:#FFF; font-size:14px; font-weight:600; width:"+width+"px;";
document.body.appendChild(mytable);
}
</script>