others - 如果单击按钮,javascript更改表格的行颜色

  显示原文与译文双语对照的内容

单击按钮时,我要更改 table 行的颜色。 但是我的代码有问题。 单击按钮时,table 行的颜色不改变。

CSS:


tr.highlighted td {


 background: red;


}



html:


<table id="data" border="1" cellspacing="1" width="500">


 <tr>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 </tr>


 <tr>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 </tr>


 <tr>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 </tr>


 <tr>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 </tr>


</table>


<button type="button" id="change">


Change


</button>



JQuery


$('#data tr').click(function(e) {


 $('#change').click(function() {


 $('#data tr').removeClass('highlighted');


 $(this).addClass('highlighted');


 })


});




时间:

在文档对象上Delegate单击事件。 对文档( 基本上是整个页面)的任何单击都将被检测到--当然不是这样的。


`$(document).on("click',...`



Delegate实际响应点击以及不是 Pattern 编程的目标是事件Delegate的目标。 jQuery提供了一个可选的第二个参数,在任何事件方法签名中都称为 data 对象。 此参数基本上是一个选择器字符串,它指定 $(this)的范围:


`$(document).on("click', '#data td, #change',.. .



因此示例 上面 将click事件独家委托给 #data或者#change 中的任何 <td> 。 除委托元素以外的任何地方都将忽略( 除非在行中有另一个单击事件处理程序) 。 最后一个参数是回调函数,它在 #data 或者 #change的任何 <td> 上的click事件触发时被调用。 回调函数使用 $(this) 和流控件来委托click事件并确定行为( 或者结果) 。 在演示中,基本上是 .toggleClass() 方法,.addClass()<tr>(s) 没有 .highlighted 类和对目标 <tr>(s)的反向 .removeClass() 进行反向。

演示中的进一步细节。

直接单击任何 <td> 及其父 <tr>.highlighted

单击按钮,所有 <tr> 上的所有 .highlighted 类都将被切换。


/*


Delegate click event on document -- 


Consider clicks only on #data td or #change


*/


/*


if the clicked tag is a <td>...


get the. closest <tr> from that <td> and add. highlighted 


class if it doesn't have it otherwise remove. highlighted


*/


/*


...otherwise get all <tr> and toggle the. highlighted class


*/


$(document).on('click', '#data td, #change', function(e) {


 if ($(this).is('td')) {


 $(this).closest('tr').toggleClass('highlighted');


 } else {


 $('#data tr').toggleClass('highlighted');


 }


});

tr.highlighted td {


 background: red;


}

<table id="data" border="1" cellspacing="1" width="500">


 <tr>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 </tr>


 <tr>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 </tr>


 <tr>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 </tr>


 <tr>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 </tr>


</table>


<button type="button" id="change">


Change


</button>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

你可以:


const $dataTr = $('#data tr');


const $change = $('#change');


let $toBeChanged = null;



$dataTr.click(function() {


 $toBeChanged = $(this);


 $change.prop('disabled', false);


});



$change.click(function() {


 $dataTr.removeClass('highlighted');


 $toBeChanged.addClass('highlighted');


})

tr.highlighted td {


 background: red;


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">


</script>


<table id="data" border="1" cellspacing="1" width="500">


 <tr>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 </tr>


 <tr>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 </tr>


 <tr>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 </tr>


 <tr>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 <td>&nbsp;</td>


 </tr>


</table>


<button type="button" id="change" disabled>


Change


</button>

$(this).addClass('highlighted'); 中的this 引用按钮,而不是表行,因为 this 将设置为触发回调函数以触发回调函数,在本例中为带 id change的元素。 解决这里问题的最简单方法之一是在执行之前将 this 分配给另一个变量 $('#change').click(function() {...})

否则,如果要确保一次只更改一个表行,则应该将 ('#data tr').click(function(e) {...})$('#change').click(function() {...}) 因为在这里,它们不是嵌套的,只有一个变量跟踪上一次点击哪一行,并读取 $('#change').click()

...