Question

我使用ajax通过json从服务器填充表格数据。我想使用jquery动态创建HTML table行，每行必须包含html元素，如input type='text'和select下拉列表。我能够在列中创建文本框，但我无法在列中创建select下拉列表。这是我的js代码：

function loadFunction(){
    $.ajax({
        type : "GET",
        url  : "s3.do",
        data : "",
        success : function(data){
            alert("success");
            for(var i=0;i<data.length;i++){
            var ispSelect = $("<select></select>");
            var idProofSelect = $("<select></select>");
            var dataArr = data[i];
            var id = dataArr.id;
            var name = dataArr.name;
            var address = dataArr.address;
            var isp = dataArr.lsIsp;
            var idproof = dataArr.lsIdProof;
            $.each(isp,function(index,product){
                $("<option>").val(product.id).text(product.name).appendTo(ispSelect);
            });
            $.each(idproof,function(index,product){
                $("<option>").val(product.id).text(product.name).appendTo(idProofSelect);
            });
            $("#tab tr:last").after("<tr><td><input type='checkbox' value='"+id+"'/></td><td><input type='text' value='"+name+"'/></td>"
                    +"<td><input type='text' value='"+address+"' /></td>"
                    +"<td>"+ispSelect+"</td>"
                    +"<td>"+idProofSelect+"</td>"
                    +"</tr>");
            }
        },
        error   : function(XMLHttpRequest,textStatus,errorThrown){
            alert("error");
        }
    });
}

上面的代码在HTML表结构下创建，在ISP和ID-Proof列下我得到[Object Object]，而我希望它为我创建<select>个选项。我该如何解决这个问题。我对Jquery概念不是很流利。这是我正在尝试做的正确方法。

Answer 1

您将jQuery对象添加到字符串 - 这是错误的。尝试：

$("#tab tr:last").after("<tr><td><input type='checkbox' value='"+id+"'/></td><td><input type='text' value='"+name+"'/></td>"
                    +"<td><input type='text' value='"+address+"' /></td>"
                    +"<td>"+ispSelect[0].outerHTML+"</td>"
                    +"<td>"+idProofSelect[0].outerHTML+"</td>"
                    +"</tr>");
            }

Answer 2

执行"some string" + Object时 - 对象正在转换为字符串，这就是你得到[object Object]

的原因

您需要为每个<td>添加ID，然后附加选择框：

$("#tab tr:last").after("<tr><td><input type='checkbox' value='"+id+"'/></td><td><input type='text' value='"+name+"'/></td>"
                    +"<td><input type='text' value='"+address+"' /></td>"
                    +"<td id='ispSelect_'" + i + "></td>"
                    +"<td id='idProofSelect_'" + i + "></td>"
                    +"</tr>");
 $("#ispSelect_" + i).append(ispSelect);
 $("#idProofSelect_" + i).append(idProofSelect);

无法使用jquery在html表中添加select元素

2 个答案: