Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>What if you use document.querySelector:</p> <pre><code>&lt;td onmouseover="document.querySelector('.textbox').innerHTML='Hidden text'" onmouseout="document.querySelector('.textbox').innerHTML='Show text'"&gt; &lt;div class="textbox"&gt;Show text&lt;/div&gt; &lt;/td&gt; </code></pre> <p>This one works I think.</p> <p>There is something else that you should have in mind. Adding such things inside your html is not really good idea. That's because every time you are executing something. It will be good to cache the result of document.querySelector or document.getElementsByClassName. Imagine what will happen if you have 1000 rows inside your table. Here is a jsfiddle showing how you can improve the performance of the code <a href="http://jsfiddle.net/krasimir/Zbgng/2/" rel="nofollow">http://jsfiddle.net/krasimir/Zbgng/2/</a></p> <p>HTML</p> <pre><code>&lt;table&gt;&lt;tr&gt; &lt;td class="table-column"&gt; column1 &lt;/td&gt; &lt;td class="table-column"&gt; column2 &lt;/td&gt; &lt;td class="table-column"&gt; column3 &lt;/td&gt; &lt;/tr&gt;&lt;/table&gt; &lt;div class="textbox"&gt;Show text&lt;/div&gt; &lt;div class="textbox"&gt;Show text&lt;/div&gt; &lt;div class="textbox"&gt;Show text&lt;/div&gt; </code></pre> <p>JS</p> <pre><code>var columns = document.querySelectorAll(".table-column"); var textboxes = document.querySelectorAll(".textbox"); for(var i=0; column=columns[i]; i++) { column.addEventListener("mouseover", function() { replaceText("Hidden text"); }); column.addEventListener("mouseout", function() { replaceText("Show text"); }); } var replaceText = function(str) { for(var i=0; field=textboxes[i]; i++) { field.innerHTML = str; } } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload