Question

当我点击显示警告框的第一个td（即第1行，单元格1）时，我正在显示我自己的自定义警告框中的数据，然后当我点击时（第1行，单元格2，第2行，单元格1），第2行，单元格2）它没有显示我的警告框，我认为它将整个表作为一个div，但我想在每个 td单独点击时显示警告框，任何人都可以指导我该怎么做请在这里查看我的代码http://jsfiddle.net/Ur5Xn/5/

我的ajax

$(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(); 
    });
});

由于

Answer 1

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

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

Answer 2

将其设为类，因为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(); 
});

Answer 3

使用类，ID是唯一的。

$(document).ready(function(){

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

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

Answer 4

Id应该是唯一的，只是第一个计数，所以$（“＃alertShow”）的长度将始终为1.

尝试将id =“alertShow”更改为class =“alertShow”，并使用$（“。alertShow”）。点击。

或者更好的一个，使用$（'table'）。on（'click'，'td'，function（）{}），这是delegated-events approach。

Answer 5

<强> Live Demo

在Class的{{1}}中使用id代替td。

代表

table

Answer 6

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

阅读此documentation

$(".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>

Demo

Answer 7

您可以将此代码与td一起使用，而无需使用class和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(); 
    });
});

<强> demo

Answer 8

您需要学习的最重要的事情是一个名为事件委派的概念。 Read this post, it's very enlightening

当您阅读帖子和有关该主题的一些信息时，答案显而易见：只需将事件监听器附加到父节点，您的小问题就解决了。这是你的脚本： 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>

alertbox显示每个td单击时的数据

8 个答案: