Question

我有一个包含多行的表，每行有5列在其中一列中，有一个可点击的图标。单击此图标后，我想用一个跨越所有5列的新列替换该行中的所有列（td）。
这将允许图标（图像）使用整个表格宽度。

到目前为止，我有这个：

/*  CSS  (less)  */
    .img { img { width:100%; } }


/*  javascript  */
$(function(){
    $('.dynochart').click(function(){
        var img_src = $(this).attr('src');  //  save image url
        var tr = $(this).parents('tr');  //  this row
        var tr_tds = $(this).parents('tr').children('td');  //  all columns within this row
        tr_tds.remove();  //  remove all columns from this row
        tr.append('<td colspan="5" class="img"><img src="'+img_src+'" class="dynochart_full"></td>');  //  insert new column with image spanning all columns
    });
});


/*  HTML  */
<table>
    <tr>
        <td>...</td>
        <td>...</td>
        <td class="img"><img src="..." class="dynochart"></td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

当点击图标（.dynochart）时，它会删除所有列，并插入一个新的列，其中的图像跨越整个可用的表格宽度：

<tr>
    <td colspan="5" class="img"><img src="..." class="dynochart_full"></td>
</tr>

到目前为止，这么好。它有效。
但现在，当我点击这个全尺寸图像时，我想将它恢复到正常状态。所以我认为可以这样做：

$(function(){
    $('.dynochart_full').click(function(){
        console.log('was clicked');
        var img_src = $(this).attr('src');  //  save image url
        var tr = $(this).parents('tr');  //  this row
        var tr_tds = $(this).parents('tr').children('td');  //  all columns within this row
        tr_tds.remove();
        /**
         *  retrive the orginale data columns
         */
    });
});

但事实证明这种方法不起作用。单击.dynochart_full - 图像时没有任何反应。 console.log没有发现任何内容......

完成我想要做的事的其他任何方式？这是一个jsfiddle：http://jsfiddle.net/jLetyz9z/1/

Answer 1

<强> Working Demo

切换tds并添加大图像（如果不存在）。该页面呈现为好像隐藏的tds不存在，因此colspan仅适用于可见的tds。

同样将同一事件绑定到.bigimage（但是因为它们是动态创建的，我们必须委托）。

$(function(){
    $(document).on('click', '.dynochart, .bigimage', function(){
        // this isn't used // var tr = $(this).parents('tr');  //  this row
        var tr_tds = $(this).parents('tr').children('td');  //  all columns within this row
        tr_tds.toggle();  //  toggle visibility of all columns from this row

        // if this is the image (dynochart) do extra stuff
        if (this.tagName == 'IMG'){
            var img_src = $(this).attr('src');  //  save image url
            // add the image if it doesn't exist
            if (!tr.find('.bigimage').length){
                tr.append('<td colspan="5" class="img bigimage"><img src="'+img_src+'" class="dynochart_full"></td>');  //  insert new column with image spanning all columns
            }
        }
    });
});

在后续点击中，td.bigimage将切换到原始tds。

或者你可以使用CSS，只需在点击时切换一个类名。

单击时替换表行的内容，再次单击时再次更改

1 个答案: