使用JavaScript动态创建表格示例

6 浏览量更新于2024-08-30 收藏 58KB PDF 举报

"该资源提供了一个使用JavaScript动态创建表格的示例代码，通过函数addnode()实现在表格中插入新行。代码中还包含了事件监听功能，并使用了页面级变量selectRow来保存选中的行数据。此外，创建的表格单元格内包含了一些隐藏的input元素，用于存储额外的数据信息。" 在网页开发中，JavaScript是一种常用的语言，用于增加交互性和动态功能。在这个示例中，开发者创建了一个名为`addEvent`的函数，它实现了事件监听器的功能。这个函数兼容了两种事件绑定方式：对于IE浏览器，它使用`attachEvent`方法；对于非IE浏览器，它使用`addEventListener`方法。这样确保了代码在各种浏览器上的兼容性。接着，定义了一个`addnode`函数，用于在ID为"Dy_table"的表格中插入新行。首先，通过`document.getElementById`获取到表格对象，然后调用`insertRow`方法添加新的行`tr`。之后，通过`insertCell`方法在新行中插入多个单元格`cell`。这个函数创建了10个单元格，但实际应用中，可以根据需要调整单元格的数量。在每个新插入的行中，还创建了几个隐藏的`input`元素，这些元素通过`createElement`方法生成，并设置了`name`属性以便在后端或进一步的JavaScript处理中识别它们。例如，`hidden1`到`hidden5`分别用于存储不同的数据，如产品代码、型号、混合ID、行状态和单价等。其中，`hidden4`和`hidden5`的初始值分别为1和0，表示行的状态和单价的默认值。这个示例不仅展示了如何使用JavaScript动态创建表格，还涉及到事件处理、DOM操作以及数据的隐式存储，是学习和理解JavaScript在网页动态交互中应用的一个基础案例。开发者可以通过这个示例了解如何动态修改HTML元素，以及如何实现简单的数据管理，这对于构建交互性强的网页界面非常有用。

用用Js实现的动态增加表格示例自己写的实现的动态增加表格示例自己写的

代码如下:

function addEvent (o,c,h){

if(o.attachEvent){

o.attachEvent(‘on’+c,h);

}else{

o.addEventListener(c,h,false);

}

return true;}

var selectRow;//页面级js变量，用来存被选中的行，好在弹出窗口中对该行赋值

function addnode()

{

var table=document.getElementById(“Dy_table”);

var tr=table.insertRow();

var cell0=tr.insertCell();

var cell1=tr.insertCell();

var cell2=tr.insertCell();

var cell3=tr.insertCell();

var cell4=tr.insertCell();

var cell5=tr.insertCell();

var cell6=tr.insertCell();

var cell7=tr.insertCell();

var cell8=tr.insertCell();

var cell9=tr.insertCell();

var hidden1=document.createElement(“<input name=’Dy_hd_cpdm’ onpropertychange=’textChange(this)’ type=’hidden’ >”);

var hidden2=document.createElement(“<input name=’Dy_hd_sx’ type=’hidden’ >”);

var hidden3=document.createElement(“<input name=’Dy_hd_mxid’ type=’hidden’ >”);

var hidden4=document.createElement(“<input name=’Dy_hd_rowState’ type=’hidden’ value=’1′>”);//行状态

var hidden5=document.createElement(“<input name=’Dy_hd_dj’ type=’hidden’ value=’0′>”);//隐藏单价

var input1=document.createElement(“<Input type=’text’ ondblclick=’selectLj(this)’ style=’width:100px’ name=’Dy_text_ljh’ >”);

var input2=document.createElement(“<Input type=’text’ style=’width:100px’ name=’Dy_text_cpmc’ >”);

var input3=document.createElement(“<Input type=’text’ onKeyPress=’onlyNumberIn1(this)’ style=’width:40px’ value=’1′

name=’Dy_text_sl’ >”);

var input4=document.createElement(“<Input type=’text’ onKeyPress=’onlyNumberIn(this)’ style=’width:60px’

name=’Dy_text_dj’ >”);

var input5=document.createElement(“<Input type=’text’ style=’width:100px’ name=’Dy_text_sccj’ >”);

var input6=document.createElement(“<select name=’Dy_select_clly’ >”);

var input7=document.createElement(“<Input type=’text’ readonly=’true’ style=’width:40px’ name=’Dy_text_glf’ >”);

var input8=document.createElement(“<Input type=’text’ readonly=’true’ style=’width:60px’ name=’Dy_text_je’ >”);

var input9=document.createElement(“<Input type=’button’ name=’del’ value=’删除’ class=’input-button’

onclick=’delnode1(this)’ >”)

var oOption1=document.createElement(“option”);

var oOption2=document.createElement(“option”);

var oOption3=document.createElement(“option”);

var oOption4=document.createElement(“option”);

input6.options.add(oOption1);

input6.options.add(oOption2);

input6.options.add(oOption3);

input6.options.add(oOption4);

oOption1.innerText=”合同件”;

oOption1.value=”合同件”;

oOption2.innerText=”外购件”;

oOption2.value=”外购件”;

oOption3.innerText=”备件部”;

oOption3.value=”备件部”;

oOption4.innerText=”厂家供件”;

oOption4.value=”厂家供件”;

var rowIndex;

rowIndex = table.rows.length-2;

var rowCount = table.rows[0].cells[0].getElementsByTagName(“input”)[2].value;//用户可见的行数

cell0.innerText=parseInt(rowCount)+1;

table.rows[0].cells[0].getElementsByTagName(“input”)[2].value = parseInt(rowCount)+1;

hidden2.value = parseInt(table.rows[0].cells[0].getElementsByTagName(“input”)[1].value) + 1;

table.rows[0].cells[0].getElementsByTagName(“input”)[1].value=hidden2.value;

cell1.appendChild(input1);

cell1.appendChild(hidden1);//产品代码

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38662367

粉丝: 5
资源: 912

使用JavaScript动态创建表格示例

js动态添加删除表格

JS实现动态表格的添加，修改，删除功能(推荐)

JS实现可在线编辑的表格

动态Javascript表格实例

js实现动态增加和删除表格的行和列。实例

JavaScript实现动态生成表格

JavaScript与DOM组合动态创建表格实例

JavaScript动态操作表格实例(添加,删除行,列及单元格)

django js 实现表格动态标序号的实例代码

javascript动态创建表格及添加数据实例详解

最新资源