开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在Javascript中使用两个Onclick事件交换单元格

在Javascript中，可以使用两个onclick事件来交换两个单元格的内容。下面是一个实现这个功能的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>交换单元格内容</title>
</head>
<body>
    <table>
        <tr>
            <td id="cell1" onclick="selectCell(1)">单元格1</td>
            <td id="cell2" onclick="selectCell(2)">单元格2</td>
        </tr>
    </table>

    <script>
        var selectedCell = null;

        function selectCell(cellNumber) {
            if (selectedCell === null) {
                selectedCell = cellNumber;
            } else {
                swapCells(selectedCell, cellNumber);
                selectedCell = null;
            }
        }

        function swapCells(cell1, cell2) {
            var content1 = document.getElementById("cell" + cell1).innerHTML;
            var content2 = document.getElementById("cell" + cell2).innerHTML;

            document.getElementById("cell" + cell1).innerHTML = content2;
            document.getElementById("cell" + cell2).innerHTML = content1;
        }
    </script>
</body>
</html>

在上面的代码中，我们创建了一个包含两个单元格的表格。每个单元格都有一个唯一的id，并且绑定了一个onclick事件。当单击一个单元格时，selectCell函数会被调用。

selectCell函数首先检查是否已经选择了一个单元格。如果没有选择任何单元格，则将当前单元格的编号存储在selectedCell变量中。如果已经选择了一个单元格，则调用swapCells函数来交换两个单元格的内容，并将selectedCell重置为null。

swapCells函数通过getElementById方法获取要交换的两个单元格的内容，并使用innerHTML属性来交换它们的内容。

这样，当你在网页中点击一个单元格时，它的内容会与另一个单元格的内容交换。

相关搜索:不使用DOM如何在javascript中创建自定义事件如何使用javascript将表格中单元格的值设置为文本输入onclick的值？如何使用javascript通过onclick事件获取单元格的坐标如何使用异步函数等待onClick()事件(在模式中的两个按钮之间进行选择)如何在ag-grid单元格渲染器reactjs中添加onclick事件并访问类函数如何在javascript ag-grid单元格中创建单击事件时的模式弹出窗口如何在Javascript中传递onClick事件侦听器中的字符串值，就像在html中的onclick事件侦听器中一样如何在Javascript中同时监听两个按键事件？如何在javascript中添加两个事件监听器click和keydown 如何在javascript中设置onclick事件后选择dropdown

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

一起学Excel专业开发25：使用类模块创建对象4

Private WithEvents mwksWorksheet AsExcel.Worksheet

03

GridView删除事件

RowDeleting和RowDeleted事件 RowDeleting发生在删除数据之前，RowDeleted发生在删除数据之后。使用RowDeleting事件，可以在真正删除前再次确认是否删除，可以通过设置GridViewDeleteEventArgs.Cancel=True来取消删除；也可以用于判断当前数据库记录数，如果只剩一条记录且数据库不能为空则提示并取消删除操作。使用RowDeleted事件，可以在删除后，通过GridViewDeletedEventArgs的Exception属性判断删除过程中是否产生异常，如无异常，则可以显示类似于” 1 Records deleted” 之类的提示信息。

02

Python爬虫基础：常用HTML标签和Javascript入门

大部分HTML标签是闭合的，由开始标签和结束标签构成，二者之间是要显示的内容，例如：<title>网页标题</title>。也有的HTML标签是没有结束标签的，例如：
和

01

如何使用 JavaScript 导入和导出 Excel

在现代的Web应用开发中，与Excel文件的导入和导出成为了一项常见而重要的任务。无论是数据交换、报告生成还是数据分析，与Excel文件的交互都扮演着至关重要的角色。本文小编将为大家介绍如何在熟悉的电子表格 UI 中轻松导入 Excel 文件，并以编程方式修改表格或允许用户进行编辑，最后使用葡萄城公司的纯前端表格控件SpreadJS组件它们导出回 Excel 文件。

02

Salesforce LWC学习(四十六) 自定义Datatable实现cell onclick功能

本篇参考：https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable

00

JS-DOM 综合练习-动态添加删除班级成绩表

费了2个小时，才把原理弄懂，把问题逐个解决，当你发现你最后栽的那个点，是一个小石头拌的你，你起来是该哭还是该笑呢？只怪自己习武不精吧。虽然问题都解决了，但是还有一个余留的问题就是鼠标经过input时，怎么修改背景颜色的问题。这一节有点乱，虽然整理的代码编了问题序号。可我相信，再过几天自己回头看肯定还是一头雾水。 so,附上具体问题网址：http://www.imooc.com/code/1636 以下是html整件 <!DOCTYPE html> <html> <head> <meta chars

08

Excel编程周末速成班第22课：使用事件

事件是Excel编程的重要组成部分。在第20课中对事件进行过介绍，涉及到用户窗体控件以及他们可以响应的一些事件。理解和使用Excel事件是创建易于使用的响应式应用程序的重要工具。

01

基于 OpenHarmony 鸿蒙开发的表格渲染引擎

基于 Canvas 实现的高性能 Excel 表格引擎组件 OpenHarmonySheet。

03

Excel事件（二）工作表事件

大家好，上节介绍了excel事件的基础知识，后面就按照事件的分类来介绍，本节将首先介绍vba程序开发中最常用的工作表事件。

01

【Java 进阶篇】JavaScript 动态表格案例

在这篇博客中，我们将深入了解JavaScript如何创建和操作动态表格。我们将从头开始构建一个动态表格，并逐步添加各种功能，使其能够实现数据的添加、删除和编辑。这个示例将有助于理解如何在前端开发中使用JavaScript创建交互性强大的表格。

02

一起学Excel专业开发26：使用类模块创建对象5

类模块具有引发事件的能力，这也是它的另一个强大的功能。我们可以定义自已的事件，并在代码中引发这个事件，其他类模块也可以捕获这些自定义的事件并作出相应的响应。

03

JavaScript的工作原理：内存管理+如何处理4个常见的内存泄漏

这篇文章将讨论日常编程中另一个复杂且容易被忽视的问题 — 内存管理。其中还提供了一些关于如何处理 JavaScript 内存泄露的提示，来防止导致内存泄漏以及不会增加我们 WEB 程序的内存消耗。

03

JavaScript的工作原理：内存管理+如何处理4个常见的内存泄漏

这篇文章将讨论日常编程中另一个复杂且容易被忽视的问题 — 内存管理。其中还提供了一些关于如何处理 JavaScript 内存泄露的提示，来防止导致内存泄漏以及不会增加我们 WEB 程序的内存消耗。

05

Excel编程周末速成班第21课：一个用户窗体示例

引言：这是在知识星球App的完美Excel社群中发表的Excel VBA编程系列文章中的一篇，使用一个示例来讲解用户窗体的基础应用。

01

form实现表单提交的各种方法(表单提交源码)

这种方法实际上是调用了一个javascript函数，使用javacript函数来提交表单，方法就非常多非常灵活了，比如可以把它加入到任意一个标签的onclick事件中：

03

JavaScript案例：动态生成表格

因为里面的数据都是动态的，我们需要js动态生成，所以需要准备好模拟数据，采用对象形式存储。

02

节点操作

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

04

javascript dom学习笔记

http://blog.csdn.net/zhoulenihao/article/details/11099455

01

JavaScript中的内存泄漏以及如何处理

随着现在的编程语言功能越来越成熟、复杂，内存管理也容易被大家忽略。本文将会讨论JavaScript中的内存泄漏以及如何处理，方便大家在使用JavaScript编码时，更好的应对内存泄漏带来的问题。概述像C语言这样的编程语言，具有简单的内存管理功能函数，例如malloc( )和free( )。开发人员可以使用这些功能函数来显式地分配和释放系统的内存。当创建对象和字符串等时，JavaScript就会分配内存，并在不再使用时自动释放内存，这种机制被称为垃圾收集。这种释放资源看似是“自动”的，但本质是混淆的，

02

HTML5+CSS3+JavaScript从入门到精通-20

HTML5+CSS3+JavaScript从入门到精通作者：王征，李晓波第二十章 JavaScript的DOM编程案例 20-01 HTML文档的节点属性 <!DOCTYPE html> <ht

04

浅谈JavaScript的事件（事件处理程序）

事件就是用户或者浏览器自身执行的某种动作。诸如click、load和mouseover，都是事件的名字。而响应某个事件的函数就叫事件处理程序。事件处理程序的名字以“on”开头，比如click事件的事件处理程序是onclick。为事件指定事件处理程序的方式有多种方式。 HTML事件处理程序元素支持的事件，都可以使用与相应事件处理程序同名的HTML特性来指定。这个特性的值能支持一定的JavaScript代码。例如，在单击按钮的时候执行一些JavaScript代码。 <div id="aa" onclic

05

Excel实战技巧68：创建级联列表框（使用ADO技巧）

在《Excel实战技巧67：在组合框中添加不重复值（使用ADO技巧）》中，我们使用记录集技巧给组合框添加了不重复值，并概要讲述了ADO记录集基础知识。本文利用记录集技巧，创建级联列表框。

02

javascript事件流的原理

事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。

01

节点操作

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

02

JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

实现的功能是：（类似平时的性格测试）先隐藏一部分页面，然后通过点击单选框来显示。再通过选项的选择-（每个选项有不同的积分）积分的多少来给出评语

02

如果你要学JS——我正走在JS的路上（七）

使用node.removeChild()方法从DOM中删除一个子节点,返回删除的节点。

00

Spread for Windows Forms高级主题(3)---单元格的编辑模式

理解单元格的编辑模式通常情况下，当终端用户双击单元格时，编辑控件将允许用户在该单元格中输入内容。在一个单元格中编辑的能力被称为编辑模式。一些属性和方法可以用来自定义编辑模式的使用。当一个单元格处于编辑模式时，活动单元格将显示一个I型光标，如下图所示。当该单元格不处于编辑模式时，活动单元格将显示一个焦点长方形，如下图所示。 image.png 一个单元格将进入编辑模式（开启编辑模式），当：用户在单元格中输入内容用户双击单元格 EditMode属性设置为true 一个单元格离开编辑模式（关闭编辑模式），

06

关于后端代码的总结_辐射4最强防具代码

JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译) JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行 JavaScript 很容易入门

02

书写高质量jQuery代码的6条经验

一、正确引用jQuery 尽量在body结束前才引入jQuery，而不是在head中。借助第三方提供的CDN来引入jQuery，同时注意当使用第三方CDN出现问题时，要引入本地的jQuery文件。如果在前引入script文件的话，就不用写document.ready了，因为这时执行js代码时DOM已经加载完毕了。二、优化jQuery选择器高效正确的使用jQuery选择器是熟练使用jQuery的基础，而掌握jQuery选择器需要一定的时间积累，我们开始学习jQuery时就应该注意选择器的使用。 <di

09

鸿蒙 OpenHarmony 移植表格渲染引擎总结

随着 OpenHarmony 组件开发大赛结果公布，我们的团队成员被告知获得了二等奖，在开心之余也想将我们这段时间宝贵的开发经验写下来与大家分享，当我们看到参赛通知的时候已经是 9 月中旬的时候，此时已经是作品可以提交的时间了，参考了一些其他作品发现，基于 Canvas 开发的组件目前还没有，那我们就开始计划写一个基于 Canvas 和通用组件一起开发的组件，在这之前由于并没有开发过 OpenHarmony 应用，我们团队成员都没有相关的经验，大家从零开始在摸索，我们首先分工合作，有的成员负责去下载 IDE 和调试设备，有的成员负责研究和阅读官方文档。先附上源代码

02

JavaScript能否实现在线Excel附件的上传与下载？

在本地使用Excel时，经常会有需要在Excel中添加一些附件文件的需求，例如在Excel中附带一些Word，CAD图等等。同样的，类比到Web端，现在很多人用的在线Excel是否也可以像本地一样实现附件文件的操作呢？答案是肯定的，不过和本地不同的是，Web端不会直接打开附件，而是使用超链接单元格的形式来显示，今天小编将为大家介绍使用前端HTML+JavaScript(以下简称为JavaScript)+CSS技术通过超链接单元格的形式实现在线Excel附件上传、下载和修改的操作。

02

25个常规方法优化你的jquery代码

1. 从Google Code加载jQueryGoogle Code上已经托管了多种JavaScript类库，从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽，能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是，如果用户访问那些发布在Google Code上的站点后它会被缓存下来。这样做很有意义。有多少站点使用了没有被缓存的相同jQuery副本，而这些很容易做到,引入:

01

文档和元素的几何滚动

当浏览器在窗口中渲染文档时，它将会创建文档一个视觉表现层，在哪里每个元素都有自己的位置和尺寸。通常web应用程序将文档看做元素的树。

00

「Web编程API」- 03

请注意，本文编写于 2091 天前，最后修改于 174 天前，其中某些信息可能已经过时。

05

如何使用JavaScript导入和导出Excel文件

JavaScript是一个涵盖多种框架、直译式、可以轻松自定义客户端的脚本语言，在 Web 应用程序中，更加易于编码和维护。而Excel 作为一款深受用户喜爱的电子表格工具，借助其直观的界面、出色的计算性能和图表工具，已经成为数据统计领域不可或缺的软件之一。

00

JavaScript内存管理机制以及四种常见的内存泄漏解析

几个星期前，我们开始编写深入研究JavaScript工作原理的系列文章。通过阅读这些文章，你可以了解到JavaScript的构建块及其交互原理，从而能够编写出更好的代码（前排提示：文中所有标蓝部分均可阅读原文获取详情）。本系列的第一篇文章简单介绍了引擎、运行时间和堆栈的调用。第二篇文章研究了谷歌V8 JavaScript引擎的内部机制，并介绍了一些编写JavaScript代码的技巧。而这第三篇文章将讨论另一个很重要的主题——内存管理。随着编程语言变得越来越成熟越来越复杂，开发人员很容易忽视这一问题。同时

点击块，让小块动起来 - 函数封装

上一期我们主要讲解JS逻辑和DOM的结合 - JS设置标签的内容和样式，它是实现页面交互效果的重要基础知识。如果想具体了解JS设置标签的内容和样式，可以回复“标签”到微信公众号。今天我们要来学习简单的页面交互效果 - 点击块，让块运动起来。本文内容概要 1 获取标签 2 绑定事件 3 设置样式 4 代码的封装与优化 5 课程小结 6 课程练习 1 获取标签回顾一下前面学过的知识，如何获取网页中的标签？我们是通过给网页中的标签取一个id名（id名不能重复），再利用getElementById('id名')

JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式

一：用最底层的方式，该方式用来创建别的对象树也可以代码演示： <html> <head> <title>DHTML技术演示---表格创建--用最底层的方式，其实该方式用来创建别的对象树也可以</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> table{ border:#ff80ff;

01

用户浏览器操作行为的一种记录方法

记录用户浏览器操作行为是功能自动化测试工具用于录制测试脚本的先决条件，本文将介绍如何采取一种通用的方式，实现对于浏览器端透明地记录用户操作行为，从而实现用户行为向自然语言转换的过程。

04

onclick与addEventListener区别

这次做项目遇到了这个问题，本来习惯性的每次都写的是addEventListener绑定click事件。但是当用addEventListener绑定了多次click事件的时候，引发了我的思考，这两者有区别吗？具体的事件分析可查看另一篇文章

01

前端成神之路-WebAPIs03

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

02

JavaScript爬虫_速通物流

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站前言 – 床长人工智能教程正在上传…重新上传取消https://www.cbedai.net/gkbskc

01

JavaScript web编程

在实际开发中有些东西并不是静态的，要随着改变，比如表格内容，有些资料是从后台数据库中获取的，以上就是用js制作的一个表格案例，更加的灵活。效果图如下：

01

【前端 · 面试】JavaScript 之你不一定会的基础题（二）

在上一篇文章【前端 · 面试】JavaScript 之你不一定会的基础题（一）中，有同学产生了这样一个疑惑：为什么 click 事件的监听函数中，this.id 和 event.target.id 的输出值是不一样的？

01

前端必读：如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件

JavaScript在前端领域占据着绝对的统治地位，目前更是从浏览器到服务端，移动端，嵌入式，几乎所有的所有的应用领域都可以使用它。技术圈有一句很经典的话“凡是能用JavaScript实现的东西，最后都会用JavaScript实现”。 Excel 电子表格自 1980 年代以来一直为各行业所广泛使用，至今已拥有超过3亿用户，大多数人都熟悉 Excel 电子表格体验。许多企业在其业务的各个环节中使用了 Excel 电子表格进行数据管理。

01

JQuery 对控件的事件操作

JQuery是非常棒的js类库，有丰富的UI库和插件，不过我钟爱他的是他的选择器，感觉其他功能有时跟后台人员距离很远，所以一般我也只使用一下他的选择器。今天突然对他的事件产生了兴趣，先前也碰到过，也没整理，今天有空就弄一下咯。对于控件的事件，jQuery已经提供了丰富的方法，包括绑定、一次绑定、触发等，阿拉今早看看叫一哪能用额伐，大虾路古就可以了。 jQuery的绑定事件非常方便，有bind、live、one还有它帮你把一些常用的事件给单独了出来，比如控件的onclick事件，我们绑定onclick事件

06

JS ajax 例子「建议收藏」

整体的代码：将项目放在 TomCat 下的 root 文件夹下，浏览器输入 localhost:8080/history.html 即可运行。

04

WPF是什么_wpf documentviewer

项目中要用到一个数据分页栏，虽然自己没有实现过，但凭经验感觉它和ListBox/ListView有关。于是去网上搜了下WPF 数据分页栏，果然很多实现都用到了ListView。于是拣了一种比较简单的实现学习，其中包含下面代码：

02

在线教育app开发+小程序项目开发要点

本项目的一个教育培训服务APP。提供在线浏览机构信息、名师风采和课程预约订购等功能。

00

React学习笔记—JSX

所谓JSX，是JavaScript的语法扩展（eXtension），让我们在JavaScript中可以编写像HTML一样的代码。 JSX中的这几段代码看起来和HTML几乎一摸一样，都可以使用

<button>之类的元素，所以只要熟悉HTML，学习JSX完全不成问题，但是，我们一定要明白两者的不同之处。首先，在JSX中使用的“元素”不局限于HTML中的元素，可以是任何一个React组件。例如： // Counter组件 import React, { Component } from 'react'

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭