繁体   English   中英

无法使用jQuery在HTML表中添加选择元素

[英]unable to add select element in html table using jquery

我正在使用json通过ajax从服务器填充表格数据。 我想使用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概念。 这是我尝试做的正确方法。

在此处输入图片说明

您将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>");
            }

当您执行"some string" + Object -对象正被转换为字符串时,这就是为什么要获得[object Object]

您需要将ID添加到每个<td> ,然后附加选择框:

$("#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);  

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM