Question

<table border="2" class="table">
    <tr> <td class="clicked">aaa </td> <td class="clicked">bbb </td> </tr>
    <tr> <td class="clicked">ccc </td> <td class="clicked">ddd </td> </tr>
</table>

<table border="2" class="tablehide">
    <tr> <td> 111</td> </tr>
</table>



.table td {
    width: 50px;
    height: 50px
}

.tablehide td {
    width: 25px;
    height: 50px;
    display:none;
}


$(".clicked").live('click', function() {
    $(this).load($('.tablehide'))
    });

直播示例： http://jsfiddle.net/5neff/2/

我想：如果我点击例如bbb然后点击 bbb 加载

<table border="2" class="tablehide">
    <tr> <td> 111</td> </tr>
    <tr> <td> 222</td> </tr>
</table>

Answer 1

将您的jquery更改为以下内容：

$(".clicked").live('click', function() {
    $(this).html($('.tablehide'));
    $('.tablehide td').show();
});

直播链接：http://jsfiddle.net/5neff/3/

或者您可以使用.clone()：

克隆它以制作重复项

$(".clicked").live('click', function() {
    $(this).html($('.tablehide:last').clone());
    $('.tablehide:not(:last) td').show();
});

直播链接：http://jsfiddle.net/5neff/4/

基本上发生的是，将当前点击的项目的html设置为隐藏的表格，然后使表格中的html可见。

更新[保留旧数据]

$(".clicked").live('click', function() {
    $(".clicked").find('div:first').show();
    $(this).wrapInner('<div class="hide">');
    $(this).find('div:first').hide()
    $(this).prepend($('.tablehide'));
    $('.tablehide td').show();
});

直播链接：http://jsfiddle.net/5neff/7/

更新[在表格中点击隐藏并保留旧数据]

$(".clicked").live('click', function() {
    $(".clicked .tablehide").remove();
    $(".clicked").find('div:first').show();
    $(this).wrapInner('<div class="hide">');
    $(this).find('div:first').hide()
    $(this).prepend($('.tablehide:last').clone());
    $('.clicked .tablehide td').show();
});


$(".tablehide").live('mouseup', function() {
    $(".clicked .tablehide").remove();
    $(".clicked div.hide").show();
});

直播链接：http://jsfiddle.net/5neff/8/

Answer 2

使用类似的东西：

$(".clicked").live('click', function() {
    $(this).html($('.tablehide').html())
});

load用于从服务器加载数据，而不是操纵当前加载的文档。

以上是上述代码的working example。

Answer 3

将您的JS更改为

$(".clicked").live('click',function(){
    $(this).html($('.tablehide').html());
});

.load()函数是加载数据（JSON等...用于Ajax）或绑定事件处理程序，而不是从元素中获取html。

Answer 4

或者更好（最短版本）：

$(".clicked").live('click', function() {
    $(this).html($('.tablehide').show().html());
});

Answer 5

检查更新的解决方案

http://jsfiddle.net/5neff/6/

 $('.clicked').each(function() {
    $(this).click(function() {
        htmlVal = $('.tablehide')[0].outerHTML;
        $(this).html(htmlVal);
        $(this).find(".tablehide").css("display","block");
        $(this).find(".tablehide td").css("display","block");
    });
  });

在表中加载表 - jquery

5 个答案: