javascript - 使用 Javascript 更改表格中的文本

Question

在过去的几个小时里，我一直在做一些事情，但似乎无法让它正常工作。当用户单击表格列 (Rn) 时，它应该会突出显示，并且其他一些 TD 元素中的文本应该会发生变化（玩家姓名和种族信息），与上一个和下一个按钮的原理相同，一切正常。

任何人都知道我在这里做错了什么？

代码：http: //jsfiddle.net/yunowork/4UGre/8/

Answer 1

乍一看，您的问题似乎是您使用“$prevCall”和“$nextCall”来确定在单击上一个或下一个时要显示哪些玩家。单击列时不会执行此类操作 - 如果您执行以下操作：

var $thisCol = $(this);
rows.children().removeClass('highlighted');
$('.showtext').html($thisCol.find('.hiddentext').html());
$('.showplayerone').html($thisCol.find('.hiddenplayerone').html());
$('.showplayertwo').html($thisCol.find('.hiddenplayertwo').html());
$('.showplayerthree').html($thisCol.find('.hiddenplayerthree').html());

应该没问题。但是，您可能会考虑创建一个“select_colum”函数，它依赖于 previous、next 和 click ，它会使代码更紧凑并减少重复代码，从而更容易调试和故障排除。

详细说明一下：假设您想为表添加一个名称。为了正确更新它们，您需要添加该行

$('.showplayerfour').html($thisCol.find('.hiddenplayerfour').html());

在三个不同的地方。你可以做的是创建一个这样的函数：

function update_names($col) {
    $('.showtext').html($col.find('.hiddentext').html());
    $('.showplayerone').html($col.find('.hiddenplayerone').html());
    $('.showplayertwo').html($col.find('.hiddenplayertwo').html());
    $('.showplayerthree').html($col.find('.hiddenplayerthree').html());
}

然后，您可以将播放器 4 添加到此函数中，并且每个显示选项都可以使用它。你可以用这种技术做更多的事情（如果你有动力，你可能会达到甚至不需要指定每个玩家的地步）。

Answer 2

您在搜索".hidden_____"信息时不够具体。所以它只是选择它找到的第一个。<td>我通过将搜索范围缩小到单击元素的祖先的后裔来纠正了这个问题：

$('.showtext').html($(this).closest("td").find('.hiddentext').html());
$('.showplayerone').html($(this).closest("td").find('.hiddenplayerone').html());
$('.showplayertwo').html($(this).closest("td").find('.hiddenplayertwo').html());
$('.showplayerthree').html($(this).closest("td").find('.hiddenplayerthree').html()); 

我在这里修复了您的代码：

http://jsfiddle.net/4pu9Q/

Answer 3

编码

$('.showplayerone').html($('.hiddenplayerone').html());
$('.showplayertwo').html($('.hiddenplayertwo').html());
$('.showplayerthree').html($('.hiddenplayerthree').html());

将具有 hiddenplayerone 2 等类的第一个元素的值放入显示的数据中，这将始终是 John、Fred 和 Jason。您只需要通过为选择器提供正确数据的 ID 来选择正确的元素，如下所示：

thisRow = $(this).prop('id');
rows.children().removeClass('highlighted');
$('.showtext').html($('.hiddentext').html());
$('.showplayerone').html($('#'+thisRow+' .hiddenplayerone').html());
$('.showplayertwo').html($('#'+thisRow+' .hiddenplayertwo').html());
$('.showplayerthree').html($('#'+thisRow+' .hiddenplayerthree').html());

如果您单击比赛列中的任何行，而不仅仅是标题行，这将起作用。

工作示例：http: //jsfiddle.net/4UGre/13/

不过，您似乎在多个地方（R1、R2 等）使用相同的 ID，这是不好的做法，请考虑更改此设置。

Answer 4

您需要选择要替换文本的 td 。如果找到，那么该功能似乎工作正常。

rows.children().not('.emptyrace, .race, .not').on('click', function(e) {
    rows.children().removeClass('highlighted');
    var id=e.target.id ;
    $('.showtext').html($('#'+id).find('.hiddentext').html());
    $('.showplayerone').html($('#'+id).find('.hiddenplayerone').html());
    $('.showplayertwo').html($('#'+id).find('.hiddenplayertwo').html());
    $('.showplayerthree').html($('#'+id).find('.hiddenplayerthree').html());
    var index = $(this).prevAll().length;  
    rows.find(':nth-child(' + (index + 1) + ')').addClass('highlighted');
  });

小提琴

更新的小提琴

Answer 5

这是我的完整工作解决方案

jsFiddle在这里

我想说“享受”... 注意：只有一个处理程序附加到 DOM（表格元素）

$(function(){
  var $t = $('table');
  $t.on('click', function(e){
    var $table = $(this),
        $target = $(e.target),
        $tdParent = $target.closest('td'),
        $alltr = $table.find('> tr, > tbody > tr');
    // Prev, next and td actions
    if( $target.is('.race > a') || ! $tdParent.is('.highlighted, .emptyrace, .race, .not')  ){
        // if a 'prev' or 'next' has been clicked
        if( $target.is('a') ){
            $tdParent = $('.highlighted', $alltr.filter(':gt(0)'))[($target.hasClass('next')? 'next':'prev')]('td:not(.not)');
            if( ! $tdParent.length){
                return false;
            } else if ($tdParent.hasClass('invisible')) {
                var $one = $tdParent.eq(0), $other = $one.parent().children(':not(.not)'), index = $other.index($one);
                $tdParent.parent().each( function(i,el){
                    $(this)
                        .children(':not(.not)')
                        .filter(':eq('+(index + (6*($target.hasClass('next')? -1:1)))+')')
                            .removeClass('visible').addClass('invisible')
                });
                $tdParent.removeClass('invisible').addClass('visible');

            }
        }
        // Common actions ...
        var tdIndex = ':nth-child(' + ($tdParent.eq(0).parent().children().index($tdParent.eq(0)) + 1) + ')';
        $alltr.eq(0).find('.showtext').html($alltr.eq(1).find(tdIndex + ' > .hiddentext').html());
        $alltr.filter(':gt(0)')
                .find(' > td.highlighted').removeClass('highlighted').end()
                .find(tdIndex).addClass('highlighted').end()
                .not(':eq(0)').each(function(){
                    var $this = $(this),
                        css = $this.find('> td.not > span').attr('class').replace(/^.*(player[^ ]+).*$/, '$1');
                    $this.find('.show'+css).html($alltr.eq(1).find(tdIndex + ' .hidden'+css).html());
                });
        return false;
    }
  });
});