选择下拉列表时从行中获取相应的单元格值

Question

我动态生成了下表

代码如下

echo '
<tr>
  <td scope="row">'.$srNumberOa.'</td>
  <td>'.$check.'</td>
  <td>'.$numberOfDays.'</td>
  <td>'.$uph.'</td>
  <td>'.$numberOfUsefulHoursPerOa.'</td>
  <td>'.$numberOfPinsPerOa.'</td>
  <td>

    <div class="col-sm" id="">
      <select class="form-control" id="" name="">
        <option selected="selected"> </option>
        <option>Shift 1</option>
        <option>Shift 2</option>
        <option>Shift 3</option>
        <option>Shift 4</option>
      </select>
    </div>


  </td>

  <td>

    <input type="radio" name="currentOa">

  </td>
</tr>';

所有这些都是<td> 标签内的动态php 变量。

我想在选择相应的“OA Shift”下拉列表时提醒或捕获“名称”的值和相应的单选按钮状态。例如，如果我更改序列号的“OA Shift”下拉列表：第 11 行，它应该警告或捕获名称为 X 和单选按钮为假。有人可以帮我怎么做吗？

编辑 1

请注意，我上面显示的表单是 Ajax 输出。所以所有这些值都来自另一个 php 页面。

Answer 1

使用 jQuery，这是通过在 select 元素上触发所需的事件处理程序来完成的，从那里开始，找到parents() 之一，即当前行 (<tr>)，然后找到包含此行中的名称和相应的单选按钮：

https://codepen.io/shikifujin/pen/xxbZgqx

当您在select 输入（'change' 事件）的下拉列表中选择一个元素时，将触发此示例中的警报。

jQuery 代码如下所示：

$("select.form-control").on("focus", function() {
  var rowName = $(this)
    .parents("tr")
    .children("td:nth-child(2)")
    .text();
  var rowRadio = $(this)
    .parents("tr")
    .find('input[name="currentOa"]')
    .is(":checked");
  alert(
    "Name: " + rowName + " currentOa checked: " + (rowRadio ? "yes" : "no")
  );
});

为了获取行的当前值，您的 HTML 代码没有提供任何好的选择器。包含名称的列是第二个 td-child (td:nth-child(2)) - 如果它被标记为一个类（例如，<td class="col-name" 或类似的东西）会更好。 该行中单选按钮的当前值并不完全在子级，因此通过使用.find('input[name="currentOa"]')遍历该行下方的DOM找到它。应用.is(':checked') 返回其当前状态。

然后，您可以对 rowName 和 rowRadio 值做任何您想做的事情，而不是提醒它们。

编辑：

我在https://codepen.io/shikifujin/pen/xxbZgqx 更新了我的示例以执行AJAX（将上面的jQuery 代码包装在一个函数onAfterAJAX 中）。单击按钮时，<tr>s 会通过 $.ajax() 从另一笔请求并附加到表格中：

$("button#ajax").on("click", function() {
  $.ajax({
    url: "https://codepen.io/shikifujin/pen/dyPGJBq.html",
    success: function(data, status, xhr) {
      $("table").append(data);
      onAfterAJAX();
    }
  });
});

之前之所以不起作用，是因为它是按这个顺序发生的：

1. 加载了带有预填充或空表的页面的 DOM，
2. 然后触发所有select.form-control 的jQuery。
3. 接下来，您的页面可能通过 AJAX 请求内容并将其添加到页面中。

但是在 3. 处，添加更改处理程序的 jQuery 函数已经完成并完成。现在，每当成功的 AJAX 请求返回时，将执行包装函数 onAfterAJAX，并将处理程序应用于新添加的元素。

为了防止将多个事件添加到先前存在的行中，我在更改处理程序前面添加了一个.off('change')，以摆脱任何先前添加的处理程序。这意味着，这既适用于替换，也适用于替换内容。

Answer 2

当您使用 jquery - 您可以为您的选择添加一个 change 处理程序：

$('select.form-control').on('change', function() {
    // find the parent `tr` for the `select`
    var tr = $(this).closest('tr');
    // `name` is the text of second `td`:
    var name = tr.find('td').eq(1).text();
    alert(name);
    // checkbox can be found by "name" attribute, for example:
    var cb = tr.find('input[name="currentOa"]');
    alert(cb.prop('checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
<tr>
  <td scope="row">11</td>
  <td>X</td>
  <td>1</td>
  <td>1</td>
  <td>1</td>
  <td>1</td>
  <td>
  <div class="col-sm" id="">
      <select class="form-control" id="" name="">
        <option selected="selected"> </option>
        <option>Shift 1</option>
        <option>Shift 2</option>
        <option>Shift 3</option>
        <option>Shift 4</option>
      </select>
    </div>


  </td>

  <td>

    <input type="radio" name="currentOa">

  </td>
</tr>
<tr>
  <td scope="row">22</td>
  <td>Y</td>
  <td>2</td>
  <td>2</td>
  <td>2</td>
  <td>2</td>
  <td>
  <div class="col-sm" id="">
      <select class="form-control" id="" name="">
        <option selected="selected"> </option>
        <option>Shift 1</option>
        <option>Shift 2</option>
        <option>Shift 3</option>
        <option>Shift 4</option>
      </select>
    </div>


  </td>

  <td>

    <input type="radio" name="currentOa">

  </td>
</tr>
</table>

Answer 3

以下代码可用于实现上述目标：

$('select.select-dropdown').on('change', function() {
  var name = $(this).closest('tr').find('td:first-child').text();
  var radioStatus = $(this).closest('tr').find('input[type="radio"]').is(':checked');
  alert("Name: " + name + "::" + "select value: " + $(this).val() + "::" + "Radio Status: " + radioStatus);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Name 1</td>
    <td><input type="radio" name="flag" /></td>
    <td>
      <select class="select-dropdown">
        <option value="1">Opt 1</option>
        <option value="2">Opt 2</option>
        <option value="3">Opt 3</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Name 2</td>
    <td><input type="radio" name="flag" /></td>
    <td>
      <select class="select-dropdown">
        <option value="4">Opt 4</option>
        <option value="5">Opt 5</option>
        <option value="6">Opt 6</option>
      </select>
    </td>
  </tr>
</table>

Here 是相同的 JSFiddle 链接。