1

当我单击第一个 td（即第 1 行，第 1 行）它显示警报框时，我在我自己的自定义警报框中显示数据，然后当我单击（第 1 行，第 2 行，第 2 行，第 1 行，第 2 行，单元格 2）它没有显示我的警报框，我认为它将整个表格作为一个 div，但是我想在单独单击每个 td时显示警报框，谁能指导我如何做到这一点，请在此处查看我的代码 http://jsfiddle.net/Ur5Xn/5/

我的阿贾克斯

$(document).ready(function(){
    function showAlertBox(){
     $("#alert").css("display","inherit");
     $("#content").addClass("back");
    }
    function removeAlertBox(){
        $("#alert").css("display","none");
         $("#content").removeClass("back");        
    }

    $("#alertClose").click(function(){
       removeAlertBox(); 
    });
    $("#alertShow").click(function(){
       showAlertBox(); 
    });
});

谢谢

4

8 回答 8

1

td您可以在不使用classand的情况下使用此代码id

$(document).ready(function(){
    function showAlertBox(){
     $("#alert").css("display","inherit");
     $("#content").addClass("back");
    }
    function removeAlertBox(){
        $("#alert").css("display","none");
         $("#content").removeClass("back");        
    }

    $("#alertClose").click(function(){
       removeAlertBox(); 
    });
    $("table tr td").click(function(){
       showAlertBox(); 
    });
});

演示

于 2013-10-22T09:37:54.850 回答
1

您应该为每个 td 和同一类分配不同的 ID。然后使用该类作为点击选择器。

$(".alertShowClass").click(function(){
       showAlertBox(); 
    });
于 2013-10-22T09:27:06.017 回答
1

将其设为类，因为 id 是唯一的。

<td class="alertShow">row 1, cell 1</td>
<td class="alertShow">row 1, cell 2</td>

这现在可以工作了，这里是编辑的演示。 http://jsfiddle.net/Ur5Xn/7/

$(".alertShow").click(function(){
   showAlertBox(); 
});
于 2013-10-22T09:28:18.793 回答
1

使用类，ID 是唯一的。

$(document).ready(function(){

// ...
    $(".alertShow").click(function(){
       showAlertBox(this); 
    });
});

http://jsfiddle.net/Ur5Xn/17/

于 2013-10-22T09:29:46.690 回答
1

Id 应该是唯一的，只计算第一个，因此 $("#alertShow") 的长度将始终为 1。

尝试将 id="alertShow" 更改为 class="alertShow"，然后使用 $(".alertShow").click。

或者更好的方法，使用 $('table').on('click', 'td', function(){})，这是委托事件方法。

于 2013-10-22T09:30:04.440 回答
1

现场演示

使用Class代替idin tdof table。

例如：

<table border="1">
<tr>
    <td class="alertShow">row 1, cell 1</td>
    <td class="alertShow">row 1, cell 2</td>
</tr>
<tr>
    <td class="alertShow">row 2, cell 1</td>
    <td class="alertShow">row 2, cell 2</td>
</tr>
</table>
于 2013-10-22T09:30:17.567 回答
1

你给Id了所有使用相同的class东西。必须是唯一的id，您不能多次使用它。但是我们可以将 aclass用于多个元素。

阅读本文档

$(".alertShow").click(function(){
       showAlertBox(); 
    });

<tr>
<td class="alertShow">row 1, cell 1</td>
<td class="alertShow">row 1, cell 2</td>
</tr>
<tr>
<td class="alertShow">row 2, cell 1</td>
<td class="alertShow">row 2, cell 2</td>
</tr>

演示

于 2013-10-22T09:32:25.930 回答
1

你要学习的最重要的事情是一个叫做事件委托的概念。看了这篇文章，很有启发

当您阅读了有关该主题的帖子和一些信息后，答案很明显：只需将事件侦听器附加到父节点，您的小问题就解决了。这是你的脚本：http: //jsfiddle.net/stanislav_kay/xGdZJ/9/ 

<div id="content">
  <table border="1" id="alertShow">
   <tr>
    <td id=11>row 1, cell 1</td>
    <td id=12>row 1, cell 2</td>
   </tr>
   <tr>
    <td id=21>row 2, cell 1</td>
    <td id=22>row 2, cell 2</td>
   </tr>
  </table>
于 2013-10-22T09:47:50.033 回答