Question

我正在尝试计算所选单元格的数量（在每行中单击的单元格），并在表格右侧的单元格中显示该计数。

代码：

$(function() {
  $('td').click(function() {
    $(this).toggleClass("selectedCell");
  });
});

function update_counts() {
  $('.tdoutput').html('');
  $('.row').each(function(index) {
    $('.tdoutput').html($('.tdoutput').html() + $(this).find('.selectedCell').length + ' selected cells ');
  });
}

$('.td').click(function() {
  // Add or remove class
  $(this).toggleClass('selectedCell');
  // Update the class counts
  update_counts();

});

// Run the function on domready
$(function() {
  update_counts();
});

.selectedCell {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table border="1">
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>
  </tr>
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>
  </tr>
</table>

我尝试修改代码，但无法使其正常工作。请给我一点帮助，以使其正常工作吗？谢谢。

Answer 1

我认为您正在寻找这样的东西：

将td的{{1}}和closest的{{1}}结合使用以实现此行为。

tr

find

$(function() {
  $("table tr").each(function() {
    update_counts($(this));
  });
});

function update_counts($tr) {
  var count = $tr.find('.selectedCell').length;
  $tr.find('.tdoutput').html(count + " selected");
}

$('td').click(function() {
  // Add or remove class
  $(this).toggleClass('selectedCell');
  // Update the class counts
  update_counts($(this).closest("tr"));

});

Answer 2

你很近。您需要在行循环内使用context参数或$('.tdoutput')来使$(this).find('.tdoutput')实例相对于特定行的上下文。

function update_counts() {

  $('.row').each(function(index) {
    $('.tdoutput', this).html($(this).find('.selectedCell').length + ' selected cells ');
                // ^^^ only in this row
  });
}



// Run the function on domready
$(function() {
  update_counts();

  $('td').click(function() {
    // Add or remove class
    $(this).toggleClass('selectedCell');
    // Update the class counts
    update_counts();

  });
});

.selectedCell {
  background-color: green;
}
td{padding:5px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table border="1">
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>
  </tr>
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>
  </tr>
</table>

Answer 3

尝试此代码

在脚本的第一个代码中添加update_counts();并删除.td click代码

$(function() {
  $('td').click(function() {
    $(this).toggleClass("selectedCell");
    update_counts(); // add here
  });
});


function update_counts() {
  $('.tdoutput').html('');
  $('.row').each(function(index) {
    //console.log($(this).find('.selectedCell').length, index, 'test');
    $('.tdoutput').html($('.tdoutput').html() + $(this).find('.selectedCell').length + ' selected cells ');
  });
}

// Run the function on domready
$(function() {
  update_counts();
});

.selectedCell {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>

  </tr>

  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>

  </tr>
</table>

Answer 4

这是工作中的小提琴。希望我能为您提供帮助。仅在脚本中稍作更改。

-3

https://jsfiddle.net/s73gv6zt/1/

Answer 5

将您的JS更改为：

function update_counts()
{
    // Clear output
    $('.tdoutput').html('');
    // Each rows,
     $('.row').each(function(index,rowObject){
         // Count has .selectedCell in this row
         var count = $(rowObject).find('td.selectedCell').length;
         // Write to this row output.
         $(rowObject).find('td.tdoutput').html( count + ' selected cells ');
     });  
}

$('td').click(function(){
  // Add or remove class
  $(this).toggleClass('selectedCell');

  // Update the class counts
  update_counts();
}); 



// Run the function on domready 
$(function(){
   update_counts();
});

计算html表中突出显示的单元格

5 个答案: