高分求如何实现直接可以填写的表格

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

vTd.innerHTML="<select><option>1</option><option>2</option></select>";如果要提交可以在脚本中加document.forms[0].submit();
<form action="提交页URL">
<div id="DivID"></div>
</form>

Answer 2

谢谢!
可以通过vTable.rows[x].cells[y].children[0].value得到x行y列的值,但是如何得到表格中x行y列下拉框选中的值以及下拉框被点中他所在的行列

Answer 3

<table id="tb"></table>
<input type="button" onclick="Add()" value="Add">
<input type="button" onclick="Get()" value="Get1">
<script>
var i=0; //全局变量.
function Add()
{
    row1 = tb.insertRow();
    cell1 = row1.insertCell();
    cell1.innerHTML = "<input type='text' name='txt" + i + "'>";
    cell2 = row1.insertCell();
    cell2.innerHTML = "<select name='sel" + i + "'><option value='1'>item1<option value='2'>item2</select>";
    cell3 = row1.insertCell();
    cell3.innerHTML = "<input type='text' name='txt2" + i + "'>";
}
function Get()
{
    //你的输入.
    alert(document.all.txt0.value);
    alert(document.all.sel0.options[document.all.sel0.options.selectedIndex].value);
    alert(document.all.txt20.value);
}
</script>

Answer 4

多行记录...<table id="tb"></table>
<input type="button" onclick="Add()" value="Add">
<input type="button" onclick="Get()" value="Get1">
<script>
var i=0; //全局变量.
function Add()
{
    row1 = tb.insertRow();
    cell1 = row1.insertCell();
    cell1.innerHTML = "<input type='text' name='txt" + i + "'>";
    cell2 = row1.insertCell();
    cell2.innerHTML = "<select name='sel" + i + "'><option value='1'>item1<option value='2'>item2</select>";
    cell3 = row1.insertCell();
    cell3.innerHTML = "<input type='text' name='txt2" + i + "'>";
    i++;
}
function Get()
{
    //你的输入,取得所有的值
    for(var j=0;j<i;j++)
    {
        alert("第"+(j+1)+"行记录:")
        alert(document.all["txt"+j].value);
alert(document.all["sel"+j].options[document.all["sel"+j].options.selectedIndex].value);
        alert(document.all["txt2"+j].value);
    }
}
</script>

Answer 5

谢谢两位,还有个问题就是如何得到被点击的下拉框的行和列;比如:
vTd.innerHTML="<select size='1'  onChange='changeTable(XXXX)'><option>1</option><option>2</option></select>";
我想在changetable()中得到修改的下拉框的行和列.

Answer 6

<table id="tb"></table>
<input type="button" onclick="Add()" value="Add">
<input type="button" onclick="Get()" value="Get1">
<script>
var i=0; //全局变量.
function Add()
{
    row1 = tb.insertRow();
    cell1 = row1.insertCell();
    cell1.innerHTML = "<input type='text' name='txt" + i + "'>";
    cell2 = row1.insertCell();
    cell2.innerHTML = "<select onChange='changeTable()' name='sel" + i + "'><option value='1'>item1<option value='2'>item2</select>";
    cell3 = row1.insertCell();
    cell3.innerHTML = "<input type='text' name='txt2" + i + "'>";
    i++;
}
function Get()
{
    //你的输入,取得所有的值
    for(var j=0;j<i;j++)
    {
        alert("第"+(j+1)+"行记录:")
        alert(document.all["txt"+j].value);
alert(document.all["sel"+j].options[document.all["sel"+j].options.selectedIndex].value);
        alert(document.all["txt2"+j].value);
    }
}
function changeTable()
{
    var e=window.event.srcElement.parentElement; //指向当前单元格;
    alert("行:"+(e.parentElement.rowIndex+1)+"\n列:"+(e.cellIndex+1));
}
</script>