javascript - 在表中加载表 - jquery

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 load

<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/

UPDATE [在表上点击隐藏并保留旧数据]

$(".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/