`

点击表格便可编辑

    博客分类:
  • js
 
阅读更多

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>新建网页 1</title>

</head>

<body>

<form name="f1" method="post" action="XXX">

<table border="1" width="500">

    <tr>

        <td width="20%">这是主键</td>

        <td width="40%">名字</td>

        <td width="40%">编号</td>

    </tr>

    <tr>

        <td><input type="hidden" name="ids" value="1">1</td>

        <td onDblClick="show(this,'0','打酱油');"><input type="hidden" name="names" value="打酱油">打酱油</td>

        <td onDblClick="show(this,'1','9527');"><input type="hidden" name="codes" value="9527">9527</td>

    </tr>

    <tr>

        <td><input type="hidden" name="ids" value="2">2</td>

        <td onDblClick="show(this,'0','俯卧撑');"><input type="hidden" name="names" value="俯卧撑">俯卧撑</td>

        <td onDblClick="show(this,'1','9528');"><input type="hidden" name="codes" value="9528">9528</td>

    </tr>

</table>

<input type="submit">

</form>

<script>

    function show(obj,id,valu){

        if(id == "0"){

            obj.innerHTML = "<input type='text' name='names' value='"+ valu +"'>";

        }else if(id == "1"){

            obj.innerHTML = "<input type='text' name='codes' value='"+ valu +"'>";

        }

    }

</script>

</body></html>

分享到:
评论

相关推荐

    bootstrap插件_table可编辑表格_demo

    在Bootstrap中,表格(Table)是常见的数据展示组件,而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展,它允许用户直接在表格内进行编辑,提供了更加交互式的用户体验。 Bootstrap表格的...

    可编辑的表格

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

    jquery将table表格变成可编辑

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

    bootstrap可编辑表格完整代码

    1. **编辑单元格文本**:用户可以点击表格中的某个单元格,直接进行文本输入,修改后保存,更新表格数据。这种编辑方式简单直观,适合于字符串类型的数据。 2. **日期类型**:对于日期数据,表格会提供一个日期选择...

    jquery可编辑表格插件

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

    可编辑表格js代码

    为了实现可编辑功能,我们需要对这些元素添加额外的JavaScript事件监听器,如`click`或`focus`,以便在用户点击单元格时使其变为可编辑状态。 JavaScript作为客户端脚本语言,在网页交互中起着至关重要的作用。在这...

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

    当用户点击表格单元格时,可以触发编辑模式。 ```javascript document.querySelectorAll('td').forEach(td =&gt; { td.addEventListener('click', function() { this.contentEditable = 'true'; // 开启编辑模式 })...

    易语言高级表格可否被编辑事件例程

    下面是一个易语言代码编写的例子,演示如何实现高级表格的可编辑性控制: ```易语言 .事件 高级表格.可否被编辑(表格, 行号, 列号, 编辑许可) .如果 (列号 = 1) '假设第一列数据不可编辑 编辑许可 = 假 .返回 ....

    JQuery实现可编辑的表格

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

    jQuery实现可编辑表格

    当用户点击单元格时,单元格内的文本会变为可编辑的输入框;当用户离开单元格时,输入框消失,新的值会被显示出来。如果需要持久化数据,可以在`blur`事件中添加保存更改的逻辑,例如通过Ajax与服务器通信或使用Web ...

    js做的可编辑的表格

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

    可编辑表格

    这段代码会在用户点击表格单元格时,将单元格内容替换为文本输入框,并将焦点置于输入框。当输入框失去焦点(`blur`事件)时,会将新的值放回单元格,并移除输入框。 对于在表格后新增一行的需求,可以创建一个函数...

    JQUERY实现可编辑的表格

    // 当点击表格单元格时,将其变为可编辑 $('#editableTable td').on('click', function() { $(this).replaceWith('$(this).text() + '"&gt;'); }); // 当离开单元格时,保存更改并恢复表格样式 $('body').on('...

    EasyUI可扩展Editable DataGrid(可编辑数据表格)

    标题 "EasyUI可扩展Editable DataGrid(可编辑数据表格)" 涉及的是一个流行的JavaScript框架——EasyUI中的一个特性。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架,它提供了一系列预定义的CSS样式和...

    Vue封装的可编辑表格插件方法

    在本文中,我们将详细解析如何使用Vue.js框架封装一个可编辑的表格插件。该插件允许用户在表格中进行单元格编辑,并能对表头进行任意合并,从而提供了强大的表格数据处理功能。 首先,我们需要了解该插件的基本结构...

    用js制作的可编辑表格

    在本案例中,"用js制作的可编辑表格"是一个使用JavaScript实现的用户可以直接在网页上编辑表格内容的功能。这种功能在数据管理、信息展示和表单填写等场景下非常实用,因为它提供了直观且便捷的数据输入方式。 首先...

    jQuery+PureCSS可编辑表格插件

    - **单元格激活**:当用户点击表格单元格时,插件会激活该单元格,允许用户编辑其内容。 - **编辑模式**:通过CSS类切换,改变单元格的样式以表示其处于编辑状态。 - **数据保存**:当用户在单元格外点击时,插件会...

    JQuery实现可编辑的表格.rar

    在网页开发中,数据展示通常会使用到表格(Table)这一元素,而让表格中的数据变得可编辑则能极大地提升用户体验。本项目“JQuery实现可编辑的表格”旨在教你如何利用JavaScript库JQuery实现这一功能。JQuery以其...

    可编辑的datagrid表格控件

    "可编辑的datagrid"指的是这种控件不仅能够展示数据,还允许用户直接在表格内进行编辑,提高了数据输入和管理的效率。 在Windows Forms、ASP.NET、WPF或JavaScript等开发环境中,都有相应的datagrid实现。例如,...

Global site tag (gtag.js) - Google Analytics