为什么函数中的每个表都会给出错误的结果 - jQuery

Question

我试图在表格的每个单元格的id输入keyup但是它只给出第一列的第一个id和每个输入的keyup的行。我怎么做解决这个问题？

以下是代码：

$(document).on("keyup", ".typeahead_3", function() {
  var $table = $(this).closest('table').attr('id');
  $('#' + $table + '> tbody  > tr').each(function() {

    var ast_id = $(this).closest('tr').find("input[name=ast_id]").val();
    var asset_id = $(this).closest('tr').find("input[name=asset_id]").val();
    var id = $(this).closest('tr').find("input[name=employee_id]").attr("id");
    console.log(id);
    $('#' + id).typeahead(null, {
      source: [{
        "name": "Afghanistan",
        "code": "AF",
        "ccn0": "040"
      }, {
        "name": "Land Islands",
        "code": "AX",
        "ccn0": "050"
      }, {
        "name": "Albania",
        "code": "AL",
        "ccn0": "060"
      }, {
        "name": "Algeria",
        "code": "DZ",
        "ccn0": "070"
      }]
    });

  });
});

<link href="http://t0m.github.io/select2-bootstrap-css/select2-bootstrap.css" rel="stylesheet"/>
<link href="http://select2.github.io/select2/select2-3.5.2/select2.css" rel="stylesheet"/>
<script src="http://select2.github.io/select2/select2-3.5.2/select2.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/0.10.1/typeahead.bundle.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover" id="job-card">
  <thead>
    <tr>
      <td>JOb ID</td>
      <td>Company</td>
      <td>date</td>
      <td align="center" valign="middle" colspan="2"><b>Mini Paver</b></td>
      <td align="center" valign="middle" colspan="3"><b>035m planner</b></td>
    </tr>
    <tr>
      <td colspan="3"></td>
      <td align="center" valign="middle">MP01</td>
      <td align="center" valign="middle">MP02</td>
      <td align="center" valign="middle">035/1</td>
      <td align="center" valign="middle">035/2</td>
      <td align="center" valign="middle">035/3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>C R MacDonald Ltd</td>
      <td>11/01/2018</td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="29" name="ast_id">
        <input type="hidden" class="form-control" value="5" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type295">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="20" name="ast_id">
        <input type="hidden" class="form-control" value="7" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type207">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="12" name="ast_id">
        <input type="hidden" class="form-control" value="2" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type122">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="16" name="ast_id">
        <input type="hidden" class="form-control" value="1" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type161">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="18" name="ast_id">
        <input type="hidden" class="form-control" value="6" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type186">
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>National Road Planing Ltd (Thatcham)</td>
      <td>11/01/2018</td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="22" name="ast_id">
        <input type="hidden" class="form-control" value="1" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type221">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="25" name="ast_id">
        <input type="hidden" class="form-control" value="12" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type2512">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="36" name="ast_id">
        <input type="hidden" class="form-control" value="24" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type3624">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="17" name="ast_id">
        <input type="hidden" class="form-control" value="9" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type179">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="11" name="ast_id">
        <input type="hidden" class="form-control" value="13" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type1113">
      </td>
    </tr>
  </tbody>
</table>

这是js小提琴link

有什么建议吗？

Answer 1

问题出在以下代码中

NextMethod()

在上面的代码 $('#' + $table + '> tbody > tr').each(function() { var ast_id = $(this).closest('tr').find("input[name=ast_id]").val(); var asset_id = $(this).closest('tr').find("input[name=asset_id]").val(); var id = $(this).closest('tr').find("input[name=employee_id]").attr("id") 实际上并没有引用keyup元素。它指的是$(this)元素。这意味着它总是会转到第一行元素并始终为您提供相同的ID。

获取内容非常简单，但是在代码中使它变得复杂。请查看以下代码。

$('#' + $table + '> tbody  > tr')

在上文中，您可以直接获取colsest $(document).on("keyup", ".typeahead_3", function() { var ast_id = $(this).closest('tr').find("input[name=ast_id]").val(); var asset_id = $(this).closest('tr').find("input[name=asset_id]").val(); var id = $(this).closest('tr').find("input[name=employee_id]").attr("id"); console.log(id); $('#' + id).typeahead(null, { source: [{ "name": "Afghanistan", "code": "AF", "ccn0": "040" }, { "name": "Land Islands", "code": "AX", "ccn0": "050" }, { "name": "Albania", "code": "AL", "ccn0": "060" }, { "name": "Algeria", "code": "DZ", "ccn0": "070" }] }); }); 并获得您所期望的所有信息。

DEMO

修改

看到你的评论后，我才知道你在所有地方都使用了相同的ID。在这种情况下，找到最接近的tr而不是td，然后您就会得到预期的结果。

tr

UDPATED DEMO

Answer 2

我不知道您希望从代码中获得什么，但要获取当前id字段的input，您只需获得id $(this)属性}}

$(".typeahead_3").on("keyup", function() {
  var inputTxt = $(this);
  var id = $(this).attr("id");
  var thisTD = inputTxt.closest("td"); //This is the current <td>
  var ast = (thisTD.find("input[name=ast_id]")).val();
  var asset = (thisTD.find("input[name=asset_id]")).val();
  console.log('id = '+id+', ast = '+ast+', asset = '+asset);
  /* The rest of your code */
});

<link href="http://t0m.github.io/select2-bootstrap-css/select2-bootstrap.css" rel="stylesheet"/>
<link href="http://select2.github.io/select2/select2-3.5.2/select2.css" rel="stylesheet"/>
<script src="http://select2.github.io/select2/select2-3.5.2/select2.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/0.10.1/typeahead.bundle.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover" id="job-card">
  <thead>
    <tr>
      <td>JOb ID</td>
      <td>Company</td>
      <td>date</td>
      <td align="center" valign="middle" colspan="2"><b>Mini Paver</b></td>
      <td align="center" valign="middle" colspan="3"><b>035m planner</b></td>
    </tr>
    <tr>
      <td colspan="3"></td>
      <td align="center" valign="middle">MP01</td>
      <td align="center" valign="middle">MP02</td>
      <td align="center" valign="middle">035/1</td>
      <td align="center" valign="middle">035/2</td>
      <td align="center" valign="middle">035/3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>C R MacDonald Ltd</td>
      <td>11/01/2018</td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="29" name="ast_id">
        <input type="hidden" class="form-control" value="5" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type295">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="20" name="ast_id">
        <input type="hidden" class="form-control" value="7" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type207">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="12" name="ast_id">
        <input type="hidden" class="form-control" value="2" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type122">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="16" name="ast_id">
        <input type="hidden" class="form-control" value="1" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type161">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="18" name="ast_id">
        <input type="hidden" class="form-control" value="6" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type186">
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>National Road Planing Ltd (Thatcham)</td>
      <td>11/01/2018</td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="22" name="ast_id">
        <input type="hidden" class="form-control" value="1" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type221">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="25" name="ast_id">
        <input type="hidden" class="form-control" value="12" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type2512">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="36" name="ast_id">
        <input type="hidden" class="form-control" value="24" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type3624">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="17" name="ast_id">
        <input type="hidden" class="form-control" value="9" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type179">
      </td>
      <td align="center" valign="middle">
        <input type="hidden" class="form-control" value="11" name="ast_id">
        <input type="hidden" class="form-control" value="13" name="asset_id">
        <input type="text" name="employee_id" class="form-control typeahead_3" id="type1113">
      </td>
    </tr>
  </tbody>
</table>