动态新建span,input,select,TABLE 行列 -优快云博客

本文介绍了一种使用JavaScript动态创建HTML表格的方法，并演示了如何在表格单元格内插入不同类型的输入元素，如文本框、下拉菜单等。通过具体实例展示了如何通过函数实现单元格内容的定制化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
* 参数 :
* textValue: 文本值( 欲新建文本单元格文本值 )
* idName   : ID 值 ( 欲新建文本单元格ID )
*/
function createTextE(obj,idName,textValue){

var span=document.createElement("span");
span.setAttribute("id",idName);
span.appendChild(text1=document.createTextNode(textValue));
obj.appendChild(span);

}

/*
*    用于为特定单元格置入 INPUT类型 元素(新建)
* 参数 :
*    obj : 欲新建 INPUT 元素的宿主单元格对象
* textValue: 文本值( 欲新建文本单元格文本值 )
* idName   : ID 值 ( 欲新建文本单元格ID )
*/
function createInputE(obj,idName,inputType,inputValue){

var span=document.createElement("span");
span.setAttribute("id",idName);
var input=document.createElement("input");
input.setAttribute("type",inputType);
input.setAttribute("value",inputValue);

span.appendChild(input);
obj.appendChild(span);
}

/*
* 用于生成SELECT元素
*/

function createSelectE(obj,idName){

var span=document.createElement("span");
span.setAttribute("id",idName);
var select=document.createElement("select");    // 新建SELECT元素

var op=document.createElement("option");     // 新建OPTION (op)
op.setAttribute("value",0);         // 设置OPTION的 VALUE
op.appendChild(document.createTextNode("请选择---")); // 设置OPTION的 TEXT

select.appendChild(op);          // 为SELECT 新建一 OPTION(op)

span.appendChild(select);
obj.appendChild(span);
}

--------------------------------------------------------------------

实用例子

var index=0; 
function addRow(){
index++;
// 要增删行的TABLE (tbody)
t = document.getElementById("omain");

objRow = t.insertRow(0);     // 在TABLE中增加ROW,也即<TR>

objCell=objRow.insertCell(0);    // 在行中增加单元格 也即<TD>
objCell.setAttribute("id","goodsid");
createTextE(objCell,"goodsid",index); // 商品编号 goodsid


objCell=objRow.insertCell(1);    // 在行中增加单元格 也即<TD>
objCell.setAttribute("id","goodsname");
createSelectE(objCell,"goodsname");


objCell=objRow.insertCell(2);    // 在行中增加单元格 也即<TD>
objCell.setAttribute("id","price");
createTextE(objCell,"price","2.3（单价）");

objCell=objRow.insertCell(3);    // 在行中增加单元格 也即<TD>
objCell.setAttribute("id","count");
createInputE(objCell,"count","text",index); // 订购天数

objCell=objRow.insertCell(4);    // 在行中增加单元格 也即<TD>
objCell.setAttribute("id","dcount");
createInputE(objCell,"dcount","text",index); // 每天数量

objCell=objRow.insertCell(5);    // 在行中增加单元格 也即<TD>
objCell.setAttribute("id","totleprice");
createTextE(objCell,"totleprice","总价"+index); // 总价

objCell=objRow.insertCell(6);    // 在行中增加单元格 也即<TD>
objCell.setAttribute("id","send");
createTextE(objCell,"send","获赠"+index); //

objCell=objRow.insertCell(7);    // 在行中增加单元格 也即<TD>
objCell.setAttribute("id","bdel");
createInputE(objCell,"bdel","button","删除"+index);

}