如何用javascrip实现动态的往html画表格

Question

<script>
function createTable()
{
var vTable=document.createElement("table");
vTable.cellPadding="0";
vTable.cellSpacing="0";
vTable.border="1";
vTable.color="#000000";
vTable.borderColorDark="#000000";
vTable.borderColorLight="#FFFFFF";
for(kIndex=0;kIndex<5;kIndex++)
{
var vTr=vTable.insertRow(kIndex);
for(iIndex=0;iIndex<5;iIndex++)
{
vTd=vTr.insertCell(iIndex);
vTd.innerHTML="<input type=text style='border:0px solid'>";
}
}
DivID.appendChild(vTable);
}
function mouseDown()
{
if(event.button==2)
{
if(event.srcElement.tagName=="INPUT")
{
window.confirm(event.srcElement.value);
}
}
}
document.onmousedown=mouseDown;
document.captureEvents(Event.MOUSEDOWN);
</script>
<input type=button value="创建表格" onclick="createTable();">
<div id="DivID"></div>

Answer 1

demo.htm<table id="tb">
<tr><td>NO</td><td>Name</td></tr>
<tr><td>1</td><td>aaa</td></tr>
<tr><td>2</td><td>bbb</td></tr>
</table>
<input type="button" onclick="window.open('in.htm')" value="Open">in.htm<input type="text" name="sno">
<input type="text" name="sname">
<Input type="button" onclick="AddTr(document.all.sno.value,document.all.sname.value)"
value="AddTr">
<script>
function AddTr(no,name)
{
    var tb = window.opener.tb;
    var row1 = tb.insertRow();
    var cell1 = row1.insertCell();
    cell1.innerText = no;
    var cell2 = row1.insertCell();
    cell2.innerText = name;
}
</script>

Answer 2

顺便我也问个问题，添加上之后如果想减少表格怎么实现？
我做的是增加input框，但是不知道怎么减少

Answer 3

对了，我也想问个问题。
你这里
row1.insertCell();
我是否可以updateCell呢，比如把原来的1 aaa,换成1 AAA

Answer 4

vTd.innerHTML="<input type=text style='border:0px solid'>";

Answer 5

没有updateCell的方法.不过可以这样子.demo.htm<table id="tb">
<tr><td>NO</td><td>Name</td></tr>
<tr><td>1</td><td>aaa</td></tr>
<tr><td>2</td><td>bbb</td></tr>
</table>
<input type="button" onclick="window.open('in.htm')" value="Open">in.htm<input type="text" name="sno">
<input type="text" name="sname">
<Input type="button" onclick="AddTr(document.all.sno.value,document.all.sname.value)"
value="AddTr">
<br>
修改:
第<input type="text" name="irow">行:
<Input type="button" onclick="UpdateTr(document.all.irow.value,document.all.sno.value,document.all.sname.value)"
value="UpdateTr">
<script>
function AddTr(no,name)
{
    var tb = window.opener.tb;
    var row1 = tb.insertRow();
    var cell1 = row1.insertCell();
    cell1.innerText = no;
    var cell2 = row1.insertCell();
    cell2.innerText = name;
}
function UpdateTr(row,no,name)
{
    iRow = parseInt(row);
    var tb = window.opener.tb;
    tb.rows(iRow).cells(0).innerText = no;
    tb.rows(iRow).cells(1).innerText = name;
}
</script>

Answer 6

var otr=olistObj.insertRow();
var otd=otr.insertCell();
otd.innerText= list(i).text;
otd.attachEvent('onmouseover', Hilite);
otd.attachEvent('onmouseout', Restore);
otd.attachEvent('ondblclick', showSelect);