使用append()添加表行,并使用jEditable对其进行编辑

时间:2013-05-27 12:05:47

标签: jquery json jeditable

所以我有表格内容加载了json

$(document).ready(function () {
    $(".click").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", {
        indicator : "<img src='img/indicator.gif'>",
        tooltip   : "Click to edit...",
        style  : "inherit"
    });

    $.getJSON('../ajax/ajax_get_data.php', function(data) {
        $.each(data.split, function(i) {
            $('.wk_skile_table > tbody:last').append('<tr><td class="click">'+i+'</b></td><td>'+this.row1+'</td><td>'+this.row2+'</td><td>'+this.split+'</td><td>'+this.orange_start+'</td><td>'+this.red_start+'</td><td>'+this.blinking+'</td>');

            //or add dynamically 
            $("td").each(function() {
                $(this).addClass("click");
            });
        });

        $.each(data.aux, function(i) {
            $('.wk_aux_table > tbody:last').append('<tr><td>'+i+'</td><td>'+this.row1+'</td><td>'+this.row2+'</td><td>'+this.orange_start+'</td><td>'+this.red_start+'</td><td>'+this.blinking+'</td>');
        });
    });
});

但是当我使用append()时它不起作用:\

你有任何想法如何解决它?

更新 以下是示例http://jsfiddle.net/f33Fs/

问题在于,jeditable'没有看到'.click类。我将代码更改为

$("th").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", {
    indicator : "<img src='img/indicator.gif'>",
    tooltip   : "Click to edit...",
    style  : "inherit"
});

并且适用于html(它写在HTML文件中)。但对于由append()函数添加到表中的td

    $("td").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", {
        indicator : "<img src='img/indicator.gif'>",
        tooltip   : "Click to edit...",
        style  : "inherit"
    });
 does not work...

2 个答案:

答案 0 :(得分:0)

我终于搞清楚了

$(document).ready(function () {

    $.ajax({
        url: '../ajax/ajax_get_data.php',
        async: false,
        dataType: 'json',
        success: function(data) {
        $.each(data.split, function(i) {
            // 'this' is the value of the object item
            // key is the map/object key, value is value
            $('.wk_skile_table > tbody:last').append('<tr><td>'+i+'</b></td><td>'+this.row1+'</td><td>'+this.row2+'</td><td>'+this.split+'</td><td>'+this.orange_start+'</td><td>'+this.red_start+'</td><td>'+this.blinking+'</td>');

        });

        $.each(data.aux, function(i) {
            // 'this' is the value of the object item
            // key is the map/object key, value is value
            $('.wk_aux_table > tbody:last').append('<tr><td>'+i+'</td><td>'+this.row1+'</td><td>'+this.row2+'</td><td>'+this.orange_start+'</td><td>'+this.red_start+'</td><td>'+this.blinking+'</td>');
        });
        }
    });

    $("td").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", {
        indicator : "<img src='img/indicator.gif'>",
        tooltip   : "Click to edit...",
        style  : "inherit"
    }); 
});

可能是getJSON是问题,因为脚本是异步的。使用此脚本,一切正常。

答案 1 :(得分:-1)

更新:

我在追加后移动了jeditable init,它现在可以工作了:)