Develop Reference

style lost after item returned to display

In an html form, I have a table that I hide or display based on a radio button choice. When the table is hidden and then brought back, one of the style settings is lost. I would like to keep the same layout when the table is displayed.
HTML for the table
<table id="tblAutomated">
<tr>
<td>Are the deposits automated?</td>
<td id="tdAutomated" style="text-align:right"><input type="radio" name="rbAutomated" value="yes">Yes <input type="radio" name="rbAutomated" value="No">No</td>
</tr>
</table>
JS for the radio button just the relevant part
document.getElementById('tblAutomated').style.display='block';
document.getElementById('tdAutomated').style.textAlign='right';
But IE Dev Tools shows an unhandled exception for that second JS line. "Object doesn't support property or method."
So, I tried adding a class to the <td>.
<td id="tdAutomated" class="tblRight">
and I added the text-align style to that class. Then I changed the JS to try two other methods: .hasClass and .addClass. But both of those methods failed, too.
Is there a method that will either set that alignment correctly or allow the class to be added?
EDIT
Here are the images of what I see and what Dev Tools shows is happening in the HTML. Using both methods, I see no reason why the cell shouldn't go back to where it was originally.

I was able to resolve this by putting the table inside a <div> and changing the display for that, instead.

Highlighting rows with DataTables (or other table/grid plug-ins)

There's an example in DataTables for highlighting rows on hover:
http://datatables.net/examples/advanced_init/highlight.html
However, I'm looking for something a bit different. I'd like the highlight to be trigged when users click on words outside the table. For example, in the above link, I'd like row #2 to be highlighted when a user click on "visibility" in the text above the table (so it's kind of a hyperlink).
I'm assuming I can find an highlighting plug-in that maybe can do what I need. But before
I got there, is there any easy way to do this with DateTables or other table/grid plug-ins?
Thank you!

Here is an example of highlight on click.
It also has an example of deleting a row on click from a link outside the table.
EDIT: This example won't do exacly what you want, but it get's you most of the way there. I have retrofitted the example in this fiddle to do what you want. Here is the "click link to highlight row" part of it:
$("#rowHighlightLink").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$('#example tbody tr').eq(1).addClass('row_selected');
});

jquery splash screen for editing page information

I have a list of users in an organized table. I want a splash-style div to appear when I click on the row of the user whose information I want to edit. When the splash screen appears, I want to have input boxes within the splash to contain the information of the user. So far I accomplished the splash screen effect. Now the final piece is grabbing the data within the row using the same onclick event as the splash, getting the values of the columns, and changing the innerHTML of the input boxes within the splash.
http://jsfiddle.net/nH6x6/1/
SOLUTION: http://jsfiddle.net/nH6x6/3/
<tr class="data" id="row1">
<td>1</td>
<td>Marquezso</td>
<td>123456</td>
<td>noob#coder.com</td>
</tr>
in the fiddle you have to click on the row to activate the splash.
I want the username and email input fields to contain the data of the clicked row.
In this case row1
=)

You will need to reference the relevant td element and grab its contents.
For example:
$('input[name="username"]').val($('#row1 td:first').text());
I gave a name to your input in the above example as it makes it easier to reference.

Here you go: http://jsfiddle.net/76bdx/3/
Here is a snippet, click fiddle to see everything...
//Fill the form
document.getElementById('username').value=$('.data td:nth-child(2)').html();
document.getElementById('email').value=$('.data td:nth-child(4)').html();
Gonna have to be a little trickier if your table ever holds more than one user row. New fiddle on the way for that... {never mind, already answered}

HTML- Altering Input Value

I recently posted a similar question, but after some discussion, the question turned out to be quite a bit different than it was originally stated, so I thought it best to post this as a new question. I am trying to use an input field to show a total (I would consider using another element type, but I need to do the same thing in other places where an input field is actually required, so I may as well fix the problem now). The problem is that the HTML of the table containing these fields needs to be reloaded on occasion, i.e. in table creation, I use the Jquery $('#table1').html($('#table1').html() + <next_table_line>);. This causes the input field to revert to the value displayed in its value attribute, which doesn't change when I use the $('#input1').val(<some_value>); setter or when I enter data manually. Does anyone know of a solution to my problem? I need to be able to add rows to the table without loosing my data, but I can't figure out how to do this.

You're reloading your entire table with the line $('#table1').html($('#table1').html() + <next_table_line>);. You should be appending to your table instead. Take the following sample small table:
<table id="test">
<tr><td>test</td></tr>
</table>
Now, to add a new row, dont re-write the entire table HTML, just append!
$("#test").append("<tr><td>See im new!</td></tr>");
Demo: http://jsfiddle.net/uB2Rq/1/

Dropdown for each cell in tabular data

I have a very large html table that is similar to the following:
<table>
<tr>
<td>value1</td>
<td>value2</td>
</tr>
<tr>
<td>value3</td>
<td>value4</td>
</tr>
</table>
For each value I need to have a dropdown, where a user can click to change the value. This would trigger an ajax function. What would be the best way to do this? A dropdown in each ? One dropdown that changes position? How should i go about adding this?

This solution changes the cell to a dropdown when clicked, and back to a cell when a value is selected, just in case this was desired effect.

Something similar to this, I would assume. :) I used jQuery. :)
$("tr").each(function(){
$("td").each(function(){
var before = $(this).text();
$(this).html("<select><option>"+before+"</option></select>");
});
});​
jsFiddle Example

Some of this depends on the experience you want for the user, but I would lean towards putting a select element in each table cell. You can then have the select hidden until the user selects one of the values to change, or you can have the select elements visible the entire time. This is easier because you can put the values into the select box before the browser renders the page. If this is not usable, for example, if the browser has trouble rendering the page because of the size of the markup, then you could move to using a single select element.
If you use a single select box, that would require you to move it around to the correct cell, and also determine how to get the possible values into the select box. You could use a data attribute on your td tags to store the data, or you could make an ajax call. But that could be chatty if you go back to the server each time a cell needs to be edited. Basically this would be the harder option to get right.
Start with the simple way (select in each td). And if that proves to be problematic, move on to the harder one. That is what I would do.

Alright, I got it working. This is an alternative to my other answer.
This gets each tr to be a dropdown and the tds are the options. I used jQuery.
$("tr").each(function(i){
$("td").each(function(){
$(this).replaceWith("<option>"+$(this).text()+"</option>");
});
$(this).replaceWith("<select>"+$(this).html()+"</select>");
});
​
Updated jsFiddle Example