动态新建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);

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值