仅使用 HTML/JavaScript 创建购物车

2023-11-23

我不知道该怎么做才能完成这个项目。我需要创建一个仅使用一个 HTML 页面的购物车。我已经设置了表格来显示正在出售的商品,但我迷失的是 JavaScript。

我不知道如何将“添加到购物车”按钮与所有必要的数据(名称、描述和价格)链接起来,以便能够将其添加到购物车。我不需要能够将其从购物车中删除,但它确实需要显示总数。在网上搜索了一些答案后,我尝试了一些方法,但就是无法弄清楚。

任何帮助都值得赞赏,因为我现在完全迷失了方向,并且总体上对 JavaScript 很陌生。

这是 jsFiddle,但这让我有点困惑,因为它的工作方式与我在 Notepad++ 中运行的方式不同

js小提琴:http://jsfiddle.net/renavi/ATjvt/5/

function AddtoCart() {
  console.log('hi');
  var x = document.getElementById('Items');
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row.cells[0].innerHTML = len;
  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
  inp2.value = '';
  x.appendChild(new_row);
}

直接文件在这里

巴斯德宾:http://pastebin.com/sutGWjSY


你只需要使用简单购物车

它是一个免费且开源的 JavaScript购物车可以轻松地与您当前的网站集成。

您将在以下位置获得完整的源代码github

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

仅使用 HTML/JavaScript 创建购物车 的相关文章

  • JSDoc:如何在生成的文档中包含自定义 css 文件模板?

    JS文档docs https jsdoc app about configuring default template html say 将图像目录复制到输出目录 复制全部 将 myproject static 中的静态文件复制到输出目录
  • 使用 easyXDM 调整 IFrame 大小

    我将 iFrame 代码提供给客户 以便他们可以显示我网站上的动态内容 我希望其页面上的 iFrame 能够调整大小以适合我的内容 我按照 easyXDM 网站的说明进行操作 但也许我遗漏了一些东西 我没有收到任何错误 但 iFrame 保
  • 有没有办法在 TypeScript 2+ 中全局添加类型定义?

    我有一堆简单的 ts files 不是项目 即独立的 ts 脚本 他们使用一些 Node js 功能 TypeScript 和节点类型定义通过安装 npm install g typescript npm install g types n
  • Relay 中的嵌套片段数据始终相同

    我是 Relay 新手 并且遇到了片段上嵌套数据的问题 当我在 graphiql 中进行测试时 以下查询返回正确的数据 因此我确信我的架构是正确的 viewer customers name billing address city 但是
  • Rails 4 - 带有 dependent-fields-rails 的条件 JS

    我正在尝试弄清楚如何在我的 Rails 4 应用程序中使用 dependent fields rails gem 我迷路了 我已将 underscore js 包含在我的供应商 javascripts 文件夹中 并更新了我的 applica
  • 如何使用 PHP 从 MySQL 查询中按升序对值进行排序?

    我使用以下 PHP 脚本从 MySQL 表中获取和更改数据 并将结果打印在 HTML 表中 我希望按升序对数据进行排序 utilization percentage变量 它是由创建的 total client time total avai
  • 在IOS中,引导模式中的iframe无法滚动

    我在引导程序模态体内有一个 iframe div class modal fade div class modal dialog div class modal content div class modal header div div
  • 如何检查jquery数据表中的每个复选框?

    我有一个第一列带有复选框的表格 我使用 jQuery DataTable 插件显示我的表格 我制作了 2 个链接来选择 取消选择每个复选框 这是选择全部的一个 a href Select all a 和 JavaScript functio
  • 比较 javascript 元素和 scala 变量的 Play 框架 Twirl 模板

    如下面的代码示例所示 我想比较 scala 辅助元素内的 javascript 元素 然而 即使存在元素 abcde 它也始终返回 false 除了使用标签之外 如何获取 scala 辅助元素内的 javascript 值 appSeq S
  • 页面不会居中对齐

    我遇到了 CSS 问题 http www luukratief design nl dump parallax index html http www luukratief design nl dump parallax index htm
  • Google 地图 v3 中标准缩放控件的样式

    有没有一种简单的方法可以在 Google Maps JavaScript API v3 中设置缩放控件的样式 我想要的只是改变标准图像 http maps gstatic com intl en ALL mapfiles mapcontro
  • IE6 丢失查询字符串

    我有一个使用 javascript 从查询字符串中获取值的页面window location 从网络服务器运行时效果很好 但如果我通过将其放在地址栏中使用 IE6 在本地运行它 c mysite index htm 网站创建的任何查询字符串
  • 在 中动态添加链接样式表 [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 如何将链接
  • HTML / CSS 如何将图像图标添加到输入类型=“按钮”?

    我使用下面的 CSS 但它将图像放在按钮的中心 使用任何方式左对齐或右对齐图标
  • 如何在 ChartJS 中创建自定义图例

    我需要使用 ChartJS 库为我的圆环图创建自定义图例 我已经使用 ChartJS 提供的默认图例创建了甜甜圈 但我需要一些修改 我希望其价值高于汽车名称 另外 我不喜欢粘性图例 我想将其与甜甜圈分开 这样我就可以更改字体 框的样式 例如
  • Chrome Prerender 功能每次都会被取消

    我正在尝试 Chrome 中的预渲染功能 但是当我检查网络时 我可以看到任何链接的请求都被取消 我使用以下语法 我尝试了现场演示http prerender test appspot com http prerender test apps
  • 选择MySql表数据放入数组中

    我尝试从 mysql 捕获数据并将它们全部放入数组中 认为 users table id name code 1 gorge 2132 2 flix ksd02 3 jasmen skaod2 sql mysql query select
  • 如何在 jQuery 中检查复选框是否被选中?

    我需要检查checked复选框的属性 并使用 jQuery 根据选中的属性执行操作 例如 如果age复选框被选中 然后我需要显示一个文本框来输入age 否则隐藏文本框 但下面的代码返回false默认情况下 if isAgeSelected
  • html 表格顶部对齐?

    我怎样才能让图像和内容向右顶部对齐 如你所见 我尝试了 valign top table border 0 cellspacing 0 cellpadding 0 tbody tr valign top td valign top img
  • 从 Node.js 调用 execl、execle、execlp、execv、execvP 或 execvp 的方法

    POSIX 系统公开了一系列exec函数 允许人们将可能不同的东西加载到当前进程中 保留打开的文件描述符 进程标识符等 可以出于多种原因执行此操作 在我的情况下 这是引导 我想更改我自己的进程的命令行选项 然后在现有进程上重新加载它 这样就

随机推荐

  • 避免 SSL “您将被重定向到不安全的连接。”信息

    我有一个通过 SSL 提供服务的登录屏幕 用户填写他们的登录名 密码 这将被发布到服务器 此时我想跳出 SSL 因此我将它们重定向回没有 SSL 的同一页面 这会导致浏览器显示警告对话框 您将被重定向到不安全的连接 我怎样才能避免这种情况
  • 如何在 Yii 中使用事件

    我想在 onBeginRequest 事件中运行一些代码 我该在哪里做呢 我认为我不应该将其添加到核心库代码中 我对 Yii 完全是菜鸟 如果您想使用 onBeginRequest 和 onEndRequest 您可以通过将以下几行添加到配
  • VS 2010 中出现“没有可用的编辑器”错误

    当我尝试在 VS 2010 中选择设计器视图时 出现以下错误 没有可用的编辑器 c 用户 teadrinkinggeek 文档 视觉 工作室 2010 网站 website2 About aspx 确保该文件的应用程序 类型 aspx 已安
  • 为什么 Eclipse PHP 无法识别名称空间声明?

    当我输入 namespace ORM 时在 Eclipse 中 它用红色强调 ORM 并表示它需要括号 有没有办法让 Eclipse 识别名称空间 这可能是您的项目设置为5 1 5 2版本 您可以在以下位置更改默认值 Window gt P
  • SEL 执行选择器和参数

    当您拥有的只是一个 SEL 对象时 似乎应该有一种简单的方法来调用带有一些参数的选择器 我似乎找不到正确的语法 MyClass init SEL sel owner NSObject parent int i 10 parent perfo
  • 通过 OneToOneField 删除相关对象

    在这种情况下有什么聪明的方法来执行删除吗 class Bus models Model wheel OneToOneField Wheel class Bike models Model wheel OneToOneField Wheel
  • 为什么 Java 允许大小为 0 的数组?

    java中的数组是固定长度的 那么为什么 Java 允许大小为 0 的数组呢 String strings new String 0 这表明它是空的 IE 您可以对其进行循环 就好像它有项目并且没有结果发生一样 for int k 0 k
  • 出于安全考虑,是否有类似于 jQuery 版本的终止支持之类的内容,类似于生命周期/支持版本的终止

    出于安全原因 我们需要获取 jQuery 支持的版本 是否有类似 jQuery 版本的支持终止之类的内容 类似于 PHP 中的生命周期终止 支持版本 https www php net supported versions php 出于安全
  • HTTP 路径必须以斜杠开头吗?

    我有一个关于 HTTP 格式的问题 HTTP 请求的第一行看起来像这样 GET path to resource txt HTTP 1 1 或者换句话说 METHOD URI HTTP VERSION 是否需要URI开始于 性格使得 pat
  • PHP 子进程的私有变量访问

    所以我正在尝试解决我在设计 PHP 类时遇到的问题 我创建了一个基类 并分配了私有变量 我有扩展此基类的子类 它们通过基类的函数引用和更改这些私有变量 这是一个例子 请记住我仍然对之间的区别感到困惑private and protected
  • 如何使用 Java Regex 查找字符串中的所有重复字符序列?

    使用 Java 和 Regex 解析随机字符串以查找重复序列 考虑字符串 啊啊啊啊啊啊 我想找到一个正则表达式来查找上述字符串中的所有匹配项 aaabbaaacccbb aaabbaaacccbb 将检查字符串中是否有重复的字符序列并返回这
  • 如何让列表迭代器从给定索引处开始?

    我有一个链接列表 我需要创建在列表中给定点返回迭代器的方法 我目前有一个从头部开始的迭代器 public Iterator
  • Webpack 和 Babel 未转译 node_modules 内的依赖项,由于 ES6 的扩展语法,该依赖项会破坏 IE 11 和 Edge

    我有一个项目使用 mdx js runtime它在 IE 11 或 Edge 上完全崩溃 Edge 44 18362 449 0 SCRIPT1028 SCRIPT1028 Expected identifier string or num
  • 运行“npm install”时,“x 个软件包正在寻找资金”是什么意思?

    我通常会得到 x packages are looking for funding 跑步时npm install on a react项目 知道这意味着什么吗 当你跑步时npm update在命令提示符中 完成后 它会建议您键入一个名为的新
  • 我们可以使用 Twilio iOS SDK 进行 VOIP 推送通知吗?

    我必须使用 Twilio iOS SDK 实现应用程序到应用程序的功能 我已经在应用程序运行时成功实现了语音通话 现在 当应用程序被杀死时 我面临一个问题 如何获取来电的 VOIP 推送通知 我指的是这个链接 https www twili
  • CouchDB 使用什么数据库查看器? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我对 CouchDB 还很陌生 我用谷歌搜索没有找到 CouchDB 的数据库查看器 如何在不操作原始 HTTP 消息的情况下查看 CouchDB
  • ElasticSearch 中的 GET 一致性(和仲裁)

    我是 ElasticSearch 的新手 我正在评估它的一个项目 在 ES 中 复制可以是同步的 也可以是异步的 如果是异步 一旦文档写入主分片 客户端就会返回成功 然后将文档异步推送到其他副本 当异步写入时 我们如何确保当 GET 完成时
  • 枚举中的方法[重复]

    这个问题在这里已经有答案了 所以我对 Java 枚举是否可以有函数感到困惑 我正在制作一个简单的 html 编辑器 并想使用枚举来表示 html 标签 是的 我知道这不是最好的方法 但这是我的团队决定实现它的方式 所以我一直在尝试做这样的事
  • WAIT 和 BLOCKED 线程状态之间的区别

    线程状态 WAIT 和线程状态 BLOCKED 有什么区别 The Thread State 文档 Blocked等待监视器锁而被阻塞的线程就处于这种状态 Waiting无限期等待另一个线程执行特定操作的线程处于此状态 没有向我解释其中的差
  • 仅使用 HTML/JavaScript 创建购物车

    我不知道该怎么做才能完成这个项目 我需要创建一个仅使用一个 HTML 页面的购物车 我已经设置了表格来显示正在出售的商品 但我迷失的是 JavaScript 我不知道如何将 添加到购物车 按钮与所有必要的数据 名称 描述和价格 链接起来 以