單擊每個td時顯示數據的警報框

Question

當我單擊第一個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(); 
    });
});

謝謝

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”）。click。

更好的方法是使用$（'table'）。on（'click'，'td'，function（）{}），這是委托事件方法 。

Answer 5

現場演示

在table td中使用Class而不是id 。

例如：

<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> 

Answer 6

您為所有use class給出了相同的Id 。 id必須是唯一的，您不能多次使用它。 但是我們可以將一個class用於多個元素。

閱讀本文檔

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

演示版

Answer 7

您可以在不使用class和id情況下將代碼與td使用

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

演示

Answer 8

您要學習的最重要的東西是一個稱為事件委托的概念。 閱讀這篇文章，很有啟發性

閱讀有關該主題的文章和信息后，答案很明顯：只需將事件偵聽器附加到父節點，即可解決您的小問題。 這是您的腳本： 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>