个人中心
gpt4 book ai didi

javascript - 为什么表的 td node.appendChild 不起作用？

转载 作者：行者123 更新时间：2023-12-02 19:39:30 27 4
gpt4 key购买 nike

我有这个 JavaScript 函数来创建一个包含图像单元格的表格:

    function Draw(array) {
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];
        document.clear();

        // creates a <table> element and a <tbody> element
        var tbl = document.createElement("table");
        tbl.setAttribute("borderstyle", "1");
        var tblBody = document.createElement("tbody");

        // creating all cells
        for (var j = 0; j < 4; j++) {
            // creates a table row
            var row = document.createElement("tr");

            for (var i = 0; i < 4; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
                var cellText = document.createElement(array[4 * j + i]);
                cell.appendChild(cellText);
                row.appendChild(cell);
            }

            // add the row to the end of the table body
            tblBody.appendChild(row);
        }

        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");
    }

但在

var cellText = document.createElement(array[4 * j + i]);
cell.appendChild(cellText);
row.appendChild(cell);

cell.appendChild(cellText); 不起作用!我不知道为什么，也不知道如何解决!

更新a 数组是这样的:

    var a = Array(16);
    for (var i = 0; i < 16; i++) {
        a[i] = '<img src="' + i + '.jpg" />';
    }

最佳答案

更新答案

回复您的评论:

It just put a text. it means I see the text of <img src ... not the image!

如果您告诉我们 array[4 * j + i] 将会很有用包含标记(例如，在问题中包含一个示例)。

如果数组包含标记，您不想创建任何类型的新节点。相反，分配给 innerHTML表格单元格的:

cell.innerHTML = array[4 * j + i];
row.appendChild(cell);

当您分配给 innerHTML 时，浏览器解析标记并将相关内容添加到元素中。

<小时/>

原始答案在下面的评论之前和 array 之前给出的内容是:

要创建文本节点，请使用 createTextNode ，不是createElement 。所以:

// Change here ---------v
var cellText = document.createTextNode(array[4 * j + i]);
cell.appendChild(cellText);
row.appendChild(cell);

假设array[4 * j + i]是"Hi there" 。您的document.createElement(array[4 * j + i])调用要求 DOM 创建一个标签名称为 Hi there 的元素 ，正如document.createElement('div')那样要求它创建一个标签名称为 div 的元素.

关于javascript - 为什么表的 td node.appendChild 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10569935/

27 4 0
文章推荐： php - 如何检索文件名
文章推荐： javascript - CoffeeScript/JavaScript : why assign a letter to a variable that has a number assigned?
文章推荐： javascript - 在评估 javascript 时设置 this 指针
文章推荐： javascript - IE7 中的 Craftmap 问题
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com