Develop Reference

Want to add rows to new table using jstl for loop and jquery

I have two tables on my jsp page, the first one is dynamically created using a list from a java servlet. Every row of this table has an add button that is used to add the row clicked to secondary table.
I am using jstl to generate the first table and a JQuery code to create the onClick function of every button in the table.
That's my JSP code:
<table style="text-align: left; width: 732px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 288px;">Nombre<br>
</td>
<td style="vertical-align: top; width: 201px;">Tipo<br>
</td>
<td style="vertical-align: top; width: 93px;">Precio<br>
</td>
<td style="vertical-align: top; width: 50px">Cantidad<br>
</td>
<td style="vertical-align: top; width: 56px;">Añadir<br>
</td>
</tr>
<c:forEach var ="tempPan" items= "${sessionScope.CATALOGO}" varStatus="loop">
<!-- Link para cada compra con su campo clave -->
<c:url var="linkAnyadir" value="VerCompras">
<c:param name="id" value="${tempPan.id}"></c:param>
</c:url>
<tr>
<td id="nombre${loop.index}" style="vertical-align: top; width: 288px;">${tempPan.nombre}<br>
</td>
<td id="tipo${loop.index}" style="vertical-align: top; width: 201px;">${tempPan.tipo}<br>
</td>
<td id="precio${loop.index}" style="vertical-align: top; width: 93px;">${tempPan.precio}<br>
</td>
<td style="vertical-align: top; width: 50px"><input id="cantidad${loop.index}" name="tCantidad"><br>
</td>
<td style="vertical-align: top; width: 56px;"><button type="button" id="add${tempPan.id}">Agregar</button><br>
</td>
</tr>
<script type="text/JavaScript">
$("#add"+'${loop.index}').on("click", function(){
$('#test > tbody:last-child').append('<tr><td>'+$("#nombre"+'${loop.index}').val()+'</td><td>'+$("#tipo"+'${loop.index}').val()+'</td><td>'+$("#cantidad"+'${loop.index}').val()+'</td><td>'+$("#precio"+'${loop.index}').val()+'</td></tr>');
});
</script>
</c:forEach>
</tbody>
</table>
<br>
<h4>Carrito:</h4>
<br>
<table id="test" style="text-align: left; width: 471px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 103px;">Nombre<br>
</td>
<td style="vertical-align: top; width: 57px;">Tipo<br>
</td>
<td style="vertical-align: top; width: 163px;">Cantidad<br>
</td>
<td style="vertical-align: top; width: 114px;">Precio<br>
</td>
</tr>
</tbody>
</table>
My code generates the first table correctly but, when I press the add button, adds a void row to the second table like:
Result example
I think the problem is there on some html or javascript trying to get jstl variable like id="nombre${loop.index}", or $("#nombre"+'${loop.index}').val()
Any help please?

I fix the problem, I was using .val() instead of .html() on append jquery method. It works like:
$("#add"+'${loop.index}').on("click", function(){
$('#test > tbody:last-child').append('<tr><td>'+$("#nombre"+'${loop.index}').html()+'</td><td>'+$("#tipo"+'${loop.index}').html()+'</td><td>'+$("#cantidad"+'${loop.index}').val()+'</td><td>'+$("#precio"+'${loop.index}').html()+'</td></tr>');
});

Copy input, textarea data from one window to another

I would like to create a copy paste functionality of textarea and input data from one table to same table on another window excluding the first tds. When I press Ctl+c it copies, and in another tab same browser Ctrl+ v pastes
Winow tab 1 copy data from this
<tr>
<td class="tbody_data side">Alkalinity/Acidity</td>
<td class="tbody_data" style="padding: 0px;">
<textarea class="det_st form-control" style="border:none; "></textarea>
</td>
<td class="tbody_data" style="padding: 0px;">
<textarea class="det_st form-control" style="border:none;"></textarea>
</td>
<td class="tbody_data" style="padding: 0px;">
<textarea class="det_st form-control" style="border:none;"></textarea>
</td>
<td class="tbody_data" style="padding: 0px;">
<textarea class="det_st form-control" style="border:none;"></textarea>
</td>
<td class="tbody_data side" style="padding: 25px; width:50px;">
<select class="select" style="border:none; width:145px;">
<option value="COMPLIES">COMPLIES</option>
<option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
</select>
</td>
</tr>
Paste to this on window 2
<tr>
<td class="tbody_data side">Microbiology</td>
<td class="tbody_data" style="padding: 0px;">
<textarea class="det_st form-control" style="border:none; "></textarea>
</td>
<td class="tbody_data" style="padding: 0px;">
<textarea class="det_st form-control" style="border:none;"></textarea>
</td>
<td class="tbody_data" style="padding: 0px;">
<textarea class="det_st form-control" style="border:none;"></textarea>
</td>
<td class="tbody_data" style="padding: 0px;">
<textarea class="det_st form-control" style="border:none;"></textarea>
</td>
<td class="tbody_data side" style="padding: 25px; width:50px;">
<select class="select" style="border:none; width:145px;">
<option value="COMPLIES">COMPLIES</option>
<option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
</select>
</td>
</tr>
Suggestions

in another BROWSER TAB? well, I can only imagine using localstorage.
Add an id or a unique class to the inputs, then grab the val of each:
var input1 = $("#idOfInput1").val();
var input2 = $("#idOfInput2").val();
...
localStorage["input1"] = input1;
localStorage["input2"] = input2;
create a button "save", and make the previous code (completed by you) inside the click event of the button.
On the other window, get a "load" button. on the on click event, read the content of the localsorage items, and load them into your table, which needs to have ids or classes.
$("#loadbutton").on("click",function(){
$("#contentinput1").text(localStorage["input1"]);
$("#contentinput2").text(localStorage["input2"]);
$("#contentinput3").text(localStorage["input3"]);
...
}

This seems like a nice place to use websockets.
Either pass the whole content through the websocket message or store them in localstorage and send a message to the clients that new content is available.
This way you can also scale it for as many clients you want

AngularJS increment id value of items in nested repeater

I have the following code in which there are questions and choices and I need the choices to have incremented id values.
However, I need the incrementation to restart each time there is a new question. Most of the examples I've found so far increment for all (e.g. using $index). But I've looked at several articles here on SO such as this one and not getting the results that I need:
What I need is this:
Question 1
Choice10 (the first numerical value is the Id of the question,
Choice11 the second numerical value should be the incremented id)
Choice12
Question 2
Choice20
Choice21
Choice22
Choice23
The html code looks like this:
<table summary="" style="border: none; width: 100%; background: none;" id="rptQuestions">
<tbody>
<tr style="width: 100%;" ng-repeat-start="q in questions track by $index">
...Question details here...
</tr>
<tr>
<td class="Bold_10" colspan="4">
<table summary="" style="border: none; background: none">
<tbody>
<tr ng-repeat-start="c in choices" ng-if="c.QuestionId==q.QuestionId">
<td style="width: 2em;">X</td>
<td>
<input type="text" id="inLetter{{c.QuestionId}}{{ value?? }}" ng-model="c.Letter" style="width: 2em;" /></td>
<td style="text-align: left;">
<input type="text" id="inChoice{{c.QuestionId}}{{ value?? }}" ng-model="c.Choice" style="width: 60em;" /> <input type="hidden" id="inChoiceId{{c.QuestionId}}{{ value?? }}" ng-value="{{c.Id}}" /></td>
</tr>
<tr ng-repeat-end ng-if="c.QuestionId==null"><td colspan="3"></td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<table summary="" style="border: none; width: 100%; background: none;" id="rptQuestions">
<tbody>
<tr style="width: 100%;" ng-repeat-start="q in questions">
...Question details here...
</tr>
<tr ng-repeat-end="">
<td class="Bold_10" colspan="4">
<table summary="" style="border: none; background: none">
<tbody>
<tr ng-repeat-start="c in choices" ng-if="c.QuestionId==q.QuestionId">
<td style="width: 2em;">X</td>
<td>
<input type="text" id="inLetter{{$parent.$index}}{{$index}}" ng-model="c.Letter" style="width: 2em;" /></td>
<td style="text-align: left;">
<input type="text" id="inChoice{{$parent.$index}}{{$index}}" ng-model="c.Choice" style="width: 60em;" /> <input type="hidden" id="inChoiceId{{$parent.$index}}{{$index}}" ng-value="{{c.Id}}" /></td>
</tr>
<tr ng-repeat-end ng-if="c.QuestionId==null"><td colspan="3"></td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Each ng-repeat has its own index and you can access the index from the nested loop. However be aware that with your implementation the id inChoice111 might be misleading.
Question 1.11 == Question 11.1

Open JQuery Popup after Button click

i have a problem with jquery mobile.
here is teh jsfiddle: http://jsfiddle.net/Gc7mR/3/
First i have a Panel with some Buttons, The importan Button is the button with id=define)!
<div data-role=header data-position=fixed>
<div data-role=navbar>
<ul>
<li><a href=#define data-role=button data-icon=edit
data-inline="true" data-rel="popup" id="define"
data-position-to="#map_canvas">Define</a></li>
<li><a href=#compose data-role=button data-icon=gear
data-inline="true" data-rel="popup" data-transition="slidedown"
data-position-to="#map_canvas">Compose</a></li>
<li><a href=#search data-role=button data-icon=search
data-inline="true" id="search">Search</a></li>
</ul>
</div>
</div>
Now i created 3 Popups(one of them is shown below). Further i have a variable called scenario, which can change the states between restaurants,landmarks, and movies. My goal is if the Button with the id 'define' is clicked, the corresponding popup to the actual state of teh scenario variable should be opened(e.g. if scenario="landmarks" the popup with the id landmarks should open).
<div data-role="popup" id="defineLandmarks"
style="width: 600px; height: 750px;">
<div style="padding: 20px;">
<div align="center">
<b>please define options for the landmark scenario</b>
</div>
<div data-role="controlgroup" data-type="horizontal">
<table>
<tr>
<td style="width: 20%;">wiki abstract</td>
<td style="width: 450px;; float: right"><input type="text"
name="wiki_abstract" id="wiki_abstract" value=""
data-clear-btn="false"></td>
</tr>
<tr>
<td style="width: 20%;">wiki text</td>
<td style="width: 450px; float: right"><input type="text"
name="wiki_text" id="wiki_text" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 1</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords1" id="keywords1" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 2</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords2" id="keywords2" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 3</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords3" id="keywords3" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 4</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords4" id="keywords4" value="" data-clear-btn="false">
</td>
</tr>
</table>
<form>
<div data-role="controlgroup" data-type="horizontal"
align="center">
Reset Apply
</div>
</form>
</div>
</div>
</div>
I try to open the poup like this but it does not work:
$("#define").click(function() {
var s= getScenario();
if(s=='restaurant'){
$('#defineRestaurants').popup('open');
}
else if(s=='movies'){
$('#defineMovies').popup('open');
}
else if(s=='landmarks'){
$('#defineLandmarks').popup('open');
}else{
alert("Please choose a scenario");
}
});

Look at something like
$(createToggleHandler("#check", "#most", "#most"));
function createToggleHandler(id, target, scroll){
return function(){
$(id).click(createToggleClickHandler(target, scroll));
}
}
function createToggleClickHandler(target, scroll){
return function(){
var x = $(target);
x.toggle(500);
$("html, body").animate({ scrollTop: $(scroll).offset().top }, 1000);
}
}

Focussing and/or selecting an input element slow on IE with large count of input tags inside the dom

My company provides an ERP solution which is dependant on using IE because of some bad decisions years back (using behaviors for dynamic html), so I can in no way use another browser. And right now it is restricted to IE8. And about 40.000 installations are out in the fields...
To the problem:
Normally a page in our application has about 150 - 200 input tags inside the dom. Using them via JavaScript is no problem.
But: Now we have a page (for a single customer only) with a huge table (about 1500 table rows), where each row has about ten (editable) input fields inside some columns, so we have about 15000 input tags inside the dom. This single page uses jQuery, which is not in use for the rest of the product.
First of all: Scrolling the table (inside a div) is terribly slow on IE (eats up all CPU).
Second (and my main concern right now): If I want to change the focus and / or select text inside one of the input tags, IE slows down to a crawl.
If I have for example a table with only 50 rows everything works fine, but IE slows down the more rows and input fields are being added. If I only put textual information in the table cells, IE has no problems with it.
So it really is the input-field which is causing the slowdown, but is there any way around that?
I am open for suggestions - I have tried using editable divs, but I cannot get them to 100% emulate a singleline-input field (I need onblur events, click events and so on).
Currently I am also thinking about making this single page of the product compatible to Chrome and using Chrome Frame plugin for IE in order to display the page
FYI: All events but the onblur event are registered on the table element. The onblur element get registered on all input fields inside a row once a user clicks on an input field (and the onblur event for the last active row is being removed).
Thank you all for sharing some thoughts...
Update
I have changed the code so that no input fields are inside the table. Only after a row gets activated, the cells with editable content get an input element.
The adding / removing of those input cells is rather quick (20 - 40 ms), but the problem with selecting and focusing on a field remains the same...
With a table with 190 rows IE took about 1600 - 2100 ms to execute ".focus()" and ".select" on an input element inside the table.
I am at my wits end - right now I consider making this single page compatible to other browsers than IE and tell our client to install the Chrome Frame plugin. Or another solution would be to program a rich client for the purpose - all which will take more time than what is being paid for...
Remember that the table layout works fine as long as not too many rows are inside that table...
Code:
Example of a table row:
<tr id="POS_5096" class="ROWSELECTED" poscount="0" ordnernr=
"ROOT" timestamp="00000000003091FB">
<td>
<input class="CHECKONE" type="checkbox" name="wn_folder_dnd">
</td>
<td name="FOLDERPATH" dttype="string" dbvalue="002">
<a href=
"../Sales/AuftragPosRec.aspx?auftrag=200146&accessID=5096"
target="_blank">002</a>
</td>
<td>
<input class="CHECKONE" title="Textposition" disabled type="checkbox"
name="TEXTPOS" dttype="i2" dbvalue="0">
</td>
<td>
<img name="taketextpos" src="../Style/MenuIcons/down.gif">
</td>
<td>
<input class="CHECKONE" title="Durch Mehrung / Minderung verändert"
disabled type="checkbox" name="WN_MMCHANGED" dttype="i2" dbvalue="0">
</td>
<td sizcache="0" sizset="0">
<input style="TEXT-ALIGN: right; WIDTH: 140px" value=
"dfgdfgdfgdfnbndfs" name="NAME" dttype="string" dbvalue=
"dfgdfgdfgdfnbndfs" jquery16409152079553898877="55">
</td>
<td>
<img name="takename" src="../Style/MenuIcons/down.gif">
</td>
<td name="NAMEINTERN" dttype="string" dbvalue="PDW-1500 PDW-1500">
<a href="../Masterdata/ArtikelInfoRec.aspx?artikel=114080" target=
"_blank">PDW-1500 PDW-1500</a>
</td>
<td title="04020asasa" name="ARTIKELGRUPPE" dttype="string" dbvalue=
"04020">
04020
</td>
<td sizcache="0" sizset="1">
<input style="TEXT-ALIGN: right; WIDTH: 35px" title="04" value="04"
name="RABATTGRUPPE" dttype="string" dbvalue="04"
jquery16409152079553898877="56">
</td>
<td>
<img name="pickrabattgruppe" src="../Style/fieldicons/picklist.gif">
</td>
<td>
<img name="takerabattgruppe" src="../Style/MenuIcons/down.gif">
</td>
<td name="HERSTELLER" dbvalue="103736.001">
<img title="Sony Europe Limited (B)" name="popupadresse()" src=
"../Style/field-icons/goto-this-dataset.png">
</td>
<td name="LIEFERANT" dbvalue="">
<img title="" name="popupadresse()" src=
"../Style/field-icons/goto-this-dataset.png">
</td>
<td>
<img name="pickwn_lieferant" src="../Style/fieldicons/picklist.gif">
</td>
<td sizcache="0" sizset="2">
<input style="TEXT-ALIGN: right; WIDTH: 50px" value="2,00" name=
"MENGE" dttype="number" dtscale="2" dbvalue="2.00"
jquery16409152079553898877="57">
</td>
<td>
<div style=
"BORDER-BOTTOM: #809db7 1px solid; BORDER-LEFT: #809db7 1px solid; WIDTH: 10px; BORDER-TOP: #809db7 1px solid; BORDER-RIGHT: #809db7 1px solid"
name="WN_AUFWAND_BEISTELL" dbvalue="" clickevent="pickbeistell">
 
</div>
</td>
<td sizcache="0" sizset="3">
<input style="TEXT-ALIGN: right; WIDTH: 55px" name="PREISME" dttype=
"string" dbvalue="Stück" disabledvalue="Stück"
jquery16409152079553898877="58">
</td>
<td>
<img name="pickpreisme" src="../Style/fieldicons/picklist.gif">
</td>
<td>
<img name="takepreisme" src="../Style/MenuIcons/down.gif">
</td>
<td style="TEXT-ALIGN: right" name="WN_UVP" dttype="number" dtscale="2"
dbvalue="0.00">
0,00
</td>
<td sizcache="0" sizset="4">
<input style="TEXT-ALIGN: right; WIDTH: 105px" value="0,00" name=
"WN_EKPREIS" dttype="number" dtscale="2" dbvalue="0.00"
jquery16409152079553898877="59">
</td>
<td>
<img name="takewn_ekpreis" src="../Style/MenuIcons/down.gif">
</td>
<td sizcache="0" sizset="5">
<input style="TEXT-ALIGN: right; WIDTH: 30px" name="WN_EKWAEHRUNG"
dttype="string" dbvalue="USD" disabledvalue="USD"
jquery16409152079553898877="60">
</td>
<td>
<img name="pickwn_ekwaehrung" src="../Style/fieldicons/picklist.gif">
</td>
<td>
<img name="takewn_ekwaehrung" src="../Style/MenuIcons/down.gif">
</td>
<td sizcache="0" sizset="6">
<input style="TEXT-ALIGN: right; WIDTH: 45px" value="1,00" name=
"WN_EK_SONDERRABATT" dttype="number" dtscale="2" dbvalue="1.00"
jquery16409152079553898877="61">
</td>
<td>
<img name="takewn_ek_sonderrabatt" src="../Style/MenuIcons/down.gif">
</td>
<td sizcache="0" sizset="7">
<input style="TEXT-ALIGN: right; WIDTH: 45px" value="0,00" name=
"WN_EK_SONDERRABATT2" dttype="number" dtscale="2" dbvalue="0.00"
jquery16409152079553898877="62">
</td>
<td>
<img name="takewn_ek_sonderrabatt2" src=
"../Style/MenuIcons/down.gif">
</td>
<td style="TEXT-ALIGN: right" name="WN_EKPREIS_FINAL" dttype="number"
dtscale="2" dbvalue="0.00">
0,00
</td>
<td style="TEXT-ALIGN: right" name="WN_AUFSCHLAG" dttype="number"
dtscale="2" dbvalue="10.00">
10,00
</td>
<td style="TEXT-ALIGN: right" name="MARGE" dttype="number" dtscale="2"
dbvalue="100.00">
100,00
</td>
<td style="TEXT-ALIGN: right" name="WN_AUFSCHLAGREAL" dttype="number"
dtscale="2" dbvalue="0.00">
0,00
</td>
<td sizcache="0" sizset="8">
<input class="CHECKONE" type="checkbox" name="WN_EKFIX" dttype="i2"
dbvalue="0" clickevent="dataChange">
</td>
<td>
<img name="takewn_ekfix" src="../Style/MenuIcons/down.gif">
</td>
<td sizcache="0" sizset="9">
<input style="TEXT-ALIGN: right; WIDTH: 105px" value="0,00" name=
"NETTO" dttype="number" dtscale="2" dbvalue="0.00"
jquery16409152079553898877="63">
</td>
<td sizcache="0" sizset="10">
<input style="TEXT-ALIGN: right; WIDTH: 35px" value="0,00" name=
"RABATT" dttype="number" dtscale="2" dbvalue="0.00"
jquery16409152079553898877="64">
</td>
<td>
<img name="takerabatt" src="../Style/MenuIcons/down.gif">
</td>
<td sizcache="0" sizset="11">
<input style="TEXT-ALIGN: right; WIDTH: 35px" value="0,00" name=
"RABATT2" dttype="number" dtscale="2" dbvalue="0.00"
jquery16409152079553898877="65">
</td>
<td>
<img name="takerabatt2" src="../Style/MenuIcons/down.gif">
</td>
<td sizcache="0" sizset="12">
<input style="TEXT-ALIGN: right; WIDTH: 35px" value="0,00" name=
"RABATT3" dttype="number" dtscale="2" dbvalue="0.00"
jquery16409152079553898877="66">
</td>
<td>
<img name="takerabatt3" src="../Style/MenuIcons/down.gif">
</td>
<td sizcache="0" sizset="13">
<input style="TEXT-ALIGN: right; WIDTH: 35px" value="0,00" name=
"WN_MARKUP" dttype="number" dtscale="2" dbvalue="0.00"
jquery16409152079553898877="67">
</td>
<td>
<img name="takewn_markup" src="../Style/MenuIcons/down.gif">
</td>
<td style="TEXT-ALIGN: right" name="WN_MARKUPPREIS" dttype="number"
dtscale="2" dbvalue="0.00">
0,00
</td>
<td style="TEXT-ALIGN: right" name="WN_GESAMTRABATT" dttype="number"
dtscale="2" dbvalue="0.00">
0,00
</td>
<td style="TEXT-ALIGN: right" name="STKERLOES" dttype="number" dtscale=
"2" dbvalue="0.00">
0,00
</td>
<td style="TEXT-ALIGN: right" name="DECKUNG" dttype="number" dtscale=
"2" dbvalue="0.00">
0,00
</td>
<td style="TEXT-ALIGN: right" name="ERLOES" dttype="number" dtscale="2"
dbvalue="0.00">
0,00
</td>
<td sizcache="0" sizset="14">
<input style="TEXT-ALIGN: right; WIDTH: 35px" value="0,00" name=
"MRABATT" dttype="number" dtscale="2" dbvalue="0.00"
jquery16409152079553898877="68">
</td>
<td>
<img name="takemrabatt" src="../Style/MenuIcons/down.gif">
</td>
<td sizcache="0" sizset="15">
<input style="TEXT-ALIGN: right; WIDTH: 35px" value="0,00" name=
"RABATT4" dttype="number" dtscale="2" dbvalue="0.00"
jquery16409152079553898877="69">
</td>
<td>
<img name="takerabatt4" src="../Style/MenuIcons/down.gif">
</td>
<td name="USERPOS" dttype="string" dbvalue="21">
<a href=
"../Sales/AuftragPosRec.aspx?auftrag=200146&accessID=5096"
target="_blank">21</a>
</td>
<td style="DISPLAY: none" name="TEXT"></td>
<td style="DISPLAY: none" name="SORTIERUNG">
a
</td>
<td style="DISPLAY: none" name="HERSTELLERNAME">
Sony Europe Limited (B)
</td>
<td style="DISPLAY: none" name="LIEFERANTNAME"></td>
<td style="DISPLAY: none" name="POSITION">
21
</td>
<td style="DISPLAY: none" name="ARTIKEL">
114080
</td>
<td name="WN_ORDNERNAME"></td>
<td style="DISPLAY: none" name="WN_LIEFERANT"></td>
<td style="DISPLAY: none" name="WN_MARKE"></td>
</tr>

Without seeing the script in addition to the HTML, I can suggest only two things:
1) Profile, profile, profile. Either use a better browser (Chrome/Safari+Devtools or Firefox+Firebug can help) or try to use some of MS' dev tools (I have no experience with using these for profiling, but from what I recall MS's script debugger can do it) or DynaTrace, which I've found to be pretty good for working with IE. Find what is slow, and fix it.
2) Get rid of all the input boxes, and convert the cells to input boxes on click. In jQuery, use a delegate for this. Something along the lines of:
$('table').delegate('td', 'click', function() {
// Switch back and forth between input and text here.
});
This should eliminate pretty much any slowdown from script. I am skeptical about the claims in the comments claiming jQuery has to 'search' for the element which is blurred - this should be available on the event object, as far as I understand. I don't follow why jQuery would have to search for it - but maybe I'm missing something.