I have a javascript which makes a table in HTML sortable. However I want to style the header of the column which is clicked using javascript.   How can I get the thead of the table? I know the column of the header which i need to change.  Here is what my javascript returns to me right now.  javascript  console.log(table.tHead);   output to console:  &lt;thead&gt;         &lt;tr&gt;             &lt;th&gt;Name&lt;/th&gt;             &lt;th&gt;Times Placed&lt;/th&gt;             &lt;th&gt;UMF (KB)&lt;/th&gt;             &lt;th&gt;UAC&lt;/th&gt;             &lt;th&gt;Texture Memory (MB)&lt;/th&gt;             &lt;th&gt;Texture Count&lt;/th&gt;             &lt;th&gt;Mesh Memory (KB)&lt;/th&gt;             &lt;th&gt;Mesh Count&lt;/th&gt;             &lt;th&gt;Path&lt;/th&gt;         &lt;/tr&gt; &lt;/thead&gt;
511
How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?
40976
I need this table:    (each row and column should have the same height and length, last cell should be divided by diagonal line). I tried the following code:  \documentclass[11pt]{article} \usepackage[T1]{fontenc} \usepackage{array} \usepackage{makecell} \newcolumntype{x}[1]{&gt;{\centering\let\newline\\\arraybackslash\hspace{0pt}}p{#1}} \begin{document} \setlength{\extrarowheight}{0.1cm} \begin{tabular}{|x{0.5cm}|x{0.5cm}|x{0.5cm}|x{0.5cm}|x{0.5cm}|}\hline &amp;&amp;&amp;&amp;20\\ \hline &amp;&amp;&amp;&amp;30\\ \hline &amp;&amp;&amp;&amp;45\\ \hline 15&amp;12&amp;18&amp;50&amp;\diaghead(-3,2){\hskip \hsize}{$a_i$}{$b_j$}\\ \hline \end{tabular} \end{document}   but text in the last cell is displayed incorrectly and cells are not the same.     How can I change that?
13755
Title pretty much sums it up.  The external style sheet has the following code:  td.EvenRow a {   display: none !important; }   I have tried using:  element.style.display = "inline";   and  element.style.display = "inline !important";   but neither works. Is it possible to override an !important style using javascript.  This is for a greasemonkey extension, if that makes a difference.
20427
I know this question has been asked earlier. but did not see proper responses so asking again.  &lt;apex:pageBlockSection title="Preview Pane" columns="1"&gt;     &lt;apex:inputTextarea richtext="true" id="EmailBody" label="EmailBody"            cols="1" ondblclick="false" disabled="false"           value="{!emailTemplateSelected.htmlValue}"/&gt; &lt;/apex:pageBlockSection&gt;   I have tried to set the column value for the pageblock section. As well as for the inputtextarea. Still the column width dose not span the entire page.    &lt;apex:inputTextarea richtext="true" id="EmailBody" label="EmailBody" cols="1"     ondblclick="false" disabled="false" value="{!emailTemplateSelected.htmlValue}"     style="height:200px;width:200px;"/&gt;
117043
Does anyone know how I can prevent the text in a table cell from wrapping?  This is for the header of a table, and the heading is a lot longer than the data under it, but I need it to display on only one line.  It is okay if the column is very wide.  The HTML of my (simplified) table looks like this:  &lt;table&gt;   &lt;thead&gt;     &lt;tr&gt;       &lt;th&gt;         &lt;div&gt;Really long column heading&lt;/div&gt;       &lt;/th&gt;       &lt;th&gt;         &lt;div&gt;Really long column heading&lt;/div&gt;       &lt;/th&gt;       &lt;th&gt;         &lt;div&gt;Really long column heading&lt;/div&gt;       &lt;/th&gt;       &lt;th&gt;         &lt;div&gt;Really long column heading&lt;/div&gt;       &lt;/th&gt;       &lt;th&gt;         &lt;div&gt;Really long column heading&lt;/div&gt;       &lt;/th&gt;       &lt;th&gt;         &lt;div&gt;Really long column heading&lt;/div&gt;       &lt;/th&gt;       &lt;th&gt;         &lt;div&gt;Really long column heading&lt;/div&gt;       &lt;/th&gt;     &lt;/tr&gt;   &lt;/thead&gt;   &lt;tbody&gt;     &lt;tr&gt;       &lt;td&gt;         &lt;div&gt;data&lt;/div&gt;       &lt;/td&gt;       &lt;td&gt;         &lt;div&gt;data&lt;/div&gt;       &lt;/td&gt;       &lt;td&gt;         &lt;div&gt;data&lt;/div&gt;       &lt;/td&gt;       &lt;td&gt;         &lt;div&gt;data&lt;/div&gt;       &lt;/td&gt;       &lt;td&gt;         &lt;div&gt;data&lt;/div&gt;       &lt;/td&gt;       &lt;td&gt;         &lt;div&gt;data&lt;/div&gt;       &lt;/td&gt;       &lt;td&gt;         &lt;div&gt;data&lt;/div&gt;       &lt;/td&gt;     &lt;/tr&gt;   &lt;/tbody&gt; &lt;/table&gt;   The heading itself is wrapped in a div inside the th tag for reasons pertaining to the javascript on the page.    The table is coming out with the headings wrapping onto multiple lines.  This seems to only happen when the table is sufficiently wide, as the browser is trying to avoid horizontal scrolling.  In my case, though, I want horizontal scrolling.  Any ideas?
8344
I'm working with a bit of html and Javascript code that I've taken over from someone else. The page reloads a table of data (via an asynchronous request) every ten seconds, and then re-builds the table using some DOM code. The code in question looks something like this:  var blah = xmlres.getElementsByTagName('blah'); for(var i = 0; i &lt; blah.length; i++) {     var td = document.createElement('td');     var select = document.createElement('select');     select.setAttribute("...", "...");     select.onchange = function() {         onStatusChanged(select, callid, anotherid);     };     td.appendChild(select); }   When the onchange event is fired for a &lt;select&gt; element however, it seems like the same values are being passed to the onStatusChanged() method for every &lt;select&gt; in the table (I've verified that in each iteration of the loop, callid and anotherid are being given new, distinct values).   I suspect this is occuring because of the nature of how I am setting the event handler, with the select.onchange = function() syntax. If I understand how this is working correctly, this syntax sets a closure for the onchange event to be a function which refers to these two references, which end up having a final value of whatever they are set to on the last iteration of the loop. When the event fires, the value referenced by callid and anotherid is the value set in the last iteration, not the value set at the individual iteration.  Is there a way that I can copy the value of the parameters I am passing to onStatusChanged()?  I've changed the title to better reflect the question and the accepted answer.
44392
Is it possible to use Javascript inside CSS?  If it is, can you give a simple example?
10666
I would like to return a string with all of the contents of a CSS rule, like the format you'd see in an inline style. I'd like to be able to do this without knowing what is contained in a particular rule, so I can't just pull them out by style name (like .style.width etc.)   The CSS:  .test {     width:80px;     height:50px;     background-color:#808080; }   The code so far:  function getStyle(className) {     var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules     for(var x=0;x&lt;classes.length;x++) {         if(classes[x].selectorText==className) {             //this is where I can collect the style information, but how?         }     } } getStyle('.test')
26713
How do I get the next element in HTML using JavaScript?  Suppose I have three &lt;div&gt;s and I get a reference to one in JavaScript code, I want to get which is the next &lt;div&gt; and which is the previous.
34827
I would like to find out, in JavaScript, which element currently has focus. I've been looking through the DOM and haven't found what I need, yet. Is there a way to do this, and how?  The reason I was looking for this:  I'm trying to make keys like the arrows and enter navigate through a table of input elements. Tab works now, but enter, and arrows do not by default it seems. I've got the key handling part set up but now I need to figure out how to move the focus over in the event handling functions.
88341
I want to use a table in my answer. e.g  |-------------|----------------| | ShortCut    | Description    | |-------------|----------------|  I have posted an answer , which requires this kind of formatting.   Is it possible to have such formatting in stackoverflow Questions &amp; answers ?    If yes, How ? If no, why ?   Edit : I tried to use following code directly in editor of SO. But it didn't work for me.  &lt;table&gt; &lt;tr&gt; &lt;td&gt;hello&lt;/td&gt; &lt;td&gt;hello2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;hello3&lt;/td&gt; &lt;td&gt;hello4&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;
103694
I have a table and some of the number inside has some symbol like * and **  which should be explianed as footer ( at the end of the table not the page) I dont know how to do that and I dont want to change my code  my code looks like this   \begin{table}[h]     \caption  {\bf Performance at First Doubles Matches}  % title name of the table     \centering  % centering table     \begin{tabular}{l c c c }  % creating 4 columns         \hline         % here is the info          \hline         % I need the foot note here ( I dont know if it is called fotenote or not ??) but I need the related info at the end of the table      \end{tabular}     \label{tab:PPer} \end{table}
100723
I am building an application where I want to be able to click a rectangle represented by a DIV, and then use the keyboard to move that DIV by listing for keyboard events.  Rather than using an event listener for those keyboard events at the document level, can I listen for keyboard events at the DIV level, perhaps by giving it keyboard focus?  Here's a simplified sample to illustrate the problem:  &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt;  &lt;div id="outer" style="background-color:#eeeeee;padding:10px"&gt; outer     &lt;div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;"&gt;    want to be able to focus this element and pick up keypresses    &lt;/div&gt; &lt;/div&gt;  &lt;script language="Javascript"&gt;  function onClick() {     document.getElementById('inner').innerHTML="clicked";     document.getElementById('inner').focus();  }  //this handler is never called function onKeypressDiv() {     document.getElementById('inner').innerHTML="keypress on div"; }  function onKeypressDoc() {     document.getElementById('inner').innerHTML="keypress on doc"; }  //install event handlers document.getElementById('inner').addEventListener("click", onClick, false); document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false); document.addEventListener("keypress", onKeypressDoc, false);  &lt;/script&gt;  &lt;/body&gt; &lt;/html&gt;   On clicking the inner DIV I try to give it focus, but subsequent keyboard events are always picked up at the document level, not my DIV level event listener.  Do I simply need to implement an application-specific notion of keyboard focus?  I should add I only need this to work in Firefox.
76127
I have to maintain a large number of classic ASP pages, many of which have tabular data with no sort capabilities at all. Whatever order the original developer used in the database query is what you're stuck with.  I want to to tack on some basic sorting to a bunch of these pages, and I'm doing it all client side with javascript. I already have the basic script done to sort a given table on a given column in a given direction, and it works well as long as the table is limited by certain conventions we follow here.    What I want to do for the UI is just indicate sort direction with the caret character ( ^ ) and ... what?  Is there a special character that is the direct opposite of a caret?  The letter v won't quite cut it.  Alternatively, is there another character pairing I can use?
21162
I am trying to style all the HTML elements by making a custom style sheet. Till now, i have succeeded in making only the radio-buttons and check-boxes.  is the link for the demo. I wanted to know what are the formal guidelines for UI designing while styling these controls so that they appear more clickable. And what more could be done to make the example more pleasant looking.
11521
Can someone show me how to get the top &amp; left position of a div or span element when one is not specified? ie: &lt;span id='11a' style='top:55px;' onmouseover=&quot;GetPos(this);&quot;&gt;stuff&lt;/span&gt; &lt;span id='12a' onmouseover=&quot;GetPos(this);&quot;&gt;stuff&lt;/span&gt;  In the above, if I do: document.getElementById('11a').style.top  The value of 55px is returned. However, if I try that for span '12a', then nothing gets returned. I have a bunch of div/spans on a page that I cannot specify the top/left properties for, but I need to display a div directly under that element.
74778
I'm trying to add a row to a table and have that row slide into view, however the slidedown function seems to be adding a display:block style to the table row which messes up the layout.  Any ideas how to work around this?  Here's the code:  $.get('/some_url',    { 'val1': id },    function (data) {     var row = $('#detailed_edit_row');     row.hide();     row.html(data);     row.slideDown(1000);   } );