identify the selected td using javascript in html

Question

Hi

I have a table which contain 100 rows and td. like see below

<table border="0" cellpadding="0" cellspacing="0" id="artcle-title" >
  <tr>
   <td>Artcle details 1</td>
  </tr>
  <tr>
   <td>Artcle details 2</td>
  </tr>
  <tr>
   <td>Artcle details 3</td>
  </tr>
  <tr>
   <td>Artcle details 4</td>
  </tr>
....
 </table>

When a user click on a td content, i want to display a separate content table with respect to the selected table.i want to display the content in a separate table. I meant out side the selected table. My question is that

How i identify which table is selected ( with out passing any argument eg: funshow(td_id1) etc)

Does any one know this?

Answer 1

You could attach a click handler to each tr element in the table. Once clicked this handler will be invoked and you will be able to get the underlying DOM element. Once you have the element you can modify its contents. Depending on whether you are using a javascript framework or not the way to achieve this will vary. For example using jQuery:

$(function() {
    $('table tr').click(function() {
        $(this).html('<td>some new contents</td>');
    });
});

Answer 2

On the table, place an onclick event:

The HTML:

<table onclick="lineSelected(event||window.event)">...</table>

The javascript:

function lineSelected(ev){
  var target = ev.target || ev.srcElement;
  // target is the clicked element (TD, TR,...)
  // Place here the code to detect which line is selected, ie:
  // content of a cell in that row, counting the lines, an id on the tr,...
}

This is the old way to attach events to a DOM element, but it's cross browser and easy to start. You can then start to use attachEvent or addEventListener

Answer 3

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$(document).ready(function () {
    $("table#articles td").each(function(){
        $(this).click(function(){
            $(".tdcontent").html($(this).html());
        });
    });
});
</script>

Will attach to every td in the table with the id articles a click handler. The content of the clicked td will be written into an element with the class tdcontent. It shouldn't be to hard to customize this example to your own needs.

jQuery