如何在行之后插入消息?

时间:2014-02-12 04:34:53

标签: html ajax json

我有一些代码示例,我想知道如何对所有这些行进行编号,这样当我点击阅读按钮时,它会在与其关联的行的正下方打开一个框并显示消息。我真的不知道如何识别行并在正确的行之后显示消息。

var email;
$.getJSON("list.js", function(data) {
    console.log(data);
    email = data;
    // data is a JavaScript object now. Handle it as such

    var table = document.getElementById("start");

    for( var i = 0; i<email.length; i++)
    {
        var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        cell1.innerHTML = '<button id="' + email[i].ID + '">Read</button>';
        cell2.innerHTML = email[i].ID;
        cell3.innerHTML = email[i].Time;
        cell4.innerHTML = email[i].Subject;
    }

});

这就是我到目前为止,我被告知我可以通过我分配给它的id调用按钮并调用父节点的父节点并在其后插入一行但我似乎无法获得它在右边。有什么建议吗?

嗯,在大多数情况下,我接受了你的建议,我能够让它更好地工作,但我遇到了问题。

var email;
$.getJSON("list.js", function(data) {
console.log(data);
email = data;
// data is a JavaScript object now. Handle it as such

var table = document.getElementById("start");

for( var i = 0; i<email.length; i++)
{
var row = table.insertRow(i + 1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = '<button id="' + email[i].ID + '" onclick="getmessage(this.id)">Read</button>';
cell2.innerHTML = email[i].ID;
cell3.innerHTML = email[i].Time;
cell4.innerHTML = email[i].Subject;
}
 });

 var x;
 function getmessage(x)
{
var a = $("#" + x).parent().parent();
//debugger;
$.getJSON(x + ".js", function(data) {
debugger;
a.after('<tr><td colSpan = 4>' + x + ".js" + '</td></tr>');
})
};


 /*var x;
 function getmessage(x)
{
var a = $("#" + x).parent().parent();
a.after('<tr><td colSpan = 4>' + x + ".js" + '</td></tr>');
}   
*/

这是我到目前为止所得到的,但由于某种原因,当我发布此代码并对其进行测试时,之后才会显示列表的最后一个元素。我取消了.getJSON部分,他们都在按下按钮的行之后发出消息但是当我包含它时,我注意到所有文件都被正确调用但只有最后一行发布消息。代码有什么问题?

更新:我刚刚意识到它不接受大写字母的文件。那是为什么?

1 个答案:

答案 0 :(得分:0)

  var email;
$.getJSON("list.js", function(data) {
    console.log(data);
    email = data;
    // data is a JavaScript object now. Handle it as such

    var table = document.getElementById("start");

    for( var i = 0; i<email.length; i++)
    {
        var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);

        cell1.innerHTML = '<button class="readbutton" data-email="' + email[i].ID + '">Read</button>';
        cell2.innerHTML = email[i].ID;
        cell3.innerHTML = email[i].Time;
        cell4.innerHTML = email[i].Subject;
        var row2 = table.insertRow(1);
        var cell4 = row.insertCell(0);
        $(cell4).attr("colspan",3); 
        $(cell4).attr("dispaly","none");
        $(cell4).attr("id",email[i].ID+"_msg");
        cell4.innerHTML = email[i].message;
    }

});
and 
some where in your script
$(".readbutton").click(function(){
    $($(this).data("email")+"_msg").toggle();
});