jquery - 使用 Jquery 的粗体表行

Question

单击时，我想将表格的行加粗。我该怎么做才能让脚本知道我点击了哪一行？我能想到的唯一方法是使用如下功能。

<script>
function bold(x){
    $("#"+x).click(function(e){ 
        $(this).css("font-weight","bold");
        e.stopPropagation(); 
       });
   }
</script>
<table>
<tr id = 1 onclick = bold(this.id)><td>A</td></tr>
<tr id = 2 onclick = bold(this.id)><td>B</td></tr>
<tr id = 3 onclick = bold(this.id)><td>C</td></tr>
<tr id = 4 onclick = bold(this.id)><td>D</td></tr>
<tr id = 5 onclick = bold(this.id)><td>E</td></tr>
<tr id = 6 onclick = bold(this.id)><td>F</td></tr>
</table>

有没有更好的方法可以在不使用函数的情况下做到这一点？

Answer 1

你可以试试这个

$('tr').click(function(e){ 
    $(this).css("font-weight","bold");
        e.stopPropagation(); 
 });

此外，您将您的 id 包含在引号中.. 先这样做

<tr id = "1" onclick = bold(this.id)><td>A</td></tr>

检查小提琴

根据 HTML5 标准，没有必要用引号括起来。但我认为这样做是个好习惯。

Answer 2

$('tr').click(function(e){ 
    $("td", $(this)).css("font-weight","bold");
 });

Answer 3

您可能想阅读jQuery 的 on function文档，它提供了一种更简洁的方式来将处理程序附加到元素。使用它，您可以删除onclick属性，并将行为直接从 javascript 附加到元素。按照您的示例：

<script>
  $("tr").on("click", function(e){
    $(this).css("font-weight","bold");
  });
</script>
<table>
  <tr><td>A</td></tr>
  <tr><td>B</td></tr>
  <tr><td>C</td></tr>
  <tr><td>D</td></tr>
  <tr><td>E</td></tr>
  <tr><td>F</td></tr>
</table>

请注意，不需要 id 或onclick处理程序。

Answer 4

你应该整理你的html ..

html

<table>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
<tr><td>E</td></tr>
<tr><td>F</td></tr>
</table>​​​​​​​​​

javascript

$('tr').on('click',function(){
   $(this).css("font-weight","bold");
})​​​​​​​​​​​​

Answer 5

尝试这个

观看现场演示

$('table td').on('click', function(){
      $(this).css("font-weight","bold");
});