CODEWITHSUNDEEP
javascriptonclick
CBC_NS
CBC_NS

Reputation: 1957

Is it possible to get the value of a <td> element using onclick?

I currently have a table that has a list of email template names being echoed using php. Below is part of the php code. I'm trying to grab the table value and pass it to my JS file where a future AJAX command will pass it to a different file (that I won't have any issues with). My first attempt to alert out the value stated that the value was undefined. My second attempt showed the type of element it was inside (at the time it was a span). Now it's not showing anything. Suggestions?

PHP code:

<table class="departments">
<tr>
<th scope="col" style="width: 175px;">Email Name</th>
';
$get_depts = mysql_query("SELECT dept_name FROM depts where bus_id = '{$_SESSION['bus_id']}'");
while(($department = mysql_fetch_assoc($get_depts)))
{
    echo '
    <th scope="col" style="width: 175px;">'.$department['dept_name'].'</th>
    ';
}
echo '
</tr>
';
$get_emails = mysql_query("SELECT id, email_name from emails where bus_id = '{$_SESSION['bus_id']}' ORDER BY email_name ASC");
while(($email = mysql_fetch_assoc($get_emails)))
{
    echo '
    <tr>
    <td id="test" onclick="moveValue()">'.$email['email_name'].'</td>
    ';

Current JS code:

function moveValue()
{
var x = document.getElementById(test);
var y = x.innerHTML;
alert(y);
}

Upvotes: 0

Views: 35959

Answers (6)

Achmad
Achmad

Reputation: 1

its work.

function clickValue(elem) {
  var x = document.getElementById(elem).innerHTML;
  alert(x);
}
<table>
  <th>Coba</th>
  <tr>
    <td id="1" onclick="clickValue('1')">value</td>
  </tr>
  <tr>
    <td id="2" onclick="clickValue('2')">value yg ke 2</td>
  </tr>
</table>

Change id="*anyvalue*" and clickValue('*anyvalue*')

Upvotes: -1

Marek Schubert
Marek Schubert

Reputation: 105

With javascript:

To get raw text without any elements or:

somevar=document.getElementById ( "test" ).innerText;

To get full html code of tag. Contents will be stored in 'somevar' variable.

somevar=document.getElementById ( "test" ).innerHTML;

Upvotes: 1

vascowhite
vascowhite

Reputation: 18430

I don't want to get into all the problems with your code as there are rather a lot. However, getting the value of a <td> element by clicking is trivial to achieve.

You first need to assign a click handler to each cell in your table. The easiest way to do this is to loop through each cell and assign the handler like so:-

var cells = document.getElementsByTagName('td');
for(var i = 0; i <= cells.length; i++){
    cells[i].addEventListener('click', clickHandler);
}

function clickHandler()
{
    alert(this.textContent);
}

Then every time you click on a cell the clickHandler() will be called and you can run whatever code you wish.

You can see it working in this fiddle

Lots of information here https://developer.mozilla.org/en-US/docs/Web/API

Upvotes: 1

Amal Murali
Amal Murali

Reputation: 76636

Javascript:

var y = document.getElementById("test").innerText;

jQuery:

$("#test").text();

To get the HTML:

var html = document.getElementById("test" ).innerHTML;

jQuery:

$("#test").html();

Upvotes: 5

MajorCaiger
MajorCaiger

Reputation: 1913

You id attribute would be the same for every td inside the loop. So JS would not know which element you want.

You could try passing this into the onclick method

HTML

<td onclick="moveValue(this);">

JS

function moveValue( elem )
{
    alert(elem.innerHtml);
}

I would take a look at jQuery if I were you. It makes all this stuff much easier to achieve.

Upvotes: 2

Mihai Matei
Mihai Matei

Reputation: 24276

You can do it either by

function moveValue()
{
  var x = document.getElementById('test');
  var y = x.innerHTML;
  alert(y);
}

or by:

function moveValue(element) {
  var y = element.innerHTML;
  alert(y);
}
//with the following html code:
<td onclick="moveValue(this)">'.$email['email_name'].'</td>

Upvotes: 0

Related Questions