Question

我的网页上有一个包含表格数据的区域。我试图在每行中添加值的内联编辑。我尝试过jqGrid，但它不能满足我的需求。所以，我正在尝试一个家庭酿造＆＃34;在线编辑的版本。我的表很简单：

<table>
    <tbody>
        <tr id="row0" onClick="changeMe(this);">
            <td>
                some value
            </td>
            <td>
                some other value
            </td>
            <td>
                ...
            </td>
        </tr>
        <tr id="rowN" onClick="changeMe(this);">
            <td>
                ...
            </td>
        </tr>
    </tbody>
</table>

当用户点击TR上的任何位置时，我希望我的JavaScript将所有静态文本更改为正确的表单输入。表单的前两个元素是选择框。在第二个框的选项可用之前，需要填写第一个框。以下是我用来实现此目的的一部分：

function changeMe(row){
    var serviceArray = ["option_1-1","option_1-2","option_1-3","option_1-4","option_1-5"]
    for(var i=0; i<2; i++){
        if(row.children[i].children.length == 0){
            var selectBox = document.createElement("select");
            var.setAttribute("id",serviceArray[i]);
            var.setAttribute("name",serviceArray[i]);

            switch(i){
                case 0:
                    $.getJSON("./dataGetter.php?qid=" + Math.random(),function(data){
                        $.each(data,function(key,value){
                            var option = document.createElement("option");
                            var innerValue = document.createTextNode(value);
                            option.appendChild(innerValue);
                            option.setAttribute("value",value);
                            selectBox.appendChild(option);
                        });
                    });
                    selectBox.setAttribute("onChange","someFunction(this.value)");
                    break;
                case 1:
                    selectBox.setAttribute("onChange","someOtherFunction(this.value)");
                    var option = document.createElement("option");
                    option.setAttribute("selected","selected");
                    option.setAttribute("disabled","disabled");
                    var textNode = document.createTextNode("\u2190 choose that first");
                    option.appendChild(textNode);
                    selectBox.appendChild(option);
                    break;
            }
            row.children[i].innerHTML = null;
            row.children[i].appendChild(selectBox);
        }
    }
}

这就是我的问题所在。当用户点击TR时，TR的子0（带有文本的TD）应转换为相应的选择框，并填充数据库中的相应数据。然而，这并没有发生。发生了什么，TR的孩子1（即第二个TD）是被转换的孩子。

正如测试一样，我在函数中添加了一个新的测试数组：

var testArray = new Array("option_2-1","option_2-2","option_2-3","option_2-4","option_2-5");

并将我的JavaScript更改为以下内容：

function changeMe(row){
    var serviceArray = ["option_1-1","option_1-2","option_1-3","option_1-4","option_1-5"];
    var testArray = new Array("option_2-1","option_2-2","option_2-3","option_2-4","option_2-5");
    for(var i=0; i<2; i++){
        if(row.children[i].children.length == 0){
            var selectBox = document.createElement("select");
            var.setAttribute("id",serviceArray[i]);
            var.setAttribute("name",serviceArray[i]);

            switch(i){
                case 0:
                    $.each(testArray,function(key,value){
                        var option = document.createElement("option");
                        var innerValue = document.createTextNode(value);
                        option.appendChild(innerValue);
                        option.setAttribute("value",value);
                        selectBox.appendChild(option);
                    });
                    selectBox.setAttribute("onChange","someFunction(this.value)");
                    break;
                case 1:
                    selectBox.setAttribute("onChange","someOtherFunction(this.value)");
                    var option = document.createElement("option");
                    option.setAttribute("selected","selected");
                    option.setAttribute("disabled","disabled");
                    var textNode = document.createTextNode("\u2190 choose that first");
                    option.appendChild(textNode);
                    selectBox.appendChild(option);
                    break;
            }
            row.children[i].innerHTML = null;
            row.children[i].appendChild(selectBox);
        }
    }
}

当我进行此更改时，TR的第一个TD（子0）将按原样更改。

当我直接浏览浏览器中的dataGetter.php页面时，我得到了正确的数据：

["option_2-1","option_2-2","option_2-3","option_2-4","option_2-5"]

我知道这是正确的数据，因为我放了一个＆＃34; alert（）;＆＃34;就在＆＃34; $。每个＆＃34;之后line，并在警告弹出窗口中显示正确的数据。

所以，我不确定这里发生了什么。它看起来像一行

$.getJSON("./dataGetter.php?qid=" + Math.random(),function(data){
}

搞乱我的switch语句，并用子0和子1数据填充第二个TD（子1）。它几乎就像＆＃34;休息＆＃34; in＆＃34; case 0＆＃34;正在被删除，所有的逻辑都落到了第二种情况。

更新：如果我添加了行＆＃34; alert（i）;＆＃34;在我的for循环之后，一切都按原样运行......除了恼人的弹出窗口。

Answer 1

对于所有感兴趣的人，我已经找到了问题所在。看来我的switch语句在AJAX返回之前完成了。所以，我设置＆＃34; async＆＃34;到＆＃34;假＆＃34;一切都很完美。

为什么这一小部分jQuery搞砸了我的其余JavaScript？

1 个答案: