Javascript_Table_DOM

最新推荐文章于 2024-08-10 16:15:00 发布
最新推荐文章于 2024-08-10 16:15:00 发布
阅读量515 收藏
点赞数
文章标签： javascript table border null 360
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NotOnlyForShe/article/details/7236225
版权
 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript">
 function oprates(btn){
  if(btn.firstChild.nodeValue=="修改"){
   btn.firstChild.nodeValue="保存";
   btn.nextSibling.firstChild.nodeValue="取消";
   btn.parentNode.previousSibling.firstChild.style.display='none';
   btn.parentNode.previousSibling.lastChild.style.display='block';
   var previousSiblingTR = btn.parentNode.parentNode.previousSibling;
   while(previousSiblingTR!=null){
    if(previousSiblingTR.lastChild.firstChild.nodeValue!="操作"){
     if

(previousSiblingTR.lastChild.lastChild.firstChild.nodeValue=="取消"){
      oprates(previousSiblingTR.lastChild.lastChild);
     }
    }
    previousSiblingTR=previousSiblingTR.previousSibling;
   }
   var nextSiblingTR = btn.parentNode.parentNode.nextSibling;
   while(nextSiblingTR!=null){
    if(nextSiblingTR.lastChild.lastChild.firstChild.nodeValue=="取

消"){
     oprates(nextSiblingTR.lastChild.lastChild);
    }
    nextSiblingTR = nextSiblingTR.nextSibling;
   }
   return;
  }
  if(btn.firstChild.nodeValue=="删除"){
   btn.parentNode.parentNode.removeNode(true);
   return;
  }
  if(btn.firstChild.nodeValue=="保存"){
   btn.firstChild.nodeValue="修改";
   btn.nextSibling.firstChild.nodeValue="删除";
   btn.parentNode.previousSibling.firstChild.style.display="block";
   btn.parentNode.previousSibling.lastChild.style.display="none";
   

btn.parentNode.previousSibling.firstChild.firstChild.nodeValue=btn.parentNode.previousSibling.last

Child.value;
   return;
  }
  if(btn.firstChild.nodeValue=="取消"){
   btn.previousSibling.firstChild.nodeValue="修改";
   btn.firstChild.nodeValue="删除";
   btn.parentNode.previousSibling.firstChild.style.display="block";
   btn.parentNode.previousSibling.lastChild.style.display="none";
   

btn.parentNode.previousSibling.lastChild.value=btn.parentNode.previousSibling.firstChild.firstChil

d.nodeValue;
   return;
  }
 }
</script>
<style>
 input{
  border:solid 1px #00F;
 }
 tr{
  height:30px;
 }
 td{
  text-align:center;
 }
</style>
<body>
<h3 align="center">我的购物车</h3>
<form>
<table border="1" width="360px" cellpadding="0" cellspacing="0" id="goods_tb" align="center">
 <tr>
     <th width="80px">商品</th>
        <th width="60px">价格</th>
        <th width="140px">数量</th>
        <th width="80px">操作</th>
    </tr>
    <tr>
     <td>数学</td>
        <td>40</td>
        <td><span>1</span><input type="text" style="display:none" value="1" /></td>
        <td><a href="#" onClick="oprates(this)">修改</a><a href="#" onClick="oprates(this)">删除

</a></td>
    </tr>
    <tr>
     <td>English</td>
        <td>35</td>
        <td><span>3</span><input type="text" style="display:none" value="3" /></td>
        <td><a href="#" onClick="oprates(this)">修改</a><a href="#" onClick="oprates(this)">删除

</a></td>
    </tr>
</table>
</span>
</body>
</html>

莫欺少年穷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
DOM_Table_Test-Attempt
05-26
DOM_Table_Test尝试-ALPHA进行中，所有要求均已“实现”。 测试需要您自担风险。 回购预览：可能需要一段时间才能完全加载，因为GitHub喜欢抱怨429 (Too Many Requests)
baifenbiao.rar_javascript_表格_选中 显示
09-20
总的来说，这个"baifenbiao.rar"压缩包展示了一个简单的JavaScript表格应用，它利用了JavaScript的事件处理和DOM操作，实现了表格的选中和显示功能，为学习和理解JavaScript在网页交互中的应用提供了很好的实例。...
JS DOM之table
SkullSky的博客
03-13 716
表格的结构： tHead      :   表格头 tBodies   :   表格头 tFoot       :   表格尾 rows       :   行 cells        :   列 示例代码： window.onload = function(){ data = [ {id:1,username:'leo'
javascript对table的DOM操作
IT人士的平台
11-21 203
[color=indigo][b]一、Table对象[/b][/color] [b]DOM继承关系：Node —— Element —— HTMLElement —— Table[/b] [b]1、Table对象的属性：[/b][color=red] .rows [/color][color=blue]//[/color][color=green]返回一个数组，存放所有的行对象，即Tab...
浏览器对js中nextSibling与previousSibling属性的支持
victoria_wr的博客
07-22 746
若有众多空格作为文本节点，使用nextSibling和previousSibling时就会出现问题； 因为FireFox会把文本节点误当做元素节点的兄弟节点来处理。我们可以添加nodeType来判断； 当上一节点或者是下一节点为文本节点时，就继续寻找，直到找到下一个元素节点。   其中nodeType的值主要有以下几种：         1.元素节点的nodeType值为1      
Javascript_10_DOM_练习
pre_eminent的JAVA学习园地
11-12 1107
DOM_实例练习 a:link,a:visited{ color: blue; text-decoration: none; } a:hover{ color: red; } .large{ font-size: 26px; } .normal{
Javascript_8_DOM_节点操作
pre_eminent的JAVA学习园地
11-11 1208
DOM_节点操作 DOM_节点操作 这个是div_id_1里面的内容 百度一下 163一下 将DIV—2里面的所有锚即A标签的打开属性设置为：_self qq一下 sina一下
Javascript_12_DOM_表格排序
pre_eminent的JAVA学习园地
11-13 1057
DOM_表格练习 a:link,a:visited{ color: blue; text-decoration: none; } a:hover{ color: red; } table{ color:white; font-weight: bold; border
vue_table导出excel
Byron__的博客
12-11 427
【代码】vue_table导出excel。
Javascript_15_DOM_select练习
pre_eminent的JAVA学习园地
11-13 1294
DOM_select练习 a:link,a:visited{ color: blue; text-decoration: none; } a:hover{ color: red; } table{ color:white; font-weight: bold;
Javascript_11_DOM_表格练习
pre_eminent的JAVA学习园地
11-13 961
DOM_表格练习 a:link,a:visited{ color: blue; text-decoration: none; } a:hover{ color: red; } table{ border: #008FF0 dashed 1px; } table td{
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
aaaaa.rar_JavaScript Excel_Table_table 导出excel_导出excel
09-14
1. **获取表格数据**：使用JavaScript的DOM API，如`document.getElementById`或`querySelector`来获取表格元素。然后遍历表格的所有行和列，收集数据。 2. **转换数据**：将表格数据转换为适合Excel的格式，这可能...
js.zip_Table
09-14
在JavaScript的世界里，"js.zip_Table"这个压缩包文件似乎是一个专门为前端开发人员设计的资源集合，它封装了一些常见的JavaScript样式，特别针对文本框、div元素以及表格（table）的样式处理。这样的工具库可以极大...
sumalljiedian.rar_Table
09-21
为了完成这个统计任务，可以使用各种编程语言，如JavaScript、Python等，配合DOM解析库（如JavaScript的DOM API，Python的BeautifulSoup等）来遍历HTML文档，找出这些特定元素并计数。此外，还可以利用CSS选择器或者...
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 282
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
牛客JS题（三十四）监听对象
最新发布
不起眼小菜菜的博客
08-10 337
注释很详细，直接上代码……
【Vue3】图片未加载成功前占位
菜就多练
08-08 307
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 408
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
JavaScript DOM基础：操作HTML元素与实战示例
JavaScript是实现DOM的核心语言之一，它的基本语法在Web开发中起着至关重要的作用。 在第十四章中，课程的目标围绕JavaScript在实际项目中的应用展开，包括但不限于： 1. 表单验证：JavaScript可以监听用户输入并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

莫欺少年穷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值