Question

我对jQuery非常陌生。我正在尝试将 tr 中的文字替换为HTML代码段，当 tr 悬停在其后，然后又恢复为原来的 td 之后的内容。

提前致谢！

Answer 1

这样的事情会做到：

var originalContent = $('.myTR td').html();
$('.myTR').hover(function() {
     $('.myTR td').html('<strong>New HTML</strong>');   
}, function() {
     $('.myTR td').html(originalContent); 
});

假设您的HTML看起来像这样：

<table>
    <tr class="myTR">
        <td>Text td</td>
    </tr>
</table>

您可以对其进行测试here

Answer 2

如果您的HTML看起来像这样：

<table>
<tr id="hoverRow">
    <td id="contentCell" style="background-color: blue;">Content to Replace</td>
    <td>Other Content</td>
</tr>
</table>

您可以这样做：

<style type="text/javascript">
    var savedHtml = $('#contentCell').html();
    $('#hoverRow').hover(
        function () {
          $('#contentCell').html('New content');
          $('#contentCell').attr('background-color', 'red');
        }, 
        function () {
          $('#contentCell').html(savedHtml);
          $('#contentCell').attr('background-color', 'blue');
        }
    );
</script>

Answer 3

我找到了一种方法来做到这一点，但是您需要隐藏字段或其他变量来隐藏原始内容。

像这样的html：

<table id="table">
    <tr id="tr">
        <td>Some Text</td>
    </tr>
</table>

<input id="hidden" type="hidden" />

这个jQuery：

$('#tr').hover(
    function(){
       $('#hidden').val($('#tr > td').text());
       $('#tr > td').text('Some Other Text');
    }, 
    function(){
        $('#tr > td').text($('#hidden').val());    
    }
);

在此处查看：http://jsfiddle.net/davecoulter/HgAyv/

jQuery：在悬停时替换并删除HTML代码段

3 个答案: