jquery通过post到json数据进行添加到表格,出现双份数据表示无奈,求帮助

[ybjo50]

引用

    <script src="../scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            GetDataList();
            GetDataList();
        })

        function GetDataList() {
            alert($('#ttitle').html(' '));
            alert($('#tbody').html(''));
            $('#ttitle tr').remove();
            $('#ttitle tr td').remove();
            $('#tbody tr').remove();
            $('#tbody tr td').remove();
            $.post('getlist.ashx', {}, function (data) {
                var mytitle = $('<tr></tr>');
                //先添加首行列名
                $.each(data[0], function (i, value) {
                    mytitle.append($('<td></td>').append(i));
                })
                $('#ttitle').append(mytitle);
                $.each(data, function (i, value) {
                    var buff = $('<tr></tr>');
                    $.each(value, function (j, ivalue) {
                        if (j == 'addtime') {
                            $('<td></td>').append(ChangeDateFormat(ivalue)).appendTo(buff);
                        }
                        else {
                            $('<td></td>').append(ivalue).appendTo(buff);
                        }
                    })
                    $('#tbody').append(buff);
                });
            }, 'json')
        }


        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours();
            var mins = date.getMinutes();
            var seco = date.getSeconds();
            return date.getFullYear() + "-" + month + "-" + currentDate + ' / ' + hours + ':' + mins + ':' + seco;
        }
    </script>
    <table id="mytitle" class="table">
        <thead id="ttitle">

        </thead>
        <tbody id="tbody"></tbody>
    </table>

[slwsss]

GetDataList(); GetDataList(); 调用了两次 ---------------- $.post('getlist.ashx', {}, function (data) { //回调函数里先清掉之前的数据

[Go 旅城通票]

楼主麻烦你也认真看下别人的回复，你调用2次添加方法了，而且都是append添加的，当然出现2个重复的数据了

        $(function () {
            GetDataList();
            /////////////////////////GetDataList();//调用一次就行了
        })

[bigbird_561]

 $(function () {
            GetDataList();
            GetDataList();
        })

你这里调用两次，你不会粗来双份，那给你50份，你觉得合适么 你咋不这样玩呢

 $(function () {
            for(var i=0;i<Number.MAX_VALUE;i++){
            GetDataList();
        }
        })

[ybjo50]

    <script src="../scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            GetDataList();
            GetDataList();
        })

        function GetDataList() {
            alert($('#ttitle').html(' '));
            alert($('#tbody').html(''));
            $('#ttitle tr').remove();
            $('#ttitle tr td').remove();
            $('#tbody tr').remove();
            $('#tbody tr td').remove();
            $.post('getlist.ashx', {}, function (data) {
                var mytitle = $('<tr></tr>');
                //先添加首行列名
                $.each(data[0], function (i, value) {
                    mytitle.append($('<td></td>').append(i));
                })
                $('#ttitle').append(mytitle);
                $.each(data, function (i, value) {
                    var buff = $('<tr></tr>');
                    $.each(value, function (j, ivalue) {
                        if (j == 'addtime') {
                            $('<td></td>').append(ChangeDateFormat(ivalue)).appendTo(buff);
                        }
                        else {
                            $('<td></td>').append(ivalue).appendTo(buff);
                        }
                    })
                    $('#tbody').append(buff);
                });
                data = '';
            }, 'json')
        }


        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours();
            var mins = date.getMinutes();
            var seco = date.getSeconds();
            return date.getFullYear() + "-" + month + "-" + currentDate + ' / ' + hours + ':' + mins + ':' + seco;
        }
    </script>
</head>
<body>
    <table id="mytitle" class="table">
        <thead id="ttitle">

        </thead>
        <tbody id="tbody"></tbody>
    </table>
</body>

这样还是不行啊

[ybjo50]

引用 4 楼 showbo 的回复:

楼主麻烦你也认真看下别人的回复，你调用2次添加方法了，而且都是append添加的，当然出现2个重复的数据了

        $(function () {
            GetDataList();
            /////////////////////////GetDataList();//调用一次就行了
        })

兄弟对这个表进行增加删除修改需要二次更新列表而且我每次都清空了,           alert($('#ttitle').html(' '));
            alert($('#tbody').html(''));

[annghi]

应该是异步的问题，， 你两次调用的同一个方法都有 ajax， 所以，你在第一次调用GetDataList()且没此方法未执行完的时候，第二次调用的GetDataList()再次启动。 导致$('#tbody').html('')，$('#ttitle').html(' ')这些失效， 虽然都执行了，但是在执行的时候，他们本身还没有数据，就是说，第一次执行的哪个方法还没有把数据放上去。 所以会出现数据两次重复。

[冷酸灵。]

你同时调用了两次函数啊,所以可定会出现两次同样的数据 还有啊,清空原数据可以用empty(),不要用html('')啦~