I have an html table of values and a variable player. When a user clicks on a certain value in the table, I would like to set player to that specific value. (e.g. if the user clicks on "Alex Brown", I would like to set var player = Alex Brown.

    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';" onclick="location.href='#individualwellness'">
                      <td>
                          Marco Foo
                      </td>
                  </tr>
                  <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';" onclick="location.href='#individualwellness'">
                      <td>
                          Alex Brown
                      </td>
                  </tr>

So far I have tried the code below, but I think this will reset the value of player for each element in the table

    <td id="player">
    <script>
        var player = "Leno Morales";
        document.getElementById("player").innerHTML = player;
    </script>

Thank you!

EDIT:

I have made several changes to the code. Firstly, I have added a snippet of js code

    <script>
    var player;
    function setValue(){
        player=getElementById("player").innerHTML;
    }
    </script>

For each of the elements in the table, I have added the function setValue() to the <tr> tag, like so:

    <tr onmouseover="this.style.backgroundColor='#ffff66'; "onmouseout="this.style.backgroundColor='#d4e3e5'; "onclick="location.href='#individualwellness'; setValue();">
    <td id="player">
        Leno Morales
    </td>

Unfortunately, my variable player is not being set when the user clicks a certain row!

I have an html table of values and a variable player. When a user clicks on a certain value in the table, I would like to set player to that specific value. (e.g. if the user clicks on "Alex Brown", I would like to set var player = Alex Brown.

    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';" onclick="location.href='#individualwellness'">
                      <td>
                          Marco Foo
                      </td>
                  </tr>
                  <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';" onclick="location.href='#individualwellness'">
                      <td>
                          Alex Brown
                      </td>
                  </tr>

So far I have tried the code below, but I think this will reset the value of player for each element in the table

    <td id="player">
    <script>
        var player = "Leno Morales";
        document.getElementById("player").innerHTML = player;
    </script>

Thank you!

EDIT:

I have made several changes to the code. Firstly, I have added a snippet of js code

    <script>
    var player;
    function setValue(){
        player=getElementById("player").innerHTML;
    }
    </script>

For each of the elements in the table, I have added the function setValue() to the <tr> tag, like so:

    <tr onmouseover="this.style.backgroundColor='#ffff66'; "onmouseout="this.style.backgroundColor='#d4e3e5'; "onclick="location.href='#individualwellness'; setValue();">
    <td id="player">
        Leno Morales
    </td>

Unfortunately, my variable player is not being set when the user clicks a certain row!

• javascript
• html

• what you tried so far – Karthick Kumar Commented Apr 16, 2014 at 5:08

5 Answers 5

First I would give your columns a class name to accurately target them with an event

<td class="playerColumn">Marco Foo</td>
...
<td class="playerColumn">Alext Brown</td>

Then say you wanted to populate the player name in this result area

 <div id="playerResult"></div>

getElementById isn't good to use for this case. Here is an event handler in jQuery

// declare the variable in global scope.
var player;
$('.playerColumn').on('click',function(evt){
    player = $(this).text();
    $('#playerResult').html(person);
});

You can use the jQuery or some other JS library to make your life easier in such situations.

I have solved your problem in this fiddle: PLAYER FIDDLE

var player = null;
 $('table tr td').click(function(){
 player = this.innerHTML; //set the value in our player variable.
 alert(player);  
});

Let me know if you face any problem in understanding the solution. Have a good day !

I created a jsFiddle to show how can you solve this without using jQuery, as if you aren't using it for anything else, it seems like an overkill.

http://jsfiddle/LaEL8/

Basically, I'm adding to the onclick of each <tr> this:

player = this.getElementsByTagName('TD')[0].innerHTML.trim();

That code will get the text from inside of the first <td> that is child of the clicked <tr>, trim it (Remove spaces before and after the text itself) and then store it in player.

<td onclick="setPlayerName(this)">

and in the head section or in js file:

<script>
var playerName;
function setPlayerName(playerNameLink){
    playerName=playerNameLink.innerHTML;
}
</script>

Synopsis

The first code will triggered when the mouse clicked and sent a link or reference of the td element to the user defined functionsetPalyerName. In that function we modifies the global variable playerName and assist the new value

You can call a user defined function on the click of the tr and manipulate the data there.

Eg:

    <tr onclick="setValue()">

and in the js file

   function setValue(){
        var player = document.getElementById('ID');
   }

I hope this helps