Question

我有这样的表。

<?php $no=1; 
  foreach($this->cart->contents() as $items): ?>
 <input type="hidden" value="<?php echo $items['rowid']?>" class="rowid" id="<?php echo $items['rowid']?>" name="rowid"/>
 <tr><td> <?php echo $no; 
          $data = array('id' => $items['id'], 'name' => 'id', 'value' => $items['id']);
          echo form_hidden($data); ?></td>
     <td><?php echo $items['name']?><?php $items['options']['exp']?></td>
     <td><input type="text" value="<?php echo $items['qty']?>" name="qty" id="<?php echo $items['id']?>" class="qty"/>
         <button class="update" id="<?php echo 'up'.$items['id']?>" style="margin-top:-10px"><i class=" icon-refresh"></i>update</button></td>
     <td><?php echo $this->cart->format_number($items['price']); ?></td>
  </tr>

它会显示如下：

No.  Name       Qty       Price   subtotal                                                            
 1.   xxx   |1| [update]  500       500
 2.   xox   |1| [update]  505       505

我想要qty xox。这是我的代码

$(".update").click(function(){
   var idbarang = $(".qty").attr('id');
   var qty = $(".qty").val();
   var row = (this.id);
   var rowid = row.substr(2);

但是当我更新它时，xxx总是会改变。我认为是因为attr（＆＃39; id＆＃39;）。如何更新xox？

Answer 1

HTML

要更正我使用data-id自定义属性的html。要了解有关自定义属性的详情，请查看MDN及其使用说明。

<table>
    <tr><td>xxx</td>
    <td><input type="text" class="qty" data-id="123"/>
        <button class="update" id="123">update</button></td>
    <td class="display" data-id="123">500</td>
    <td>[subtotal]</td>
</tr>
<tr><td>xox</td>
    <td><input type="text" class="qty" data-id="121"/>
        <button class="update" id="121">update</button></td>
    <td class="display" data-id="121">505</td>
    <td>[subtotal]</td>
</tr>
</table>

的JavaScript

之后，我在jQuery中使用attribute selectors来区分不同的行，以便每个按钮更改正确的行。

$(".update").click(function(e){
   var t = e.target;
   var idbarang = $(t).attr('id');
   var qty = $("[data-id='"+idbarang+"'].qty").val();
   $("[data-id='"+idbarang+"'].display").html(qty);
})

如前所述，id必须是唯一的（更多关于here），但由于您似乎使用它们来识别产品ID而不是传统的DOM元素ID，我试图保持精神。

您还可以使用行声明中的data-id属性（即<tr data-id='123'></tr>）更加语义化结构化内容，然后使用子选择器，例如：

   $("tr[data-id='"+idbarang+"'] .display").html(qty);

]和.之间的空格。

结论

您可以在此fiddle中看到所有内容汇集在一起。希望有所帮助。

Answer 2

$(".update").click(function(){
    var qty = $("#121").val();

但是，id在整个HTML文档中应该是唯一的。目前，您的按钮和输入具有相同的ID，这是无效的HTML。

如何在javascript中更新数量

2 个答案:

HTML

的JavaScript

结论