更智能的方式來更新jQuery中的td內容

Question

我目前正在運行一個html和jQuery代碼，但對我來說看起來非常難看。我真的很感激建議，這樣做更聰明。

目標：使用輸入字段更新php生成的表的單元格。每個單元格都包含一個應該與輸入相乘的基本值。

目前，我讀取輸入值，從隱藏輸入中獲取每個單元格的基本值，並重寫每個單元格的全部html（隱藏輸入+更新數據）。

HTML代碼：

<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> 

腳本：

$('#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); 
    }); 
}); 

小提琴：http://jsfiddle.net/5KKrD/

有沒有更好的辦法呢？我可以更改表格，js等等。

問候

Answer 1

這是我的方法 - 使用data屬性（而不是一個隱藏的輸入），通過乘數，例如：

<td class="cell" data-value="11">11</td> 

這個 - 你可以很容易搶值使用jQuery，例如：

$('.cell').data('value') 

DEMO

Answer 2

這可能是有點過殺人爲您的需求，但是這是Backbone.js的目標做 - 刪除從HTML DOM數據，而是會將其模型和視圖。

http://backbonejs.org/#examples

從

除此之外，有什麼錯你目前的做法 - 你想提高具體是什麼？

Answer 3

代碼清理了一下：

$('#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 4

我覺得你是蠻好的，我會親自做，以改善它的唯一事情是地方HTML的變種，並以此爲模板，以保持語法清潔，我將取代這個

$row.html('<input name="'+ $refname +'" type="hidden" value="'+ $refvalue + '">' + $refvalue * quantity); 

與此

var template ='<input name="{name}" type="hidden" value="{refvalue}">{res}</a>'; 

然後

$row.html(template.replace('{name}', $refname)); // and so on 

Answer 5

人有我精你的代碼了一下，它的工作順利進行

JS代碼：

$('#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代碼：

<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

編碼快樂:)