Question

如果您只是想阅读问题，请跳到右下角。最重要的是上下文。不重要但可能有所帮助。

在html中使用表时，我意识到了一些事情。代码是可怕的，重复的和浪费的。可能因为我们手动添加数组。

<!-- 
<table border="4px" >
            <caption>
            Pet Table
            </caption>
            <tr> // Images
                <td>
                    <script>
                    display(bat)
                    </script>;
                </td>
                <td>
                    <script>
                    display(goat)
                    </script>               
                </td>
                <td>
                    <script>
                    display(butterfly)
                    </script>   
                </td>
                <td>
                    <script>
                    display(buzzard)
                    </script>   
                </td>
                <td>
                    <script>
                    display(breezie)
                    </script>   
                </td>
                <td>
                    <script>
                    display(turtle)
                    </script>   
                </td>
            </tr >
            <tr> // Names
                <td>
                    name
                </td>
                <td>
                    name
                </td>
                <td>
                    name
                </td>
                <td>
                    name
                </td>
                <td>
                    name
                </td>
                <td>
                    name
                </td>               
            </tr>
            <tr> //Desc
                <td>
                    desc
                </td>
                <td>
                    desc
                </td>
                <td>
                    desc
                </td>
                <td>
                    desc
                </td>
                <td>
                    desc
                </td>
                <td>
                    desc
                </td>               
            </tr>
            <tr> //Food
                <td>
                    food
                </td>
                <td>
                    food
                </td>
                <td>
                    food
                </td>
                <td>
                    food
                </td>
                <td>
                    food
                </td>
                <td>
                    food
                </td>               
            </tr>
            <tr> //button
                <td>
                    button
                </td>
                <td>
                    button
                </td>
                <td>
                    button
                </td>
                <td>
                    button
                </td>
                <td>
                    button
                </td>
                <td>
                    button
                </td>               

        </table>
 -->

这导致我花了早上理论并尝试从javaScript动态创建表。

这是我想出的代码。

在JavaScript中（*编辑添加的宠物阵列）

function pet(species, name, colour, size, food, limb, img) {
    this.species = species; //property of a pet
    this.name = name; //property of a pet
    this.colour = colour; //property of a pet
    this.size = size; //property of a pet
    this.food = food; //property of a pet
    this.limb = limb; //property of a pet
    this.img = img; //property of a pet         
    this.move = move; //a function of a pet defined to the pet      

    var bat = new pet("fruit bat", "bats", "grey", "small", "apples", "wings", "1", move);
    var goat = new pet("goat", "bastard", "off white", "goat-sized", "clothing", "hooves", "2", move);
    var butterfly = new pet("butterfly", "flutterby", "rainbow", "petite", "nectar", "wings", "3", move);
    var buzzard = new pet("buzzard", "Buzz", "molted black and white", "bigish", "carrion", "wings", "4", move);
    var breezie = new pet("pixie", "petty", "blue", "tiny", "souls", "wings", "5", move);
    var turtle = new pet("tortoise", "Tank", "Green", "smoothbacked", "lettuce", "legs", "6", move);

    var len = pet.length;

    function buildTable() {
        document.getElementById("work");
        //i is a counter, f is a flag   
        var f = 0;
        while (f = 0) {
            document.write("<table border='4px'>" + "</br>");
            document.write("<caption>Pets Avaliable</caption>" + "</br>");
            document.write("<tr>" + "</br>");
            for (i = 0; i <= len; i++) {
                document.write("<td>" + imgArray[i].outerHTML + "</td>" + "</br>");
            }
            document.write("</tr>" + "</br>");
            document.write("<tr>" + "</br>");
            for (i = 0; i <= len; i++) {
                document.write("<td>" + pet[i].species + "</td> " + "</br>");
            }
            document.write("</tr>" + "</br>");
            document.write("<tr>" + "</br>");
            for (i = 0; i <= len; i++) {
                document.write("<td>" + pet[i].name + "</td>" + "</br>");
            }
            document.write("</tr>" + "</br>");
            document.write("<tr>" + "</br>");
            for (i = 0; i <= len; i++) {
                document.write("<td>" + pet[i].colour + "</td> " + "</br>");
            }
            document.write("</tr>" + "</br>");
            document.write("<tr>" + "</br>");
            for (i = 0; i <= len; i++) {
                document.write("<td>" + pet[i].size + "</td>" + "</br>");
            }
            document.write("</tr>" + "</br>");
            document.write("<tr>" + "</br>");
            for (i = 0; i <= len; i++) {
                document.write("<td>" + pet[i].food + "</td>" + "</br>");
            }
            document.write("</tr>" + "</br>");
            document.write("</table>" + "</br>");
            f = 1;
        }

    }
    document.getElementById("please");

HTML

<button id="please" onclick="buildTable(pet)"> Work you blighter </button>
<p id="work"></p>

我无法让它发挥作用。控制台显示没有错误，但按钮没有提供任何结果。经过一段时间的挖掘，我确实遇到了一个有效的按钮。（我将.innerHTML = "The button is working"添加到document.getElementById("work")以便对其进行测试。）所以按钮没问题。因此问题必须在功能本身吗？血腥吧。我知道这是错的，明天我会再次使用类似的代码来试试这些帖子 Dynamically creating a table in javascript /
http://jsfiddle.net/ahEkH/1/ 和 Create vertical column table based on Array of Objects 我不介意回答问题，也不会试错，但我的吊袜带是什么让我无法弄清问题是什么。了解代码是如何工作的很好，但我想知道它为什么会这样运作。

问题

为什么控制台和调试器无法找到任何错误，但页面显然无效。
我将来如何标记这类问题？有什么问题？按钮？功能？都？都不是？自己？
我打算以垂直列格式而不是水平格式制作表格。这会有问题吗？（我正在考虑更多的循环应该可以毫不费力地做到这一点）
我想使用预先构造的数组作为数据源（例如pet[i].size但是这会有效还是将数组拆分为变量更好功能
如果我确实需要为所有数据创建变量，我是否能够回收或重用变量，如果它在其中一个循环中？
在http://jsfiddle.net/ahEkH/1/中，为什么"tbdy"是标签的子级或appendChild用于将{34} tbdy"分配给tab？< / p>

我现在知道如何修复动态表，但我一开始并不知道具体是什么问题。请与我们分享您的知识。

Answer 1

您的代码中有一些内容。

while(f=0){将始终评估为0，因此为false。你可能想要while(f === 0) {（是的，三重===）。这导致＆＃34;我在控制台中看不到任何东西＆＃34;问题，因为代码实际上（正如您所怀疑的那样）工作，尽管并不像您期望的那样。
您的每个循环都有for(i = 0; i <= len; i++)，其中var len = pet.length;您将获得一个超出范围的索引，您可能希望更改为for(i = 0; i < len; i++)。

最后：

您可能不想使用document.write。第一个document.write调用将清除文档并将其替换为您的表。你最好使用document.createElement和朋友来做DOM操作（根据你发布的jsfiddles）。如果你走这条路，你会比使用像jQuery这样的库好得多，你最终会得到这样的东西：

＆＃13;

//
// Dummy data to make the sample work.
//
var imgArray = [
	{outerHTML: '1.jpg'}
,	{outerHTML: '2.jpg'}
,	{outerHTML: '3.jpg'}
,	{outerHTML: '4.jpg'}
];

var pet = [
	{species: 'species1', name: 'name1', colour: 'colour1', size: 'size1', food: 'food1'}
,	{species: 'species2', name: 'name2', colour: 'colour2', size: 'size2', food: 'food2'}
,	{species: 'species3', name: 'name3', colour: 'colour3', size: 'size3', food: 'food3'}
,	{species: 'species4', name: 'name4', colour: 'colour4', size: 'size4', food: 'food4'}
];

var attributes = $.map(pet[0], function(n, v) { return v; });

function generateTable(id) {
    var $table = $(id);
    var $tbody = $('<tbody></tbody>');
        
    $table.append($tbody);
        
    // the images
    var $tr = $('<tr />');
    $.each(imgArray, function (ignored, image) {
        $tr.append($('<td />').html(image.outerHTML));
    });
    $tbody.append($tr);
        
    $.each(attributes, function (ignored, attribute) {
        $tr = $('<tr />');
        $.each(pet, function (i, p) {
            // i == index, p == pet[i]
            $tr.append($('<td />').text(p[attribute]));
        });
        $tbody.append($tr);
    });
}

$(function () {
    $('#generateTable').click(function () {
        generateTable('#tableHere');
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="generateTable">Generate table</button>
<div id="tableHere"></div>

＆＃13;

希望有所帮助。

Answer 2

为什么控制台和调试器无法找到任何错误，但页面显然无效。

代码中没有错误，它只是没有，你想要它做什么。

将来如何标记这类问题？有什么问题？按钮？功能？都？都不是？自己？

有一些严重的错误，很难指出一个决定。

我打算以垂直列格式而不是水平格式制作表格。这会有问题吗？（我正在考虑更多的循环应该不用大惊小怪）

使其水平可能更容易。

我想使用预先构造的数组作为数据源（例如pet [i] .size但是这会有效还是将数组拆分成函数中的变量会更好？

如果您打算使用它几次，最好为pet[i]创建一个变量。如果你的意思是为大小，名称等制作单独的表格 - 不，没有必要。

如果我确实需要为所有数据创建变量，我是否可以回收或重用变量，如果它在一个循环中？

我不确定你是什么意思，但可能回答是肯定的。在javascript中，变量是函数的局部变量，并且一个函数内的所有循环，ifs等使用相同的变量。

在http://jsfiddle.net/ahEkH/1/中，为什么“tbdy”是制表符的子节点，或者是appendChild用于将“tbdy”分配给制表符？

tbdy是表格元素tab的子元素，这意味着它位于其中。

好的，现在您的代码出现了问题：

while内的代码永远不会执行。在条件中，您具有作业f=0而非等同检查f==0（或更好f===0）。 f=0的值为0，因此为false。而且，如果您希望它只执行一次，则根本不需要循环。

document.write

onclick无法正常工作。 document.write在<script>标记中直接调用时几乎完全有意义，一般应该避免使用。
您对document.getElementById的来电只会返回被遗忘的对象 - 它们没有任何效果。
您使用参数buildTable调用pet，但buildTable不接受任何参数（现在这不是一个大问题，因为pet似乎是全局变量，但这可能会产生误导。）
您不会将i声明为局部变量，因此它是全局变量。它会起作用，但是容易出错。
将<br>标记置于<table>内没有任何意义且不正确，</br>（正如您所写）isn't even legal tag。您可能希望在其中添加换行符（\n），但不需要它，您不必单独使用html标记。
您的代码非常重复，有许多几乎相同的for循环。
缩进你的代码，它会使它更好阅读。

使用类似于你的方法的可能解决方案（从字符串逐段构建html）：

（使用前（不推荐），请仔细阅读以下注释）

var pet = [
    {
        species: 'species1',
        name: 'name1',
        colour: 'colour1',
        size: 'size1',
    },
    {
        species: 'species2',
        name: 'name2',
        colour: 'colour2',
        size: 'size2',
    },
];

function makeTr(pet, attrName) {
    var html = '',
        i;

    html += "<tr>";
    for (i = 0; i < pet.length; ++i) {
        html += "<td>" + pet[i][attrName] + "</td>";
    }
    html += "</tr>";
    return html;
}

function buildTable(pet) {
    var html='';

    html += "<table border='4px'>";
    html += "<caption>Pets Avaliable</caption>";

    html += makeTr(pet, "species");
    html += makeTr(pet, "name");
    html += makeTr(pet, "colour");
    html += makeTr(pet, "size");

    html += "</table>"

    document.getElementById("work").innerHTML = html;
}

(jsfiddle)

请注意，它远非最佳解决方案，并且手动输入html 原则上可能被认为是坏的（虽然它可能会更快一些在某些情况下可能是合理的）。一般来说，用html标签创建 document.createElement似乎更干净，更不容易出错。具体来说，上面的代码可能会受到XSS攻击，因为放入html的值没有被清理。 Paul的解决方案不受此问题的影响 - 请注意使用text()方法，该方法可以转义html代码。

使用数组在Javascript中创建垂直动态表

2 个答案:

好的，现在您的代码出现了问题：

使用类似于你的方法的可能解决方案（从字符串逐段构建html）：