Question

所以我一直在尝试构建一个动态的html表。该表当前应具有的行数取决于用户音乐数据库中的歌曲数量。所以我创建了一个PHP方法来计算XML文件中的歌曲数量。我向你保证工作完美。 PHP方法返回一个数字。我将该号码发送到我的JavaScript代码，以便在html表中添加一行。希望这不会令人困惑......但它没有更新，我不知道为什么。请看一下我的代码。

JavaScript方法

    function addRow(s,a,n){
        document.write(n);
        var table =document.getElementById("myLibrary");
        //default is 1
        var NumOfRows =n;
        var row = table.insertRow(NumOfRows);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = s;
        cell2.innerHTML =a;
        cell3.innerHTML =  "<button onclick='deleteRow(this)'>delete</button>";
    }

php方法

$num=numOfSongs($u);
echo "<script> addRow('".$s."','".$a."','".$num."'); </script>";

Answer 1

这行代码：

table.insertRow(NumOfRows)

似乎假设insertRow（）接受一个参数来创建多行。不是这种情况。它需要一个参数来抵消行的插入（在你的情况下应该是-1以放在最后）。

http://www.w3schools.com/jsref/met_table_insertrow.asp

您需要创建一个循环n次的for循环。在每个循环中，您将创建一个新行并插入单元格和数据。

您的代码可能看起来像这样。

function addRow(s,a,n){
    document.write(n);
    var table = document.getElementById("myLibrary");
    //default is 1
    for (var i = 0; i < n; i++) {
        var row = table.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = s;
        cell2.innerHTML =a;
        cell3.innerHTML = "<button onclick='deleteRow(this)'>delete</button>";
    }
}

示例：https://jsfiddle.net/yqb6b2ar/

Answer 2

upate ##

braks是正确的“似乎假设insertRow（）接受一个参数来创建多行。事实并非如此。”虽然这段代码只是复制了同一行，这不是我想要的未来读者这个链接的帮助我太多了 http://www.w3schools.com/xml/xml_to_html.asp

动态地使用javascript将行添加到html表

JavaScript方法

php方法

2 个答案:

upate ##