Smarter way to update td content in jQuery - php

Question

I'm currently running an html and jQuery code that works but looks very ugly for me. I would really appreciate suggestion to do this more smarter.
Goal: update cells of a php generated table using an input field. Each cells contains a basic value which should be multiplied by the input.
Currently, I read the value of the input, take the basic value of each cell from an hidden input and rewrite the whole html of each cell ( hidden input + updated data).
Html code:
<table id='tbl'>
<thead>
<tr>
<th colspan="2">Quantity:
<input type="text" id="quantity" name="quantity" value="1">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="1_1" type="hidden" value="11"><span>11</span>
</td>
<td>
<input name="1_2" type="hidden" value="12"><span>12</span>
</td>
</tr>
<tr>
<td>
<input name="2_1" type="hidden" value="21">21
</td>
<td>
<input name="2_2" type="hidden" value="22">22
</td>
</tr>
<tr>
<td>
<input name="3_1" type="hidden" value="31">31
</td>
<td>
<input name="2_2" type="hidden" value="32">32
</td>
</tr>
</tbody>
</table>
Script:
$('#quantity').keyup(function () {
var quantity = parseFloat($(this).val());
if (quantity == "" || isNaN(quantity))
quantity = 1;
$('#tbl tbody tr td').map(function () {
var $row = $(this);
var $refvalue = $row.find(':input[type=hidden]').val();
var $refname = $row.find(':input[type=hidden]').attr('name');
$row.html('<input name="' + $refname + '" type="hidden" value="' + $refvalue + '">' + $refvalue * quantity);
});
});
Fiddle : http://jsfiddle.net/5KKrD/
Is there a better way to do ? I'm able to change both table, js and so on.
Regards

Answer 1

this is my approach - use data attribute (instead of a hidden input) to pass the multiplier, e.g.:
<td class="cell" data-value="11">11</td>
with this - you can grab the value very easily using jquery, e.g.:
$('.cell').data('value')
DEMO

Answer 2

I have refined your code a bit,its working smoothly
JS CODE:
$('#quantity').keyup(function () {
if ($(this).val()) {
var quantity = parseInt($(this).val());
if (quantity == "" || isNaN(quantity)) quantity = 1;
$('#tbl tbody tr td input').each(function () {
var row = $(this);
var mulVal = row.val() * quantity;
$(this).attr('value', mulVal);
$(this).parent().find('span').text(mulVal);
//var $refvalue = $row.find(':input[type=hidden]').val();
//var $refname = $row.find(':input[type=hidden]').attr( 'name' );
//$row.html( '<input name="'+ $refname +'" type="hidden" value="'+ $refvalue + '">' + $refvalue * quantity );
});
}
});
HTML CODE:
<table id='tbl'>
<thead>
<tr>
<th colspan="2">Quantity:
<input type="text" id="quantity" name="quantity" value="1">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="1_1" type="hidden" value="11" /><span>11</span>
</td>
<td>
<input name="1_2" type="hidden" value="12" /><span>12</span>
</td>
</tr>
<tr>
<td>
<input name="2_1" type="hidden" value="21" /><span>21</span>
</td>
<td>
<input name="2_2" type="hidden" value="22" /><span>22</span>
</td>
</tr>
<tr>
<td>
<input name="3_1" type="hidden" value="31" /><span>31</span>
</td>
<td>
<input name="2_2" type="hidden" value="32" /><span>32</span>
</td>
</tr>
</tbody>
</table>
LIVE DEMO
Happy Coding :)

Answer 3

It might be a bit over-kill for your needs, but this is what backbone.js aims to do - remove data from the HTML DOM and instead treats it Models and Views.
http://backbonejs.org/#examples
Apart from that, what's wrong with your current approach - what specifically do you want to improve?

Answer 4

The code cleaned up a bit:
$('#quantity').keyup(function() {
var quantity = parseFloat($(this).val());
quantity = ( quantity == "" || isNaN( quantity ) ? 1 : quantity;
$('#tbl tbody tr td').map(function() {
var $hiddenElement = $(this).find(input[type='hidden']);
$(this).html( '<input name="'+ $(hiddenElement).attr('name') +'" type="hidden" value="'+ $(hiddenElement).val() + '">' + (parseFloat($(hiddenElement).val()) * quantity) );
});
});

Answer 5

I think yours is just fine, the only thing I would personally do to improve it is place html in a var and use it as a template to keep syntax cleaner, I would replace this
$row.html( '<input name="'+ $refname +'" type="hidden" value="'+ $refvalue + '">' + $refvalue * quantity );
with this
var template ='<input name="{name}" type="hidden" value="{refvalue}">{res}</a>';
then
$row.html(template.replace('{name}', $refname) ); // and so on