很多时候我们需要在页面上动态添加html代码，然后客户在动态添加的文本元素里面加入数据，为了以后写作方便特总结一个IE和Firefox通用版本的脚本，如下：
<html>
<head>
<script language="javascript">
//窗口表格增加一行
function addNewRow(){
var tabObj=document.getElementById("myTab");//获取添加数据的表格
var rowsNum = tabObj.rows.length; //获取当前行数
var colsNum=tabObj.rows[rowsNum-1].cells.length;//获取行的列数
var myNewRow = tabObj.insertRow(rowsNum);//插入新行
var newTdObj1=myNewRow.insertCell(0);
newTdObj1.innerHTML="<input type='checkbox' name='chkArr' id='chkArr'"+rowsNum+" style='width:20px' />";
var newTdObj2=myNewRow.insertCell(1);
newTdObj2.innerHTML="<input type='text' name='nodecode' id='nodecode'"+rowsNum+" style='width:40px' value='"+rowsNum+"'/>";
var newTdObj3=myNewRow.insertCell(2);
newTdObj3.innerHTML="<input type='text' name='nodename' id='nodename'"+rowsNum+" style='width:120px' />";
var newTdObj4=myNewRow.insertCell(3);
newTdObj4.innerHTML="<input type='text' name='nodeper' id='nodeper'"+rowsNum+" style='width:60px' />";
}
//窗口表格删除一行
function removeRow(){
var chkObj=document.getElementsByName("chkArr");
var tabObj=document.getElementById("myTab");
for(var k=0;k<chkObj.length;k++){
if(chkObj[k].checked){
tabObj.deleteRow(k+1);
k=-1;
}
}
}
</script>
</head>
<body>
<input type="button" name="xx" onclick="addNewRow();" value="增加一行" />
<input type="button" name="yy" onclick="removeRow();" value="删除一行" />
<table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">
<tr>
<td width="40px" class="top-bt liebiao-c" align="center" >操作</td>
<td width="40px" class="top-bt liebiao-c" align="center" >序号</td>
<td class="top-bt liebiao-c" align="center" >节点名称</td>
<td width="80px" class="top-bt liebiao-c" align="center" >节点比例</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
在网页开发中，动态添加HTML控件是一种常见的需求，它允许开发者在用户交互时或程序运行过程中创建或移除页面元素。这样的技术尤其在ASP.NET框架中显得尤为重要，因为这可以实现更灵活、响应式的用户体验。本文将...
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。 如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的...
本文将深入探讨如何通过JavaScript脚本实现动态添加HTML标签，这对于创建响应式、交互性强的网页至关重要。 首先，理解HTML标签是构建网页结构的基础。HTML元素由开始标签、内容（可选）和结束标签组成，例如 `...
动态添加HTML组件 fileupload textbox.html
我觉得挺好用，可以试下！我觉得挺好用，可以试下！我觉得挺好用，可以试下！我觉得挺好用，可以试下！
在JavaScript中，动态添加HTML标记是一项常见的任务，特别是在构建交互式网页时。本文将深入讲解如何使用`createElement()`方法来创建新的HTML元素，并将其插入到文档中。`createElement()`是JavaScript DOM（文档...
例如，使用`PlaceHolder`控件作为容器，然后在服务器端代码中动态添加`TextBox`控件。 4. **C#**：C#是ASP.NET框架常用的编程语言。在服务器端，可以创建`System.Web.UI.WebControls.TextBox`对象并添加到页面上。...
在页面加载完成时候 ‘.add_project’ 元素是可以触发click时间的，当动态添加 ‘.add_project’ 时候，新添加的元素却触发不了click事件，类似下面的写法： $(".add_project").on('click', function(){ alert(...
在网页开发中，HTML（HyperText Markup Language）是用于创建网页结构的基础语言，而动态添加行功能通常是数据展示或用户交互的重要部分。本示例利用jQuery库来实现这一功能，jQuery是一个高效、简洁且功能丰富的...
在JavaScript中，动态添加HTML元素和属性是网页交互和动态更新页面内容的关键技术。下面将详细解释这个简单实例中的知识点。 首先，我们看到一个名为`test`的函数，这个函数的作用是动态创建一个新的HTML元素。在这...
JS 动态添加删除 HTML 元素实例 动态添加删除 HTML 元素是前端开发中常见的需求之一，今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先，让我们了解一下 HTML 文档对象模型（DOM），它...
2. **动态添加HTML**： - **innerHTML**：可以通过修改元素的`innerHTML`属性来动态地改变其内容。例如，`document.getElementById('container').innerHTML = '<p>Hello World!</p>'`。 - **...
实现自动添加table行，增删改查功能统一完成实现，统一提交
html动态删除添加表格
在这个小练习中，我们将聚焦于一个具体的ES6特性——模板字符串，以及如何使用它来动态添加HTML标签。这在现代前端开发中是非常常见的需求，特别是在构建用户界面时。 模板字符串是ES6中的一个重要创新，它允许我们...
本示例关注的是如何在C#中使用ASP.NET Web应用程序，在一个Panel控件上动态添加控件。这个过程对于创建可自定义、灵活且交互性强的用户界面非常有用。 首先，我们需要理解Panel控件。Panel在ASP.NET中是一个容器...
1. **动态添加HTML元素**： 当页面加载完成后，可以使用jQuery的`$()`函数创建新的HTML元素。例如，`$("<tr></tr>")`创建了一个新的tr元素。同样，`$("<td>...</td>")`用于创建td元素。通过这种方式，我们可以构建...