Question

How to get selected table cell in in Table JavaScript without using jQuery?
With jQuery decision is very simple, but in JavaScript without jQuery – I don’t know how.
I have table:

<table><tr onmouseover="toolnote(this)"><td><td><td></tr></table>

I need to bind “onmouseover” event to every cell in table, but if write this event to every cell it will be very unreadable. It follows that I must bind “onmouseover” to tag through the child and there determine the selected cell. But I do’t lnow how get the child index.

JS Code:

function toolnote(el){
    var tt = el.getElementsByTagName('td')
    alert(tt[0].innerHTML);
}

In this sample event binding to 0-index.

Anybody help me?

Answer 1

Doubt!

1. You have toolnote() as the function name and you are calling tooltip() on the element. Is this a typo?
2. You are missing a ; in the statement.

---

Simple Change:

function toolnote(el){
    var tt = el.getElementsByTagName('td'); // «--- You are missing a ;
    alert(tt[0].innerText);
}

---

Or, if you use jQuery, then it is still easier.

function toolnote(el){
    alert($(el).children("td").first().text());
}

---

You need this in each cell, then:

<tr><td onmouseover="toolnote(this)"></td><td onmouseover="toolnote(this)"></td><td onmouseover="toolnote(this)"></td></tr>

Make the JavaScript this way:

function toolnote(el){
    alert(this.innerText);
}

In case of Firefox:

function toolnote(el){
    alert(this.textContent);
}

And this is the reason, I said it will be better to use jQuery, as it handles this cross browser scripting issue, in a better way.

---

In a Single Line:

function toolnote(el) {
    var e = el.getElementsByTagName("td");
    if (e.textContent)
        for (i = 0; i < e.length; i++) e[i].onclick = function () {
            alert(this.textContent); // Firefox
        }
    else
        for (i = 0; i < e.length; i++) e[i].onclick = function () {
            alert(this.innerText); // IE
        }
}