在json jquery操作中选择

时间:2014-04-17 15:58:39

标签: javascript jquery json

我正在尝试使用jquery

将数据添加到表中
$(document).ready(function () {
        $('#imgprogress').show();
        var url = 'DocumentsList';  //definitly it was writtern as Url.Action
        var tr;
        $.get(url, null, function (data) {
            $.each(data, function (i, item) {
                tr = $('<tr>');
                tr.append("<td width='10%'>" + item.id + "</td>");
                tr.append("<td>")
                if (item.status == "") {
                    tr.append("<select><option value='' selected></option>")
                }
                else {
                    tr.append("<select><option value=''></option>")
                }

                if (item.status == "Stored in London") {
                    tr.append("<option value='Stored in London' selected>Stored in London</option>")
                }
                else {
                    tr.append("<option value='Stored in London'>Stored in London</option>")
                }
                if (item.status == "Sent to Institution") {
                    tr.append("<option value='Sent to Institution'  selected>Sent to Institution</option>")
                }
                else {
                    tr.append("<option value='Sent to Institution'>Sent to Institution</option>")
                }
                if (item.status == "Destroyed") {
                    tr.append("<option value='Destroyed' selected>Destroyed</option>")
                }
                else {
                    tr.append("<option value='Destroyed'>Destroyed</option>")
                }
                if (item.status == "Post to London") {
                    tr.append("<option value='Post to London'  selected>Post to London</option>")
                }
                else {
                    tr.append("<option value='Post to London'>Post to London</option>")
                }
                if (item.status == "Returned to client") {
                    tr.append("<option value='Returned to client' selected>Returned to client</option>")
                }
                else {
                    tr.append("<option value='Returned to client'>Returned to client</option>")
                }
                if (item.status == "Post to Richmond") {
                    tr.append("<option value='Post to Richmond' selected>Post to Richmond</option></select>")
                }
                else {
                    tr.append("<option value='Post to Richmond'>Post to Richmond</option></select>")
                }
                tr.append("</td>");
                tr.append("</tr>");
                $('#tblClientDocument').append(tr);
            });
        });
    });

以上似乎没有用,有人可以帮助我吗?

我有一个表定义,我试图从json中的结果中插入每一行,创建和外部的选项。我不明白为什么

输出(单排)

<tr class="odd"><td width="10%" class=" sorting_1">8206</td><td class=" "></td><select><option value=""></option></select><option value="Stored in London" selected="">Stored in London</option><option value="Sent to Institution">Sent to Institution</option><option value="Destroyed">Destroyed</option><option value="Post to London">Post to London</option><option value="Returned to client">Returned to client</option><option value="Post to Richmond">Post to Richmond</option><td class=" ">Certified copy of SSE bill</td><td class=" "></td><td class=" "></td><td class=" ">Utility Bill / Statement</td><td class=" ">22/11/2013 00:00:00</td></tr>

2 个答案:

答案 0 :(得分:1)

可能是因为您追加的数据无效html。

我会尝试将html元素分开:

        tr = $('<tr/>');
        tr.append("<td width='10%'>" + item.id + "</td>");
        td = $("<td/>");
        select = $("<select/>");
        if (item.status == "") {
            select.append("<option value='' selected></option>")
        }
        else {
            select.append("<option value=''></option>")
        }

        ...

        if (item.status == "Post to Richmond") {
            select.append("<option value='Post to Richmond' selected>Post to Richmond</option>")
        }
        else {
            select.append("<option value='Post to Richmond'>Post to Richmond</option>")
        }
        td.append(select);
        tr.append(td);
        $('#tblClientDocument').append(tr);

答案 1 :(得分:-1)

查看评论部分

$(document).ready(function () {

$('#imgprogress').show();
var url = 'DocumentsList';  //definitly it was writtern as Url.Action
var tr;
$.get(url, null, function (data) {
    $.each(data, function (i, item) {
        tr = $('<tr>');
        tr.append("<td width='10%'>" + item.id + "</td>");
        tr.append("<td>")
        if (item.status == "") {
            tr.append("<select><option value='' selected></option>")
        }
        else {
            tr.append("<select><option value=''></option>")
        }


        // also you do not append the options as children of the select but as siblings of them which wont work


        if (item.status == "Stored in London") {
            tr.append("<option value='Stored in London' selected>Stored in London</option>")
        }
        else {
            tr.append("<option value='Stored in London'>Stored in London</option>")
        }
        if (item.status == "Sent to Institution") {
            tr.append("<option value='Sent to Institution'  selected>Sent to Institution</option>")
        }
        else {
            tr.append("<option value='Sent to Institution'>Sent to Institution</option>")
        }
        if (item.status == "Destroyed") {
            tr.append("<option value='Destroyed' selected>Destroyed</option>")
        }
        else {
            tr.append("<option value='Destroyed'>Destroyed</option>")
        }
        if (item.status == "Post to London") {
            tr.append("<option value='Post to London'  selected>Post to London</option>")
        }
        else {
            tr.append("<option value='Post to London'>Post to London</option>")
        }
        if (item.status == "Returned to client") {
            tr.append("<option value='Returned to client' selected>Returned to client</option>")
        }
        else {
            tr.append("<option value='Returned to client'>Returned to client</option>")
        }
        if (item.status == "Post to Richmond") {
            tr.append("<option value='Post to Richmond' selected>Post to Richmond</option></select>")
        }
        else {
            tr.append("<option value='Post to Richmond'>Post to Richmond</option></select>")
        }
        tr.append("</td>");
        tr.append("</tr>");
        $('#tblClientDocument').append(tr);
    });
});
});