很多时候我们需要在页面上动态添加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元素。通过这种方式,我们可以构建...