动态增加表格问题

m_leaner 2003-04-08 05:21:21
大家好，我有个表个
t1
///////////////////
a1 a2 a3 是表头
我想在页面加载时动态在表了添加行，我该怎么写啊。
...全文
45 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
fason 2003-04-08
  • 打赏
  • 举报
 回复
<body onload="addrow()">
<SCRIPT LANGUAGE=javascript>
function addrow() {
var t=document.getElementById("t1")
for(i=0;i<10;i++){
var tem=t.insertRow()
for(j=0;j<t.rows[0].cells.length;j++)tem.insertCell().innerText='fason'+i+j
}
}
</script>

<table width="100%" border="1" align="center" cellpadding="3" cellspacing="1" bordercolor="#000000" class="tableprintable" id="t1">
<thead><tr><td>fason1</td><td>fason2</td><td>fason3</td></tr> </thead>
</table>
m_leaner 2003-04-08
  • 打赏
  • 举报
 回复
我的表头是静态的，
fuction add()
{
t.insertRow();
}
<table id="t">
<tr>
<td>a1</td>
<td>a1</td>
<td>a1</td>

</tr>
/////这里怎么写
</table>
m_leaner 2003-04-08
  • 打赏
  • 举报
 回复
我不想按任何按钮，只想在我的表头下面在网页加载的时候写入几行数据，格式同表头
fason 2003-04-08
  • 打赏
  • 举报
 回复
<SCRIPT LANGUAGE=javascript>
function delCol() {
try {
var Elm = event.srcElement;
while(Elm && Elm.tagName != "TR") {
Elm = Elm.parentElement;
}
if(Elm.parentElement.rows.length <= 1) {
alert("无法删除！");
return;
}
Elm.parentElement.deleteRow(Elm.rowIndex-1);
} catch(e) {
alert("Err 5001:\r\n" + e);
}
}
function addCol(id) {
try {
var oTable = document.getElementById(id);
if(oTable.tagName != "TABLE")
alert("Err 5002");
var oList = oTable.children;
var oTBODY;
for(var i=0;i<oList.length;i++) {
if(oList[i].tagName == "TBODY") {
oTBODY = oList[i];
break;
}
}
var oTR = oTBODY.lastChild;
var newTR = oTR.cloneNode(true);
addId(newTR);
oTBODY.insertAdjacentElement("beforeEnd",newTR);
} catch(e) {
alert("Err 5002:\r\n" + e);
}
}
function addId(node) {
try {
if(!node.hasChildNodes()) {
var prefix = node.getAttribute("id").split("_")[0];
var postfix = node.getAttribute("id").split("_")[1];
postfix = parseInt(postfix) + 1;
node.setAttribute("id",prefix + "_" + postfix);
node.setAttribute("value","");
return;
}
} catch(e) {}
try {
var oList = node.childNodes;
for(var i=0;i<oList.length;i++) {
addId(oList[i]);
}
} catch(e) {
alert("Err 5003:\r\n" + e);
}
}
</SCRIPT>
<table width="100%" border="1" align="center" cellpadding="3" cellspacing="1" bordercolor="#000000" class="tableprintable" id="t1">
<thead><tr><td>fason1</td><td>fason2</td><td>fason3</td></tr></thead>
<tr align="center" class="tdbg0">
<td class="tdbg0" colspan=2>1</td><td><button class="button" onClick="delCol()">
删除</button></td>
</tr>
</table>
<button class="button" onClick="addCol('t1')">添加一行</button>
</td>
</tr>
</table>
awaysrain 2003-04-08
  • 打赏
  • 举报
 回复
你在body的onload事件加上插入行的函数就行了
awaysrain 2003-04-08
  • 打赏
  • 举报
 回复

<html>
<head>
<title> 动态表格实例</title>
<style>
.curr {background-color:blue;color:white}
</style>
<script language="JavaScript">
var curRow = null;

function setrow(){
var e = event.srcElement;
if(e.tagName=="TD" && tab1.contains(e)){
curRow = e.parentNode;
updateRow();
}
else curRow=null;
}

function doEdit(bSave){
if(curRow==null) return;
var i;
for(var i=0; i<curRow.cells.length;i++){
if(bSave)
curRow.cells[i].innerText = document.getElementsByName("txt")[i].value;
else
document.getElementsByName("txt")[i].value = curRow.cells[i].innerText;
}
}

function doInsert(){
var r=tab1.insertRow();
for(var i=0; i<tab1.rows[0].cells.length;i++){
r.insertCell(i).innerText = document.getElementsByName("txt")[i].value;
}
curRow = r;
updateRow();
}
function doDelete(){
if(tab1.rows.length<2 || !curRow) return;
curRow.removeNode(true);
curRow=null;
updateRow();
}
function updateRow(){
var rows=tab1.rows;
for(var i in rows)
rows[i].className = (curRow==rows[i]) ? "curr" : ""
}
</script>
</head>
<body>
动态表格实例<br/>
<table id=tab1 border=1 width=500 onclick="setrow()">
<tr><td>00</td><td>01</td><td>02</td></tr>
<tr><td>10</td><td>11</td><td>12</td></tr>
<tr><td>20</td><td>21</td><td>22</td></tr>
<tr><td>30</td><td>31</td><td>32</td></tr>
</table>
<input name=txt><input name=txt><input name=txt><br/>
<button onclick="doEdit(false)">Edit</button>
<button onclick="doEdit(true)">Save</button>
<button onclick="doInsert()">Insert</button>
<button onclick="doDelete()">delete</button>
</body>
</html>
awaysrain 2003-04-08
  • 打赏
  • 举报
 回复
<head><STYLE type=text/css>BODY {
BACKGROUND: white; COLOR: black; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableData {
BACKGROUND: white; BORDER-BOTTOM: white 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: white 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataSel {
BACKGROUND: #6090d0; BORDER-BOTTOM: #6090d0 1px dashed; BORDER-LEFT: #6090d0 1px dashed; BORDER-RIGHT: #6090d0 1px dashed; BORDER-TOP: #6090d0 1px dashed; COLOR: white; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataHit {
BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataOver {
BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.controlPanel {
BACKGROUND: silver; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.controlPanelMouseOver {
BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.delMouseOver {
BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.scheduleButtonVisible {
BACKGROUND: silver; BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: gray 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: webdings; FONT-SIZE: 12px
}
</STYLE>
<SCRIPT language=javascript>
var modified=0
var currentLine=-1
var line=-1
function lightOn(ln)
{
if (ln==null)
ln=parseInt(event.srcElement.ln,10)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==ln)
line=i
cln=currentLine
oldLine=-1
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==cln)
oldLine=i
if (line==oldLine)
return
//if td <0 then only clear all title
if (line>0)
{
document.all.tdt[line].className="tableDataHit";
document.ecform("medication")[line].className="tableDataHit";
if (oldLine>0)
{
document.all.tdt[oldLine].className="tableData";
document.ecform("medication")[oldLine].className="tableData";
}
currentLine=ln
}
}

function move(direc){
//向下移动direc行，并将移动到的行高亮度显示

if(line+direc<1 || (line+direc)>document.all.tdt.length-1) return;
var temp=document.ecform.medication[line].value;
document.ecform.medication[line].value=document.ecform.medication[line+direc].value;
document.ecform.medication[line+direc].value=temp

line+=direc;
lightOn(line);
}
function delIt()
{
line=parseInt(event.srcElement.ln,10)

if (line>0)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==line)
{
if ( document.ecform.medication[i].value.length>0 )
if (!confirm("Are you sure you want to delete this record?"))
return
PLList.deleteRow(i)
}
}
function modifiedIt(field)
{
// field.value=checkText(field.value);
modified=1
line=parseInt(event.srcElement.ln,10)

if (line>0)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==line)
document.ecform.edit[i].value=1
}
function newHospitalVisit()
{
newRow=PLList.insertRow(PLList.rows.length);
newRow.id="tdt";
newRow.ln=allCount;
newRow.bgColor="#e0e0e0";
newRow.className="tableData";
newRow.onclick=lightOn;

c1=newRow.insertCell(0);
c1.id="delItem";
c1.ln=allCount;
c1.className="scheduleButtonVisible";
c1.onclick=delIt;
c1.onmouseover=mouseOver;
c1.onmouseout=mouseOut;
c1.innerHTML="<input type=hidden name=PLID value=0><input type='hidden' name='edit' value=0>";
c2=newRow.insertCell(1);
c2.ln=allCount;
c2.innerHTML="<input type=text size=58 maxlength=100 name=medication ln="+allCount+" class=tableData onkeyup='modifiedIt()'>"
allCount++
}
function mouseOver()
{
event.srcElement.className="delMouseOver"
}
function mouseOut()
{
event.srcElement.className="scheduleButtonVisible"
}
</SCRIPT>
</head><body><FORM method=post name=ecform>
<META content="MSHTML 5.00.2920.0" name=GENERATOR>
<DIV id=div1
style="LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 658px">
<TABLE bgColor=silver border=2 borderColorDark=gray borderColorLight=silver
cellPadding=2 cellSpacing=1 cols=1 id=PLList rules=rows width="100%">
<TBODY>
<TR bgColor=#0a6846 id=tdt>
<TH width=80><FONT color=white>删除
<INPUT name=PLID type=hidden>
<INPUT
name=edit type=hidden>
</FONT></TH>
<TH width="559">
<INPUT name=medication type=hidden>
<FONT
color=white>变化表格 </font>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="1">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="1" width="80"><FONT size=2>
<INPUT name=PLID type=hidden
value=54 ln="1">
<INPUT name=edit type=hidden value=0>
</FONT></TD>
<TD ln="1" width="559">
<INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 value="like it?" ln="1">
</TD>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="2">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="2" width="80"><FONT size=2>
<INPUT name=PLID type=hidden
value=55 ln="2">
<INPUT name=edit type=hidden value=0>
</FONT></TD>
<TD ln="2" width="559">
<INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 value="how about it?" ln="2">
</TD>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="3">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="3" width="80"><FONT size=2>
<INPUT name=PLID type=hidden
value=56 ln="3">
<INPUT name=edit type=hidden value=0>
</FONT></TD>
<TD ln="3" width="559">
<INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 ln="3">
</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT>
allCount=4
</SCRIPT>


<TABLE align=center border=1 borderColorDark=white borderColorLight=gray
cellPadding=1 cellSpacing=1 class=controlPanel cols=4 rules=all width="100%"
nowrap>
<TBODY>
<TR>
<TD align=middle class=controlPanel onclick=newHospitalVisit()
onmouseout="this.className='controlPanel'"
onmouseover="this.className='controlPanelMouseOver'"><font size="2" face="仿宋_GB2312, 楷体_GB2312">添加一行</font></TD>
</TR>
<TR>
<TD align=middle class=controlPanel onclick=move(-1)
onmouseout="this.className='controlPanel'"
onmouseover="this.className='controlPanelMouseOver'"><font size="2" face="仿宋_GB2312, 楷体_GB2312">向上移动</font></TD>
</TR>
<TR>
<TD align=middle class=controlPanel onclick=move(1)
onmouseout="this.className='controlPanel'"
onmouseover="this.className='controlPanelMouseOver'"><font size="2" face="仿宋_GB2312, 楷体_GB2312">向下移动</font></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</FORM></body><p><b>Collected by 38JS.COM</b></p>
layui表格动态添加|layui表格可编辑
layui表格动态添加|layui表格可编辑动态添加
在word中动态增加表格并写入数据
在word中根据表头动态增加表格行，然后把数据中数据中写入表格中。
Excel wps 小白偷懒系列（电子表格制作 vlookup函数的使用方法）
Excel小白偷懒系列课程 ，本套教程的特点，在工作中你遇到什么样的问题，我快速的带你解决这个问题，最后在解决这个问题中用到了哪些知识点，我们在拓展或者关联一下。通过本套教程，您将学会 快速绘制表格，并完成打印输出，动态表格在工作中的妙用，窗格的冻结，制作动态考勤表，学会vlookup函数的操作，掌握vlookup的常范的错误，会嵌套vlookup函数返回多列的值，了解数据透视表
html动态删除添加表格
html动态删除添加表格
javascript动态操作表格
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章