`
zhangrong108
  • 浏览: 206627 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

javascript 动态操作表格

阅读更多

一、动态设置元素readonly属性时,js里面的readOnly一定要大些O

document.getElementById("id").readOnly=true;

二、动态给表插入行:

function addRow(){
  //动态插入一行
  var oRow1=mediaMes.insertRow(mediaMes.rows.length);

  //设置tr的id
  oRow1.id="tr"+thisId;

  //获得表总的行数
  var aRows=mediaMes.rows;

  //获得新添加行的列集合
  var aCells=oRow1.cells;

  //再新添加的行里面插入一个列
  var oCell1_1=aRows[oRow1.rowIndex].insertCell(aCells.length);

  //=================设置列的样式======================
  oCell1_1.align="center";
  var oStyle1 = oCell1_1.getAttribute("style");

  //Ie浏览器动态设置样式不能直接给行或列指定class属性

  //要先把样式放到一个对象的attribute里面,然后在把这个对象设置到行或列里面去
  // ie
     if(oStyle1 == "[object]") {
      oStyle1.setAttribute("cssText","border-right: 1px solid #003399;border-bottom: 1px solid #003399;");
        oCell1_1.setAttribute("style",oStyle1 );
     } else {
   oCell1_1.setAttribute("class","td_border" );
     }
  var cell1="<input type='text' name="user"  id='user'/>";
  oCell1_1.innerHTML=cell1;
}


三、
       function delRow(rowId){
var poss=document.getElementById(rowId);
mediaMes.deleteRow(poss.rowIndex);
}

四、动态移动table里面的行(tr)

  // 先获得当前行的父节点,就是table

   var parent=aRows[sort].parentNode;

  //table移除一个行,返回的对象就是被移除的行
   var orgNode=parent.removeChild(aRows[sort+1]);
   var destNode=aRows[sort];

  //在一个行前面把这个行插入
   parent.insertBefore(orgNode,destNode);

分享到:
评论

相关推荐

    javascript动态操作表格

    在JavaScript中,动态操作表格是一项常见的任务,尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题,包括如何添加、删除、选择表格以及兼容性问题。 首先,让我们从添加表格开始。在HTML中,表格由`&lt;table&gt;`...

    JavaScript动态操作表格,添加,删除行、列及单元格

    JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

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

    1. **JavaScript动态操作表格**:指利用JavaScript代码对HTML表格进行动态的添加、删除、修改等操作,而不需要刷新页面或重新加载数据。 2. **添加、删除行、列及单元格**:这是动态操作表格的主要功能,可以分别对...

    js动态操作表格

    在JavaScript编程中,动态操作表格是一项常见的需求,特别是在构建数据驱动的Web应用时。这个主题主要涵盖如何使用JavaScript来创建、修改以及删除HTML表格(`&lt;table&gt;`元素)中的行(`&lt;tr&gt;`)、列(`&lt;td&gt;`或`&lt;th&gt;`)...

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

    JavaScript动态添加删除表格行

    在HTML中,`&lt;table&gt;`元素用于创建表格,而动态操作表格行通常涉及到DOM(Document Object Model)的操作。JavaScript提供了对DOM的访问和修改能力,让我们能够动态地添加、删除或修改表格元素。 1. **添加表格行**...

    javascript下动态创建表格的三种方式

    ### JavaScript 下动态创建表格的三种方式 在网页开发过程中,经常需要通过JavaScript来动态地创建或更新HTML元素,其中就包括表格(`&lt;table&gt;`)。本文将详细介绍在JavaScript中动态创建表格的三种常见方法,并对每...

    老裴帮助关于Javascript动态创建表格的小练习

    在这个特定的练习中,我们将探讨如何使用JavaScript动态地生成表格,这对于构建交互式Web应用或者处理动态数据展示是非常有用的。 在描述中提到的博文链接(已省略)可能提供了一个详细的步骤指南或者示例代码,以...

    JavaScript操作表格

    ### JavaScript操作表格知识点详解 #### 一、创建表格 在给定的内容中,我们首先看到了一个简单的示例,展示了如何使用JavaScript动态创建一个表格。这个过程主要包括以下几个步骤: 1. **获取容器元素**:通过`...

    JavaScript动态生成表格案例

    这是一个动态生成表格的 HTML 页面,使用了 JavaScript 动态生成表格内容。这个表格显示了一组学生的成绩信息,包括姓名、科目和得分,并提供了删除操作。 在页面中,先声明了一个 table 元素,并设置了 id 为 ...

    javascript表格操作

    在探讨“javascript表格操作”的知识点时,我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素,包括但不限于创建、删除行或单元格,以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...

    javascript经典表格操作

    在JavaScript编程领域,表格操作是常见的任务之一,特别是在构建数据密集型Web应用程序时。本教程主要聚焦于如何使用JavaScript进行一些经典的操作,如动态增加行、删除行、实现全选功能以及清除全部数据等。这些...

    JAVASCRIPT自动添加表格

    在提供的压缩包文件“JS操作表格大全”中,可能包含了各种JavaScript操作表格的实例代码,包括但不限于以上所述的添加和删除操作,还可能涵盖排序、过滤、编辑等功能。学习并实践这些示例,将有助于提升你对...

    javascript动态创建表格.doc

    总结来说,JavaScript动态创建和操作表格的核心在于理解`insertRow()`、`insertCell()`、`deleteRow()`和`deleteCell()`方法的使用,以及如何灵活地设置表格和单元格的属性。在实际应用中,要注意浏览器兼容性问题,...

    javascript实现表格添加删除等操作

    在JavaScript编程中,动态操作HTML元素,特别是表格(table)元素,是常见的需求。这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用,尤其...

    javascript 动态创建表格:新增、删除行和单元格.zip

    在HTML页面中,JavaScript可以用来动态创建和操作元素,包括表格。本压缩包中的"javascript 动态创建表格:新增、删除行和单元格.zip"内容着重介绍了如何使用JavaScript来动态地构建和修改HTML表格。 首先,我们要...

    JavaScript动态添加表格行(使用模板、标记)

    在JavaScript编程中,动态添加表格行是一项常见的任务,特别是在创建数据展示或编辑功能时。本文将深入探讨如何使用模板和标记技术来实现这一功能。首先,我们先了解一下基本概念。 **1. 模板(Template)** 模板是...

    JavaScript特效(表格类)

    1. **DOM操作**:在JavaScript中,Document Object Model(DOM)是网页内容的结构化表示,通过DOM我们可以对表格进行添加、删除、修改单元格或行等操作。例如,`document.getElementById()`、`document....

Global site tag (gtag.js) - Google Analytics