使用javascript从迭代文本字段中获取值

我有一个已经循环了很多次的文本字段，它的值来自数据库，我想得到每个已经循环了很多次的文本字段的值。第一个文本字段可以工作，但当我单击另一个文本字段时，它似乎不工作

$("#order").click(function()
{   
    var IDno_textfield = $("#IDno_textfield").val();
    var name_textfield = $("#name_textfield").val();
    
    alert("ID no: " + IDno_textfield + " " + " Name: " + name_textfield);
}); 

这是javascript代码，这是我的代码，用于获取迭代文本字段中的值

            <?php
              $c = 0;   
                if($result->num_rows > 0) 
                {                                   
                    while($row = $result->fetch_assoc()) 
                    {                                       
            ?>          <tr>
                            <td>
                                <img src = "data:image/jpeg; base64 , <?php echo base64_encode($row['product_image']); ?>"height = "250" width = "330">
                            <br>
                                    <div id = "order">
                                            Order now
                                    </div>
                            </td>                       
                            <td>
                                No.
                                    <input type = "text" value = "<?php echo $row['product_IDno']; ?>"
                                    id = "IDno_textfield">
                                    <br>
                                Name: 
                                    <input type = "text" value = "<?php echo $row['product_name']; ?>"
                                    id = "name_textfield">
                                <br>
                                Price:
                                        <input type = "text" value = "<?php echo $row['product_price']; ?>"id = "production_textfield">
                                <p>
                                    Description: <?php echo $row['product_description']; ?>
                                </p>
                            </td>
                        </tr>   
            <?php
                    }
                }
                else
                {
                    echo "No Menu Found";
                }
            ?> 

“height=“250”width=“330”>


现在点菜
不

这是php代码，它将数据提取到textfield并多次迭代文本字段

这是结果，它只在第一个文本字段有效一次，但对其他文本字段无效。如果您能帮助我，我将非常高兴。谢谢

$("#order").click(function() {
var IDno_textfield = $(this).parent('tr').find("#IDno_textfield").val();
var name_textfield = $(this).parent('tr').find("#name_textfield").val();
alert("ID no: " + IDno_textfield + " " + " Name: " + name_textfield);
}); 

试试这个

“height=“250”width=“330”>

点击事件将更改为

$("#order").click(function()
{   
    var id = $(this).attr('data-attr')
    var IDno_textfield = $("#IDno_textfield_"+id).val();
    var name_textfield = $("#name_textfield_"+id).val();

    alert("ID no: " + IDno_textfield + " " + " Name: " + name_textfield);
});

---

对于不同的元素id，可以执行以下操作：

          <?php 
          $c = 0;   
            if($result->num_rows > 0) 
            {                                   
                while($row = $result->fetch_assoc()) 
                {                                       
         ?>     
     <tr>
                    <td>
                        <img src="data:image/jpeg; base64 , <?php echo base64_encode($row['product_image']); ?>"height="250" width="330">
                    <br>
                            <div id="order-<?php echo $row['product_IDno']; ?>" class="order">
                                    Order now
                            </div>
                    </td>                       
                    <td>
                        No.
                            <input type="text" value="<?php echo $row['product_IDno']; ?>" id="IDno_textfield-<?php echo $row['product_IDno']; ?>">
                            <br>
                        Name: 
                            <input type="text" value = "<?php echo $row['product_name']; ?>" id="name_textfield-<?php echo $row['product_IDno']; ?>">
                        <br>
                        Price:
                                <input type="text" value="<?php echo $row['product_price']; ?>" id="production_textfield-<?php echo $row['product_IDno']; ?>">
                        <p>
                            Description: <?php echo $row['product_description']; ?>
                        </p>
                    </td>
                </tr>   
    <?php
            }
        }
        else
        {
            echo "No Menu Found";
        }
    ?> 

---

页面上的每个元素都应具有唯一标识符“id”。对于循环中元素的id，包括按钮“Order”，只需添加产品本身的标识符“id”，因此每个“id”都会不同。每个按钮“顺序”是否属于与所有按钮“顺序”相同但id始终不同的同一类。随后，在单击按钮时，该类的按钮将获取属性“id”的值，并删除所有按钮的通用部分（在您的情况下为“顺序”），因此它仍然是唯一部分（id）您可以找到将通用零件与由此获得的id连接在一起的元素。

id

s在文档中应该是唯一的。任何两个id都不能相同。将id更改为名称或类，因为它们允许非唯一值。我应该将id更改为类？它会提示这两个变量都有一个未定义的值。您应该使用类名而不是id（IDno_textfield，name_textfield），它仍然是一样的。它仍然是一样的。谢谢您，我感谢您的帮助。您的意思是bind（）方法？你能解释一下你是怎么做的吗？

 $(".order").on('click', function()
 {   
    var productID = $(this).prop('id').replace('order-', '');

    var IDno_textfield = $("#IDno_textfield-" + productID).val();
    var name_textfield = $("#name_textfield-" + productID).val();

    alert("ID no: " + IDno_textfield + " " + " Name: " + name_textfield);
});