jQuery - 搜索或排序后最接近的 TD 值答案

【问题标题】：jQuery - Closest TD values after searching or sortingjQuery - 搜索或排序后最接近的 TD 值
【发布时间】：2017-08-01 14:34:12
【问题描述】：

我有一个模式窗口，它会弹出并在表格中显示供应商列表。每行都有一个“选择”按钮，用于从该行中选择数据，然后使用 TD 的值更新父页面上的某些表单输入字段。

在我首先使用数据表搜索或列排序之前，这工作正常。
如果我搜索或排序此表，然后使用选择按钮，则不会分配任何数据。

同样，这很好用，只有在我先使用内置数据表搜索/排序进行任何搜索或排序时才会中断。

$(document).ready(function () {
    $(".select-vendor").click(function () {
        var $row = $(this).closest("tr");    // Find the row
        var $tds = $row.find("td");
        console.log($row);
        $.each($tds, function () {
            document.forms["myForm"]["vendNameAddr"].value = $row.find('#vendNameAddrSearch').val();
            document.forms["myForm"]["vendPhone"].value = $row.find('#vendPhoneSearch').val();
            document.forms["myForm"]["vendEmail"].value = $row.find('#vendEmailSearch').val();
        });
    });
});

echo '<tr><td><input type="hidden" name="vendNameAddrSearch" id="vendNameAddrSearch" value="' . $vendorinfo . '"><input type="hidden" name="vendPhoneSearch" id="vendPhoneSearch" value="' . $res->phonenumber . '"><input type="hidden" name="vendEmailSearch" id="vendEmailSearch" value="' . $res->emailaddress . '"><button type="button" class="select-vendor" onclick="document.getElementById(\'vendorModal\').style.display=\'none\'">Select</button></td><td>' . $res->vendorname . '</td><td>' . $res->address1 . '</td><td>' . $res->address2 . '</td><td>' . $res->city . '</td><td>' . $res->state . '</td><td>' . $res->zip . '</td><td>' . $res->country . '</td></tr>';

【问题讨论】：

尝试创建一个有效的示例链接（如 fiddle 或此处带有虚拟数据），以便重现问题，我们会为您提供帮助
我同意..如果您使用数据表，可能会显示一些数据表代码..

标签： jquery html datatables

【解决方案1】：

您可能有重复的 ID。将所有 ID 更改为 class 并使用您开始的相对寻址

$(".select-vendor").on("click", function() {
  $('#vendorModal').hide();
  var $row = $(this).closest("tr"); // Find the row
  $row.find(".vendNameAddr").val($row.find('.vendNameAddrSearch').val());
  $row.find(".vendPhone").val($row.find('.vendPhoneSearch').val());
  $row.find(".vendEmail").val($row.find('.vendEmailSearch').val());
});

<tr>
  <td><input type="hidden" name="vendNameAddrSearch" class="vendNameAddrSearch" value="$vendorinfo">
    <input type="hidden" name="vendPhoneSearch" class="vendPhoneSearch" value="$res-phonenumber">
    <input type="hidden" name="vendEmailSearch" class="vendEmailSearch" value="$res-emailaddress">
    <button type="button" class="select-vendor">Select</button></td>
  <td>$res-vendorname</td>
  <td>$res-address1</td>
  <td>$res-address2</td>
  <td>$res-city</td>
  <td>$res-state</td>
  <td>$res-zip</td>
  <td>$res-country</td>
</tr>

【讨论】：

【解决方案2】：

解决了这个问题。一旦我用以下方式包装了 onclick 方法：

“fnDrawCallback”：函数（oSettings）{}

它现在可以在每次重绘后获取新的行数据。

【讨论】：