javascript - 附加到表的数据被添加到一列而不是所有四列-6ren

javascript - 附加到表的数据被添加到一列而不是所有四列

转载作者：行者123 更新时间：2023-11-30 15:18:13

这是一个用 JavaScript 为购物车创建的简化 Bootstrap 表。我有一排四列。问题是当我在 Chrome 中打开它时，第 2、3 和 4 列的所有数据都放在第 1 列中。

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>
<body>
    <div class="container" id="productsList">
    </div>

    <script>
            var productsList = document.getElementById('productsList');
            productsList.innerHTML += '<table class="table table-striped">' +
                                          '<thead>' +
                                              '<tr>' +
                                              '<th>Shopping cart</th>' +
                                              '<th>Name</th>' +
                                              '<th>Price</th>' +
                                              '<th>Quantity</th>' +
                                              '</tr>' +
                                          '</thead>' +
                                          '<tbody>';


            productsList.innerHTML += '<tr>' +
                                              '<td><div><img style="width:200px; height:300px;" src="nopicture.jpg" /></div></td>' +
                                              '<td>' +
                                                  '<h6 id="productname"> Nice Product</h6>' +
                                                  '<a href="#" onclick="deleteProduct(\'' + name + '\')" class="btn btn-primary">Delete</a>' +
                                              '</td>' +
                                              '<td><div id="productprice">Tshs. 5000/=</div></td>' +
                                              '<td><div id="productquantity">3</div></td>' +
                                          '</tr>';




            productsList.innerHTML +=  '</tbody>' +
                                          '</table>';

    </script>
</body>

function fetchProducts() {
var products = JSON.parse(localStorage.getItem('products'));
var productsList = document.getElementById('productsList');

productsList.innerHTML += '<table class="table table-striped">' +
                              '<thead>' +
                                  '<tr>' +
                                  '<th>Shopping cart</th>' +
                                  '<th>Name</th>' +
                                  '<th>Price</th>' +
                                  '<th>Quantity</th>' +
                                  '</tr>' +
                              '</thead>' +
                              '<tbody>';
for(var i in products) {
    var picture = products[i].picture;
    var name = products[i].name;
    var price = products[i].price;
    var quantity = products[i].quantity;

    productsList.innerHTML += '<tr>' +
                                  '<td><div id="productpicture"><img src=\'' + picture + '\' /></div></td>' +
                                  '<td>' +
                                      '<h6 id="productname">' + name + '</h6>' +
                                      '<a href="#" onclick="deleteProduct(\'' + name + '\')" class="btn btn-primary">Delete</a>' +
                                  '</td>' +
                                  '<td><div id="productprice">Tshs.' + price + '/=</div></td>' +
                                  '<td><div id="productquantity">' + quantity + '</div></td>' +
                              '</tr>';

}


   productsList.innerHTML +=  '</tbody>' +
                              '</table>';

}

最佳答案

您不能附加到 innerHTML像这样的元素。当您第一次这样做时，Chrome 会尝试为您关闭表格并使其成为有效的 HTML。在用 </table> 关闭表格后第二次添加 HTML .将 HTML 放入局部变量，然后分配 innerHTML最后一次。

function fetchProducts() {
    var products = JSON.parse(localStorage.getItem('products'));
    var productsList = document.getElementById('productsList');

    var content = '<table class="table table-striped">' +
                                  '<thead>' +
                                      '<tr>' +
                                      '<th>Shopping cart</th>' +
                                      '<th>Name</th>' +
                                      '<th>Price</th>' +
                                      '<th>Quantity</th>' +
                                      '</tr>' +
                                  '</thead>' +
                                  '<tbody>';
    for (var i in products) {
        var picture = products[i].picture;
        var name = products[i].name;
        var price = products[i].price;
        var quantity = products[i].quantity;

        content += '<tr>' +
                                      '<td><div id="productpicture"><img src=\'' + picture + '\' /></div></td>' +
                                      '<td>' +
                                          '<h6 id="productname">' + name + '</h6>' +
                                          '<a href="#" onclick="deleteProduct(\'' + name + '\')" class="btn btn-primary">Delete</a>' +
                                      '</td>' +
                                      '<td><div id="productprice">Tshs.' + price + '/=</div></td>' +
                                      '<td><div id="productquantity">' + quantity + '</div></td>' +
                                  '</tr>';

    }


    content += '</tbody>' + '</table>';
    productsList.innerHTML = content;
}

关于javascript - 附加到表的数据被添加到一列而不是所有四列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44169867/

文章推荐： c# - 从 System.Type 变量创建类的实例

文章推荐： c# - 将独特的实体子组件添加到 Dynamics CRM 解决方案

文章推荐： javascript - 无法通过样式表为不同的分辨率应用媒体查询

android -/数据/数据/在哪里？
初学者 android 问题。好的，我已经成功写入文件。例如。 //获取文件名 String filename = getResources().getString(R.string.filename
安卓/数据/数据/mypackage/img
我已经将相同的图像保存到/data/data/mypackage/img/中，现在我想显示这个全屏，我曾尝试使用 ACTION_VIEW 来显示 android 标准程序，但它不是从/data/dat
ios - Swift 4:无法将“数据”类型的值转换为预期的参数类型“数据”
我正在使用Xcode 9，Swift 4。我正在尝试使用以下代码从URL在ImageView中显示图像: func getImageFromUrl(sourceUrl: String) -> UII
android - 基因运动。如何从设备中提取数据库。我的/数据/数据/文件夹似乎是空的
我的 Ubuntu 安装 genymotion 有问题。主要是我无法调试我的数据库，因为通过 eclipse 中的 DBMS 和 shell 中的 adb 我无法查看/data/文件夹的内容。没有显示
php - JSON 数据 ajax 不是正确的 POST 数据
我正在尝试用 PHP 发布一些 JSON 数据。但是出了点问题。这是我的 html -- {% for x in sets %}
r - lm(数据~时间)和tslm(数据~趋势)有什么区别
我观察到两种方法的结果不同。为什么是这样？我知道 lm 上发生了什么，但无法弄清楚 tslm 上发生了什么。 > library(forecast) > set.seed(2) > tts lm(t
Spring 数据 JPA 和 Spring 数据 Elasticsearch ；找不到类型的属性索引？
我不确定为什么会这样!我有一个由 spring data elasticsearch 和 spring data jpa 使用的类，但是当我尝试运行我的应用程序时出现错误。 Error creatin
d3.js - 数据过滤器适用于 json 数据，但不适用于 csv 数据
在 this vega 图表，如果我下载并转换 flare-dependencies.json使用以下 jq 到 csv命令， jq -r '(map(keys) | add | unique) as
php - 在 .php 文件中发送 mysql 数据/mysql 数据
我正在提交一个项目，我必须在其中创建一个带有表的 mysql 数据库。一切都在我这边进行，所以我只想检查如何将我所有的压缩文件发送给使用不同计算机的人。基本上，我如何为另一台计算机创建我的数据库文件，
android - 如何使用 Android Device Monitor 的文件资源管理器查找我的应用程序/数据/数据
我有一个应用程序可以将文本文件写入内部存储。我想仔细看看我的电脑。我运行了 Toast.makeText 来显示路径，它说:/数据/数据/我的包但是当我转到 Android Studio 的 An
android - 如何从 Genymotion 的 android 模拟器访问文件/数据/数据？
我喜欢使用 Genymotion 模拟器以如此出色的速度加载 Android。它有非常好的速度，但仍然有一些不稳定的性能。如何从 Eclipse 中的文件资源管理器访问 Genymotion 模拟器
silverlight - 如果我在 setter 中使用不同的值更改绑定(bind)数据，如何刷新绑定(bind)数据
我需要更改 Silverlight 中文本框的格式。数据通过 MVVM 绑定(bind)。例如，有一个 int 属性，我将 1 添加到 setter 中的值并调用 OnPropertyChanged
youtube - 通过 YouTube 数据 API 访问公共(public)数据，无需身份验证。
我想向 Youtube Data API 提出请求，但我不需要访问任何用户信息。我只想浏览公共(public)视频并根据搜索词显示视频。我可以在未经授权的情况下这样做吗？最佳答案 YouTube
python - 无法让 twilio 显示 'from' 数据，但它会显示 'to' 数据
我已经设置了一个 Twilio 应用程序，我想向人们发送更新，但我不想回复单个文本。我只是想让他们在有问题时打电话。我一切正常，但我想在发送文本时显示传入文本，以确保我不会错过任何问题。我正在使用 p
javascript - 向客户端发送 JSON 数据？ D3.js 渲染 JSON 数据
我有一个带有表单的网站(目前它是纯 HTML，但我们正在切换到 JQuery)。流程是这样的: 接受用户的输入 --- 5 个整数通过 REST 调用网络服务在服务器端运行一些计算...并生成一个
javascript - 如何检测一个 JavaScript 文件只包含 JSON 数据，还是打算包含 JSON 数据？
假设我们有一个名为 configuration.js 的文件，当我们查看内部时，我们会看到: 'use strict'; var profile = { "project": "%Projec
javascript - 在初始 .ajax 调用之外使用 JSON 数据 - 访问剩余的 JSON 数据
这部分是对 Previous Question 的扩展我的: 我现在可以从我的 CI Controller 成功返回 JSON 数据，它返回: {"results":[{"id":"1","Sourc
ios - 删除所有 Couchbase 数据/文档 ios(或删除所有 ios 数据？)
有什么有效的方法可以删除 ios 中 CBL 的所有文档存储？我对此有疑问，或者，如果有人知道如何从本质上使该应用程序像刚刚安装一样，那也会非常有帮助。我们正在努力确保我们的注销实际上将应用程序设置为
javascript - $.post(url, 函数(数据,状态) {警报(数据)});警报()不工作
我有一个 Rails 应用程序，它与其他 Rails 应用程序通信以进行数据插入。我使用 jQuery $.post 方法进行数据插入。对于插入，我的其他 Rails 应用程序显示 200 OK。但在
javascript - 断言错误 : expected { status: 'SUCCESS' , 数据 : [] } to equal { Object (status, 数据)}
我正在为服务于发布请求的 API 调用运行单元测试。我正在传递请求正文，并且必须将响应作为帐户数据返回。但我只收到断言错误注意:数据是从 Azure 中获取的 spec.js const accou

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 附加到表的数据被添加到一列而不是所有四列