Question

我在HTML页面中动态创建表/表。可能有一个或多个表。数量是多种多样的。表格上只有一行，这些行具有相同的表格结构。在我的表格行中有一个选择选项和一个按钮。我在这里做的是更改选择选项值并使用按钮更新数据库。为此，我从select选项中选择并将该值放入隐藏的输入字段。后来我正在获取所有输入数据并更新数据库。例如，如果我有两个表，我需要有两个ID用于选择选项。为此，我在文档就绪中循环来自 for loop 的ID。但那并没有奏效。这意味着我无法访问该值。但是，如果我在同一个文档下硬编码两个ID就可以了。

... TBODY

echo "<form id='form' name='form'>";
                          echo "<tbody class='tbl_tbody'>";
                            echo "<tr>";
                              echo "<td style='width: 115px;'><b>".trim($row_sub_res['statDate'])."</b></td>";
                              echo "<td style='width: 115px;'><b>".trim($row_sub_res['tarDate'])."</b></td>";

                              echo "<td>";

                              echo "<label class='w3-text-red'><b>".trim($row_sub_res['status_name'])."</b></label><br>";
                              echo "<input name='oldSubStat' type ='hidden' id='selected_stat' value=".trim($row_sub_res['status']).">";  //first input 0
                              echo "<input name='newSubStat' type ='hidden' id='selected_stat_new_id' class='selected_statx$countx'>";

                              echo "<select id='select_my_id$countx' class='select_my_class$countx' >";
                              echo "<option disabled selected>Change Status</option>";
                              echo "<option id='1' value='1'>Pending</option>";
                              echo "<option id='3' value='3'>Complete</option>";
                              echo "<option id='4' value='4'>On Hold</option>";
                              echo "</select>";

                              echo "</td>";

                              //echo "<td>".trim($row_sub_res['tarDate'])."</td>";
                              echo "<td><b><input type='text' id='targetDatepickerID$countx' class='datepickerClass' disabled='disabled' placeholder='yyyy-mm-dd' name='tdate' value=".trim($row_sub_res['tarDate'])."></b></td>";

                              echo "<td> <input type='submit' id='sub_row_update_id$countx' class='sub_row_update' value='Update'/> </td>";
                            echo "</tr>";
                          echo "</tbody>";
                        echo "</form>";

我正在循环表。 countx正在递增。

如果我有两张桌子，那么如果我像这样硬编码，一切都运作良好......

  $(".select_my_class0").change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx0").val("");
    $(".selected_statx0").val(idx);
    console.log("idx " + idx);
 });

  $(".select_my_class1").change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx1").val("");
    $(".selected_statx1").val(idx);
    console.log("idx " + idx);
 });

但如果我循环这个。那不行......

for (var j = 0; j < 2; j++) {
   console.log("idx " + j);
   $(".select_my_class"+j).change(function() {
   var idx = $(this).children(":selected").attr("id");
   $(".selected_statx"+j).val("test");
   $(".selected_statx"+j).val(idx);

   });
}

我尝试同时使用ID和类，但在循环中两者都不起作用。

我的按钮点击事件......

  for (var i = 0; i < 3; i++) {

  $("#sub_row_update_id"+i).click(function(e) {

    var $subitem;
    e.preventDefault();
   $subitem = $(this).closest("tr")   // Finds the closest row <tr> 
                     .find("input").each(function() {

    });

      var xxx2  = $subitem[0]["value"];  //old status
      var yyy2  = $subitem[1]["value"];  //new status
      var zzz2  = $subitem[2]["value"];  //new tar date

      console.log(xxx2); 
      console.log(yyy2);
      console.log(zzz2);

  });

  }

Answer 1

你不必循环它，你可以使用以选择器开始。

$("select[class^='select_my_class']").change(function() {
  var n = $(this).attr("id").match(/\d/g)[0];
  var idx = $(this).find("option:selected").attr("id");
  $(".selected_statx"+n).val("test");
  $(".selected_statx"+n).val(idx);
});

Answer 2

您附加事件监听器的解决方案似乎都有效。这是一个有关ID：s的JSfiffle的工作演示。所以你应该寻找其他错误来源，可能在你发布的内容之外。您是否正确定位元素？

https://jsfiddle.net/wj8aygsy/

$("#select_my_id0").change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx0").val("");
    $(".selected_statx0").val(idx);
    console.log("separate " + idx);
 });

  $("#select_my_id1").change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx1").val("");
    $(".selected_statx1").val(idx);
    console.log("separate " + idx);
 }); 


 for (var j = 0; j < 2; j++) {
   console.log("idx " + j);
   $("#select_my_id"+j).change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx"+j).val("test");
    $(".selected_statx"+j).val(idx);
    console.log("loop " + idx);
   });
}

从相同结构化表中的select选项中获取值

2 个答案: