`
laoli5290
  • 浏览: 81212 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

动态添加html

阅读更多

很多时候我们需要在页面上动态添加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>

 

0
0
分享到:
评论

相关推荐

    动态添加HTML控件.zip

    在网页开发中,动态添加HTML控件是一种常见的需求,它允许开发者在用户交互时或程序运行过程中创建或移除页面元素。这样的技术尤其在ASP.NET框架中显得尤为重要,因为这可以实现更灵活、响应式的用户体验。本文将...

    vue 动态添加 HTML元素

    如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。 如果没有提供 elementOrSelector 参数,模板将被渲染为文档之外的的...

    通过js脚本实现动态添加HTML标签

    本文将深入探讨如何通过JavaScript脚本实现动态添加HTML标签,这对于创建响应式、交互性强的网页至关重要。 首先,理解HTML标签是构建网页结构的基础。HTML元素由开始标签、内容(可选)和结束标签组成,例如 `...

    动态添加HTML组件 fileupload .html

    动态添加HTML组件 fileupload textbox.html

    动态添加html<tr>和<td>

    我觉得挺好用,可以试下!我觉得挺好用,可以试下!我觉得挺好用,可以试下!我觉得挺好用,可以试下!

    JS简单实现动态添加HTML标记的方法示例

    在JavaScript中,动态添加HTML标记是一项常见的任务,特别是在构建交互式网页时。本文将深入讲解如何使用`createElement()`方法来创建新的HTML元素,并将其插入到文档中。`createElement()`是JavaScript DOM(文档...

    动态增加html表单(文本框)

    例如,使用`PlaceHolder`控件作为容器,然后在服务器端代码中动态添加`TextBox`控件。 4. **C#**:C#是ASP.NET框架常用的编程语言。在服务器端,可以创建`System.Web.UI.WebControls.TextBox`对象并添加到页面上。...

    解决layui动态添加的元素click等事件触发不了的问题

    在页面加载完成时候 ‘.add_project’ 元素是可以触发click时间的,当动态添加 ‘.add_project’ 时候,新添加的元素却触发不了click事件,类似下面的写法: $(".add_project").on('click', function(){ alert&#40...

    Html动态添加行

    在网页开发中,HTML(HyperText Markup Language)是用于创建网页结构的基础语言,而动态添加行功能通常是数据展示或用户交互的重要部分。本示例利用jQuery库来实现这一功能,jQuery是一个高效、简洁且功能丰富的...

    用js动态添加html元素,以及属性的简单实例

    在JavaScript中,动态添加HTML元素和属性是网页交互和动态更新页面内容的关键技术。下面将详细解释这个简单实例中的知识点。 首先,我们看到一个名为`test`的函数,这个函数的作用是动态创建一个新的HTML元素。在这...

    JS动态添加删除HTML元素(实例)

    JS 动态添加删除 HTML 元素实例 动态添加删除 HTML 元素是前端开发中常见的需求之一,今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先,让我们了解一下 HTML 文档对象模型(DOM),它...

    JS动态添加

    2. **动态添加HTML**: - **innerHTML**:可以通过修改元素的`innerHTML`属性来动态地改变其内容。例如,`document.getElementById('container').innerHTML = '&lt;p&gt;Hello World!&lt;/p&gt;'`。 - **...

    html动态添加table行

    实现自动添加table行,增删改查功能统一完成实现,统一提交

    html动态删除添加表格

    html动态删除添加表格

    动态添加标签.(ES6)

    在这个小练习中,我们将聚焦于一个具体的ES6特性——模板字符串,以及如何使用它来动态添加HTML标签。这在现代前端开发中是非常常见的需求,特别是在构建用户界面时。 模板字符串是ES6中的一个重要创新,它允许我们...

    C#在panel动态添加控件

    本示例关注的是如何在C#中使用ASP.NET Web应用程序,在一个Panel控件上动态添加控件。这个过程对于创建可自定义、灵活且交互性强的用户界面非常有用。 首先,我们需要理解Panel控件。Panel在ASP.NET中是一个容器...

    【JavaScript源代码】jQuery实现动态添加标签事件.docx

    1. **动态添加HTML元素**: 当页面加载完成后,可以使用jQuery的`$()`函数创建新的HTML元素。例如,`$("&lt;tr&gt;&lt;/tr&gt;")`创建了一个新的tr元素。同样,`$("&lt;td&gt;...&lt;/td&gt;")`用于创建td元素。通过这种方式,我们可以构建...

Global site tag (gtag.js) - Google Analytics