`
zhanghw0917
  • 浏览: 185660 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

javascript操作表格Table　

    博客分类：
  • Java
JavaScriptIE单元测试FirefoxCSS 
阅读更多

自： http://fulong258.blog.163.com/blog/static/1789504420088229280691/

 

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> JS操作表格 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
   
<body>
   
</body>
<script language="javascript">
//添加表格

function loadTable()
{
    var tb = document.createElement("table");
    var rowTitle = tb.insertRow();
    var cellTitle1= rowTitle.insertCell();
    var cellTitle2= rowTitle.insertCell();
    cellTitle2.colSpan = 2;
    cellTitle2.align = "right";
    cellTitle2.innerHTML = "<input type = 'button' value= '确定' onclick='addRow(this.parentElement)'>";
    cellTitle1.innerHTML = "<span>添加</span>";
    loadSelect(cellTitle1);
   
    for(var i = 0; i < 10; i++){
        var row = tb.insertRow();//添加行

        loadCells(row, i);
    }
    //设置属性

    tb.id = "tb";
    tb.align="center";
    tb.cellPadding = 1;
    tb.bgColor="#ffffee";
    tb.style.borderWidth = "1px";
    tb.style.borderCollapse = "collapse";
    tb.style.borderStyle = "solid";
    tb.rules = "ALL";//应用全部

    tb.borderColor = "#000000";
    document.body.appendChild(tb);
}
//添加单元格

function loadCells(rowObj,m)
{
    var cell1 = rowObj.insertCell();//添加单元格

    var cell2 = rowObj.insertCell();//添加第二个单元格

    var cell3 = rowObj.insertCell();
   
    cell1.innerHTML = "&nbsp;" + parseInt(m + 1) + "&nbsp;";
    cell2.innerHTML = "<input type='text' name='txt_name' value=''>";
    cell3.innerHTML = "<span style='cursor:hand;' onclick='delRow(this)'>&nbsp;×&nbsp;</span>";
}
//添加select框

function loadSelect(obj)
{
    var s = document.createElement("select");
    s.id = "sel_count";
    s.name = s.id;
    for(var i = 1; i <= 10; i++){
        var opt = new Option(i+"行",i);
        s.options.add(opt);
    }
    obj.appendChild(s);
}
//删除行

function delRow(obj)
{
    var tr = obj.parentElement.parentElement;
    var tb = tr.parentElement.parentElement;//table标签和tr标签隐式存在一个tbody

   
    tb.deleteRow(tr.rowIndex);
}
//选择好的个数的行，传入单元格

function addRow(obj)
{
    var tr = obj.parentElement;
    var cnt = (tr.cells[0]).children[1].value;//个数

    var tb = tr.parentElement.parentElement;
   
    var lastRow = tb.rows[tb.rows.length - 1];//获得当前最后一行

    var maxIndex= parseInt(lastRow.cells[0].innerText);//获得当前表格中显示的最好编号

   
    for(var i = 0; i < cnt; i++){
        var newRow = tb.insertRow();
        loadCells(newRow,parseInt(maxIndex + i));
    }
        
}
   
loadTable();
</script>
</html>

 

********************************************************************************

 

<html>
    <head>
        <title></title>
        <SCRIPT LANGUAGE="JavaScript">
        function showTable(id){
          var tb=document.getElementById(id);
          var rows=tb.rows;
          for(var i=0;i<rows.length;i++){
             var cells=rows[i].cells;
             for(var j=0;j<cells.length;j++){
                 alert(cells[j].childNodes[0].value);
             }
          }
         }
         function showTd(id){
             var td=document.getElementById(id);
             var cell=td.parentElement;
             alert(cell.childNodes[0].value);
             alert(cell.cellIndex);
         }
        </SCRIPT>
    </head>
    <body>
        <input type="button" onclick="showTable('mailTable');" value="遍历table"/>
        <input type="button" onclick="showTd('th01Input');" value="取得td的index"/>
        <table id="mailTable">
            <tr>
                <th><input value="th00"></th>
                <th><input name="th01Input" value="th01"></th>
            </tr>
            <tr>
                <td><input value="th10"></td>
                <td><input value="th11"></td>
            </tr>
            <tr>
                <td><input value="th20"></td>
                <td><input value="th21"></td>
            </tr>
        </table>
    </body>
</html>

另外ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，
在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，
使用appendChile方法也不管用。

//向table追加一个空行：
var otr = otable.insertRow(-1);
var otd = document.createElement("td");
otd.innerHTML = " 测试";
otd.className = "css";
otr.appendChild(otd);

 

 

更多请进：
分享到：
| Java中获取myql数据源
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript 绘制表格table,可以固定首行,首列

    javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.

    JavaScript操作表格

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

    javascript清空table表格的方法

    本文实例讲述了javascript清空table表格的方法。分享给大家供大家参考。具体如下： 1. 通常方法 循环table的rows，然后一个一个删除。 这个方法是通常的方法，可行，但是效率不好。 2. 另一个方法 var artTable = ...

    javascript动态操作表格

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

    js操作表格的方法介绍

    在JavaScript中，操作表格是一种常见的任务，特别是在网页交互和数据展示方面。这篇博客将深入探讨如何使用JavaScript来创建、修改和操作HTML表格。首先，我们需要理解HTML表格的基本结构，包括`&lt;table&gt;`, `&lt;tr&gt;`, `...

    javascript表格操作

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

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

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

    javascript经典表格操作

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

    javascript操作表格.doc

    JavaScript 操作表格是网页开发中的常见任务，尤其在创建交互式数据展示或处理用户输入时。这个文档示例提供了一个简单的表格编辑器，允许用户通过按钮执行常见的表格操作，如添加、删除行和单元格，以及移动单元格...

    JAVASCRIPT自动添加表格

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

    JavaScript的Table表格对象

    在JavaScript的世界里，Table表格对象是网页动态交互中不可或缺的一部分，尤其在处理用户数据展示和操作时。本文将深入探讨如何使用JavaScript来操作HTML中的表格元素，包括获取单元格、行的数据以及各种属性。 ...

    原生js table表格自动排序效果

    总的来说，原生js table表格自动排序效果的实现涉及到HTML结构的理解、JavaScript事件处理、数组排序算法的运用以及DOM操作。这是一个实用的功能，通过学习和理解这个例子，可以提升我们对前端开发中数据处理和交互...

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

    在本文中，我们将深入探讨如何使用JavaScript来动态地操作表格，包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下，实现灵活的数据管理功能。 1. **创建表格** 在HTML中，我们可以使用`&lt;table...

    JavaScript实现表格排序

    首先，我们需要理解HTML表格的基本结构，通常由`&lt;table&gt;`、`&lt;tr&gt;`（行）、`&lt;th&gt;`（表头）和`&lt;td&gt;`（数据单元格）组成。为了实现排序，我们需要对表格中的数据进行处理。这里主要涉及两种方法：一种是原地排序，另一...

    javascript 操作 Table 排序

    在JavaScript中，操作HTML表格（Table）进行排序是一项常见的任务，尤其在动态数据展示和用户交互中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们需要理解HTML表格的基本结构。一个HTML...

    非常实用的JAVASCRIPT修改表格信息,然后更新数据库汇总

    在JavaScript编程中，修改表格（Table）信息并更新数据库是一个常见的需求，特别是在Web应用程序中，用户可能需要编辑数据显示，然后将这些更改同步到后端存储。这个“非常实用的JAVASCRIPT修改表格信息,然后更新...

    javascript 表格操作

    在探讨“javascript表格操作”这一主题时，我们深入解析如何使用JavaScript来动态地创建、修改和操作HTML表格。以下是从给定的代码片段中提取的关键知识点： ### 动态插入行与删除行 #### 插入行：`insertRow()` -...

    原生javascript实现拖拽改变table表格行高（html）

    标题提到的“原生javascript实现拖拽改变table表格行高”是一项技术挑战，因为大部分在线资源都集中在改变列宽上，而对行高的调整相对较少。 首先，我们需要理解HTML表格的基本结构。表格由`&lt;table&gt;`元素定义，内部...

    JavaScript控制表格换色

    一个基本的HTML表格由`&lt;table&gt;`元素定义，`&lt;tr&gt;`表示行，`&lt;th&gt;`表示表头，`&lt;td&gt;`表示单元格。我们可以为这些元素添加类或ID，以便通过JavaScript进行选择和操作。 在JavaScript中，我们通常使用`document....

    JavaScript实现表格排序，点击表头切换升序降序，非常简单

    &lt;title&gt;JavaScript表格排序 table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { cursor: pointer; } &lt;table id=...

Magicbox
Global site tag (gtag.js) - Google Analytics