CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Xavi
Xavi

Reputation: 2594

alertbox to show the data when each td is clicked

I am showing the data inside my own custom alert box when i clicked the first td(i.e row 1, cell 1) it showing alert box,then when i am clicking (row 1, cell 2,row 2, cell 1,row 2, cell 2)it not showing my alert box ,i think it taking the whole table as one div,but i want to display the alert box when each td is clicked separately,can anyone guide me how to do this please see my code here http://jsfiddle.net/Ur5Xn/5/

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

Thanks

Upvotes: 1

Views: 1300

Answers (8)

Stanislav
Stanislav

Reputation: 56

The most important thing for you to learn is a concept called Event Delegation. Read this post, it's very enlightening

When you have read the post and some info on the topic, the answer is obvious: just attach an event listener to a parent node, and your little problem is solved. Here's your script: 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>

Upvotes: 1

James
James

Reputation: 2974

You gave same Id for all use class instead. An id must be unique you cannot use it more than once. But we can use a class for more than one elements.

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

Upvotes: 1

Rituraj ratan
Rituraj ratan

Reputation: 10378

you can use this code with td without the use of class and 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

Upvotes: 1

Gourav
Gourav

Reputation: 1774

Make it as class because id for unique.

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

This will work now, here is the demo edited. http://jsfiddle.net/Ur5Xn/7/

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

Upvotes: 1

NaYaN
NaYaN

Reputation: 1320

Live Demo

Use Class instead of id in td of table.

for ex:

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

Upvotes: 1

Andrew
Andrew

Reputation: 5340

Id is supposed to be unique, just the first one counts, so the length of $("#alertShow") will be always 1.

Try change the id="alertShow" to class="alertShow", and use $(".alertShow").click.

Or a better one, use $('table').on('click', 'td', function(){}), which is delegated-events approach.

Upvotes: 1

mguimard
mguimard

Reputation: 1901

Use classes, ids are uniques.

$(document).ready(function(){

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

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

Upvotes: 1

Mujtaba Haider
Mujtaba Haider

Reputation: 1650

You should assign different Ids to each td, and same class. Then use the class as click selector. 

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

Upvotes: 1

Related Questions