table无法添加新行而ul可以

kdas00 2012-08-09 10:45:21

我刚刚初学ajax，便试着做一个无刷新评论，但是评论内容无法动态添加到table中，同样的方法却可以添加到ul中。。。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $.post("pinglun.ashx", { "id": "id" }, function (s1, s2) {

                if (s2 == "success") {

                    var ss1 = s1.split(",");

                    for (var i = 0; i < ss1.length; i++) {

                        var sh1 = ss1[i].split("|");

                        var name = sh1[0];

                        var review = sh1[1];

                        var li1 = $('<li>昵称：' + name + '——评论：' + review + '</li>');

                        $("#ul1").append(li1);

                        var tr = $('<tr><td>' + name + '</td><td>' + review + '</td></tr>');

                        $("#table1").append(tr);

                    }

                }

                else {

                    alert("ajax错误");

                }

            });

            $("#btn1").click(function () {

                var name = $("#txt1").val();

                var review = $("#txt2").text();

                var li1 = $('<li>昵称：' + name + '——评论：' + review + '</li>');

                $("#ul1").append(li1);

                var tr = $("<tr><td>" + name + "</td><td>" + review + "</td></tr>");

                $("#table1").append(tr);

                $.post("pinglun.ashx", { "id": "1", "name": name, "review": review }, function (data, txtstatus) {

                    if (txtstatus == "success") {

                        var sh1 = data.split("|");

                        var name1 = sh1[0];

                        var review1 = sh1[1];



                    }

                    else {

                        alert("ajax错误！");

                    }

                });

                $("#btn1").hide();

                setTimeout(function () {

                    $("#btn1").show()

                }, 5000);

            });

        });

    </script>

</head>

<body>

<table id="tabl1">

<tr><td>昵称</td><td>评论</td></tr>

</table>

<ul id="ul1"></ul>

昵称：<input type="text" id="txt1" />



评论：<textarea id="txt2" cols="30" rows="5"></textarea>

<br /><input type="button" value="评论" id="btn1" />

</body>

</html>