Question

我正在尝试编写一个应用程序，让人们在最终幻想XIV MMO中跟踪他们的捕鱼结果。您选择不同类型的鱼和诱饵，应用程序会生成一个输入字段矩阵，以记录鱼咬什么诱饵，结果最终在数据库中编译。

我开始使用一些PHP脚本来简单地为鱼和鱼饵调出一些示例JSON，写下面的内容，它似乎生成了表格。但是，我希望用户可以随意添加新的鱼和诱饵，因此我在底部添加了几个手动调用addFish()和addBait()，发现这些不起作用。

即使getJSON()来电被注释掉，手动通话似乎也无效。我尝试改变通话的顺序，以防我的某个功能出现问题，但仍然没有。

有人能够发现为什么这些调用没有将字段添加到表中的原因吗？

诱饵由标题单元格的ID定义。
鱼是由行的ID定义的。
添加一条新鱼抓住诱饵ID并在表格中附加一行。
添加新诱饵会在标题行和每个Fish行附加一个新单元格。

如果我能提供任何其他信息，请告诉我。

来源：

<html>
<head>
    <title>Thing!</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        function genCell(fid, bid) {
            cellid = "matrix-"+fid+"-"+bid
            infield = "<input class='fishnum' type='text' name='"+cellid+"' />"
            return "<td class='fishnum' id='"+cellid+"'>"+infield+"</td>"
        }
        function addFish(id, name) {
            console.log('addFish: '+id+','+name)
            baits = []
            $("#fishtable").find("td[id|='bait']").each(function(){
                baitid = $(this).attr('id').split('-')[1]
                cellid = "matrix-"+id+"-"+baitid
                baits[baits.length] = genCell(id, baitid)
            })
            $("#fishtable").append(
                "<tr id='fish-"+id+"'><td><p class='sidelabel'>"+name+"</p></td>"+baits.join('')+"</tr>")
        }
        function addBait(id, name) {
            console.log('addBait: '+id+','+name)
            $("#fishtableheader").append("<td id='bait-"+id+"'><p class='toplabel'>"+name+"</p></td>")
            $("#fishtable").find("tr[id|='fish']").each(function(){
                fishid = $(this).attr('id').split('-')[1]
                cellid = "matrix-"+fishid+"-"+id
                $(this).append(genCell(fishid, id))
            })
        }

        // these will generate the table just fine
        $.getJSON("api/v1/bait.php", function(data){
            $.each(data, function(key,val) {
                addBait(key, val['name'])
            })
        })
        $.getJSON("api/v1/fish.php", function(data){
            $.each(data, function(key,val) {
                addFish(key, val['name'])
            })
        })
        // these do nothing
        addBait(5, 'Spinning Lure')
        addBait(7, 'Chocobo Fly')
        addFish(4, 'Lamprey')
        addFish(6, 'Plaguefish')

    </script>
</head>
<body>
<h1>Test Page</h1>
<table id="fishtable" class="fishtable">
    <tr id="fishtableheader"><td>&nbsp;</td></tr>
</table>
<h2>Debug</h2>
<pre id="debug"></pre>
</body>
</html>

来自DOM源的生成表：

<table id="fishtable" class="fishtable"><tbody>
    <tr id="fishtableheader"><td>&nbsp;</td><td id="bait-1"><p class="toplabel">Crab Ball</p></td><td id="bait-2"><p class="toplabel">Goby Ball</p></td><td id="bait-3"><p class="toplabel">Bass Ball</p></td></tr>
    <tr id="fish-1"><td><p class="sidelabel">Moat Carp</p></td><td class="fishnum" id="matrix-1-1"><input class="fishnum" name="matrix-1-1" type="text"></td><td class="fishnum" id="matrix-1-2"><input class="fishnum" name="matrix-1-2" type="text"></td><td class="fishnum" id="matrix-1-3"><input class="fishnum" name="matrix-1-3" type="text"></td></tr>
    <tr id="fish-2"><td><p class="sidelabel">Rainbow Trout</p></td><td class="fishnum" id="matrix-2-1"><input class="fishnum" name="matrix-2-1" type="text"></td><td class="fishnum" id="matrix-2-2"><input class="fishnum" name="matrix-2-2" type="text"></td><td class="fishnum" id="matrix-2-3"><input class="fishnum" name="matrix-2-3" type="text"></td></tr>
    <tr id="fish-3"><td><p class="sidelabel">Spotted Pleco</p></td><td class="fishnum" id="matrix-3-1"><input class="fishnum" name="matrix-3-1" type="text"></td><td class="fishnum" id="matrix-3-2"><input class="fishnum" name="matrix-3-2" type="text"></td><td class="fishnum" id="matrix-3-3"><input class="fishnum" name="matrix-3-3" type="text"></td></tr>
</tbody></table>

控制台日志：

addBait: 5,Spinning Lure
addBait: 7,Chocobo Fly
addFish: 4,Lamprey
addFish: 6,Plaguefish
addBait: 1,Crab Ball
addBait: 2,Goby Ball
addBait: 3,Bass Ball
addFish: 1,Moat Carp
addFish: 2,Rainbow Trout
addFish: 3,Spotted Pleco

Answer 1

看到@ james-montagne和@ seano666似乎没有遇到麻烦在JSfiddle中进行这项工作我做了一些进一步的测试，发现问题似乎是我的代码试图运行：

在DOM完全加载之前。
偶尔加载JQuery之前。

基于我的谷歌搜索，我的代码因此似乎解决了这个问题：

    $(document).ready(function(){
        console.log("hello world")
        $.getJSON("api/v1/bait.php", function(data){
            $.each(data, function(key,val) {
                addBait(key, val['name'])
            })
        })

        $.getJSON("api/v1/fish.php", function(data){
            $.each(data, function(key,val) {
                addFish(key, val['name'])
            })
        })
        addBait(5, 'Spinning Lure')
        addBait(7, 'Chocobo Fly')
        addFish(4, 'Lamprey')
        addFish(6, 'Plaguefish')
    })

表没有在getJSON（）之外修改

1 个答案: