通过tr动态创建的输入框如何使用JQuery获取其值？

Question

我使用 JQuery 动态创建了一个表格，我想获取 input 元素的值：

$el.append('<tr data-id='+ data[i].id + ' data-token='+data[i].token + '><td>'+data[i].order+'</td>\n\
      <td><input name="qty" id="qty" type="number" value="'+data[i].qty+'" min="1"></td>\n\
   ......

使用这段代码，我可以生成表格（这只是代码片段）。 我知道如何访问 tr 标签的值：

$('body').on('click', 'a.link', function(e) {
    e.preventDefault();

    var tr = $(this).closest('tr'),
        id = tr.data('id'), // we have the id
        token = tr.data('token'), // we have the token 
        qty = tr.data('qty'); <------------- this not working
 })

如何获取qty的值？

- Klapsius

Answer 1

问题：在您的上没有属性。而且您的整个表格中都没有。

解决方案：在创建表格时，您将data[i].qty分配给元素作为值。因此，您需要读取元素的值。代码如下：

   qty = tr.find('#qty').val();

注意：Satpal提供了一个有效的观点。如果你正在使用循环构建，那么你会给所有行中的元素分配相同的id，这并不是推荐的做法。最好去掉id属性，仅使用name属性选择元素，例如：

tr.find('input[name="qty"]').val(); 或者 tr.find('td:eq(1) input').val()

但是，如果确实需要这样做，Satpal给出的答案是正确的。

- Rajshekar Reddy

---

OP正在动态创建带有id="qty"的元素，这将创建无效的HTML。那么为什么不直接使用$('#qty').val()呢？因为ID必须是唯一的。 - Satpal

@Satpal 我们不确定他是否在循环中。如果是的话，你是正确的。如果不是呢？ :) - Rajshekar Reddy

那么 $('#qty').val() 就足够了。 - Satpal

@Satpal，你是对的。我已经在我的答案中添加了详细信息。 - Rajshekar Reddy

Answer 2

首先，在同一文档中，id 应该是唯一的，所以你可以将 id 替换为 class：

<input name="qty" class="qty" type="number" value="'+data[i].qty+'" min="1">

如果你想获取 input 的值，可以使用 find 和输入框的 class，然后使用 .val()，代码应该如下：

qty = tr.find('.qty').val();

希望这能帮到你。

- Zakaria Acharki

---

OP正在动态创建带有id="qty"的元素，这将创建无效的HTML。那么为什么不直接使用$('#qty').val()呢？因为ID必须是唯一的。 - Satpal

谢谢您的介入，但$('#qty').val()不能解决重复id的问题...我建议使用类(class)代替，请查看我的更新。 - Zakaria Acharki

Answer 3

你应该使用.find()与Attribute Equals Selector [name=”value”]一起使用。

qty = tr.find('[name=qty]').val();

由于您正在使用 id="qty" 动态创建元素，这将创建无效的HTML。因为标识符必须是唯一的。

- Satpal

Answer 4

由于元素的id是唯一的，所以$('#qty').val()就足够了。

qty = $('#qty').val();

- Sanjay Kumar N S

---

这不是动态生成的HTML元素的解决方案。 - Majid Shahabfar

Answer 5

qty = tr.data('qty'); 这意味着您想要访问数据属性，因为您没有任何像"data-qty"这样的数据属性，所以您无法访问它。因此，请将其设置为类或ID。

- Pawan