微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > js教程 > 正文

JavaScript talbe表中指定位置插入一行的实现代码脚本之家修正版_javascript技巧

php中文网

发布： 2016-05-16 18:51:34

原创

1712人浏览过

最近在学JavaScript，下面是我自己做的一个例子（在w3cschool例子的基础上）
该例子实现功能是在鼠标点击的行之后插入一行，默认是在第一行插入。插入的内容可以自己输入，代码如下

Tellers AI

Tellers AI

Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。

Tellers AI

78

Tellers AI

<script type="text/<a style=" color: text-decoration:underline title="javascript" href="https://www.php.cn/zt/15724.html" target="_blank">javascript"> 
//global var 
var pos =0 
//to find the position you mouse has pressed 
function whichElement(e) 
{ 
var targ 
if (!e) var e = window.event 
if (e.target) targ = e.target 
else if (e.srcElement) targ = e.srcElement 
if (targ.nodeType == 3) // defeat Safari bug 
targ = targ.parentNode 
if(targ.tagName=="TD"){//to adjust whether the element is tabledata 
pos = targ.parentNode.rowIndex+1 
} 
else if(targ.tagName=="INPUT"){ 
//to do nothing 
} else{ 
pos =0 
} 
//alert(pos) 
} 
//to insert a row in the place 
function insRow() 
{ 
//alert(pos) 
var x=document.getElementById('myTable').insertRow(pos) 
var y=x.insertCell(0) 
var z=x.insertCell(1) 
y.innerHTML=document.getElementById("cell1").value 
z.innerHTML=document.getElementById("cell2").value 
} 
</script><table id="myTable" border="1">
<tr>
<td>Row1 cell1</td> 
<td>Row1 cell2</td> 
</tr>
<tr>
<td>Row2 cell1</td> 
<td>Row2 cell2</td> 
</tr>
<tr>
<td>Row3 cell1</td> 
<td>Row3 cell2</td> 
</tr>
</table>
<p> 
Cell1:<input type="text" id="cell1" value="cell1"> 
Cell2:<input type="text" id="cell2" value="cell2"></p> 
<input type="button" onclick="insRow()" value="插入行">

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

JavaScript talbe表中指定位置插入一行的实现代码脚本之家修正版_javascript技巧

上面的是内容，默认是插入到开始位置。
这里需要注意的是当鼠标点击插入行按钮时，动作也会捕捉到并改变全局变量，一开始我没有意识到，即没有加入上面的红色代码，所以每次点击插入行时都是在第一行插入，原来按原设计，点击按钮时全局变量更改为0，所以只能在第一行添加了。
简单的解决方法是加入红色代码，这是即可避免刚才的问题。
以上只是学习过程中的小经历，可以以此为模版，比如删除指定的行，或在指定行之前插入等功能皆可完成。
继续学习JavaScript，继续交流。

相关标签：

javascript

大家都在看：

解决JavaScript动态修改图片src属性后图片不显示的问题 JavaScript记忆化_函数缓存与计算结果复用优化JavaScript点击动画：解决元素重复点击时的位置偏移问题 JavaScript动态图片切换：解决图片路径不正确导致显示失败的问题 JavaScript点击动画：解决元素定位偏移的常见问题

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：jquery.alert 弹出式复选框实现代码_jquery 下一篇：论坛里点击别人帖子下面的回复，回复标题变成“回复 24# 的帖子”_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

解决React Native Expo iOS应用EAS构建后启动崩溃问题本教程旨在解决使用EASBuild构建ReactNativeExpoiOS应用后，在启动时出现崩溃的问题。文章将深入探讨常见的四个原因：导航依赖缺失、环境变量配置不当、字体包未安装以及Expo依赖兼容性问题，并提供详细的解决方案和调试建议，帮助开发者顺利发布应用。

2025-11-21 13:23:00

111

JavaScript函数追踪_调用栈分析与可视化调用栈是JavaScript中用于追踪函数执行顺序的LIFO结构，当函数被调用时入栈，执行完毕后出栈。通过错误发生时自动生成的调用栈信息，开发者可清晰看到从入口到错误点的完整调用链，如c←b←a的回溯路径。利用Error.stack属性可在任意位置主动获取当前调用路径，辅助调试深层嵌套或异步逻辑。浏览器DevTools提供可视化调用栈列表和性能时间轴，结合sourcemap可提升压缩代码的可读性。注意异步回调会中断调用链，箭头函数可能显示为匿名，递归过深易引发栈溢出，频繁创建Error对象影响性

2025-11-21 13:19:02

894

解决Mongoose中updateOne路由不更新数据库的问题本文旨在解决MongooseupdateOne路由在数据库更新操作中遇到的常见问题，特别是与_id过滤条件和操作方式相关的语法错误。我们将深入探讨直接使用updateOne时可能出现的问题，并推荐使用findById结合save()方法的更健壮、更符合Mongoose最佳实践的更新策略，确保数据更新的正确性和可靠性。

2025-11-21 13:13:26

327

解决React Testing Library中异步UI更新的测试挑战本文深入探讨了在ReactTestingLibrary中测试异步UI更新（如搜索过滤）时遇到的常见问题。通过分析组件的生命周期和状态管理机制，我们揭示了直接断言可能失败的原因。核心解决方案是利用waitFor工具函数，它能确保测试在UI完成异步状态更新并重新渲染后执行断言，从而实现对复杂交互的健壮测试。

2025-11-21 13:08:02

116

JavaScript网络状态_离线检测与同步策略利用navigator.onLine和online/offline事件检测网络状态；2.通过心跳请求提升检测准确性；3.使用localStorage或IndexedDB缓存离线数据；4.网络恢复后自动同步并处理冲突，结合ServiceWorker增强可靠性。

2025-11-21 12:54:49

603

测试React组件异步状态更新与搜索过滤功能本文旨在解决ReactTestingLibrary中测试带有异步数据获取和搜索过滤功能的组件时，UI无法正确更新的问题。核心内容是讲解如何利用waitFor工具函数来确保在断言之前，组件的异步状态更新和DOM渲染已完全完成，从而实现对动态UI的可靠测试。

2025-11-21 12:53:01

677

Mongoose文档更新指南：_id过滤与updateOne/save最佳实践本文深入探讨了在Mongoose中更新文档时常见的_id过滤问题及其解决方案。文章首先纠正了updateOne方法中_id字段的错误用法，随后提供了两种主要更新策略：直接使用Model.updateOne进行原子更新，以及通过Model.findById检索文档后使用document.save()进行更新。重点推荐后者，因为它能更好地触发Mongoose的验证和中间件，并提供了详细的代码示例和最佳实践建议。

2025-11-21 12:48:23

177

Next.js 13 应用路由中 Stripe 数据获取的深度解析与实践在Next.js13AppRouter环境下，传统的数据获取方法如getStaticProps已被废弃，导致在客户端组件中直接调用StripeAPI时常出现undefined错误。本文将深入探讨Next.js13的新数据获取范式，区分服务器组件与客户端组件的数据处理策略，并提供在服务器组件中安全获取Stripe数据的方法，以及在客户端组件中利用自定义缓存策略优化数据获取的实践方案，旨在帮助开发者规避常见陷阱，构建高效稳定的应用。

2025-11-21 12:39:32

785

Apache ECharts 标题样式：文本颜色与阴影效果的精确配置本教程详细讲解如何在ApacheECharts中正确设置图表标题的文本颜色和阴影效果。核心在于利用textStyle属性控制标题文本颜色，并通过为标题区域设置backgroundColor来激活并显示阴影效果，确保标题样式按预期呈现，提升图表的可视化表现力。

2025-11-21 12:25:13

423

解决JavaScript动态修改图片src属性后图片不显示的问题本教程旨在解决JavaScript动态修改标签src属性后图片无法显示的问题。核心原因通常是图片路径设置不正确。文章将详细阐述如何正确指定图片路径，并通过示例代码演示在HTML、CSS和JavaScript中协同工作，确保图片能够成功加载并显示。

2025-11-21 12:24:05

613

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

React 教程

19242次学习
收藏
TypeScript 教程

11464次学习
收藏
Bootstrap 5教程

20499次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部