无法使用我的数组项使用 JQuery 预填充我的表单输入

Question

我正在使用JQuery 来构建我的array，因此我可以在点击tabletr 中的button 时预先弹出我的form inputs

这是我的桌子

这是我点击“更新”按钮时的代码

var updateRowData = [];

$('button').click((e) => {
  var btnClassClicked = e.target.className;

  if (btnClassClicked.includes('btn-warning')) {
    $('#existingTrunkTable').on('click', 'tbody tr', function() {
      updateRowData.push({
        "trunkNo": $(this).find($("td[name=trunkNo]")).text(),
        "username": $(this).find($("td[name=username]")).text(),
        "password": $(this).find($("td[name=password]")).text(),
        "registrar": $(this).find($("td[name=registrar]")).text(),
        "voiceChannels": $(this).find($("td[name=voiceChannels]")).text(),
        "type": $(this).find($("td[name=type]")).text(),
        "group": $(this).find($("td[name=group]")).text()
      });
    });

    console.log('updateRowData', updateRowData)
    console.log('updateRowData[0]', updateRowData[0].trunkNo)

    $('#selectedTrunkNo').text(updateRowData[0].trunkNo);
    $('#password').val(updateRowData[0].password);
    $('#edit_voiceChan').val(updateRowData[0].voiceChannels);
    $('#edit_typeDd').val(updateRowData[0].type);
    $('#edit_existingGroupTrunks').val(updateRowData[0].group);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<table id="exitingTrunkTable" class="table table-striped table-condensed">
  <thead>
    <tr>
      <th>Trunk No.</th>
      <th>Username</th>
      <th>Password</th>
      <th>Registrar</th>
      <th>Voice Channels</th>
      <th>Type</th>
      <th>Group</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody id="existTableBody">
    <tr>
      <td name="trunkNo">635</td>
      <td name="username">TEST635</td>
      <td name="password">wT+-S~RD,Ag9HO\7</td>
      <td name="registrar">Bob</td>
      <td name="voiceChannels">70</td>
      <td name="type">Standard</td>
      <td name="group">Group88</td>
      <td>
        <button id="635_EditBtn" class="btn btn-warning">
          Update
        </button>
        <button id="635_DelBtn" class="btn btn-danger">
          Delete
        </button>
      </td>
    </tr>
    <tr>
      <td name="trunkNo">452</td>
      <td name="username">TEST452</td>
      <td name="password">|?]V5Jq^8!m]H=c,&gt;2_</td>
      <td name="registrar">sip.dev.mymetis.co.uk</td>
      <td name="voiceChannels">97</td>
      <td name="type">Standard</td>
      <td name="group">Group34</td>
      <td>
        <button id="452_EditBtn" class="btn btn-warning">
          Update
        </button>
        <button id="452_DelBtn" class="btn btn-danger">
          Delete
        </button>
      </td>
    </tr>
  </tbody>
</table>

这是我得到的：

以上数据均为测试数据。

它也不喜欢eq。我需要做的是获取“trunkNo”值并在显示表单时预先弹出相关的input。

为

console.log('1', updateRowData[0].length)

我明白了

Answer 1

几件事

• 箭头函数中没有 $(this)
• 使用 .closest 获取您所在的行
• 事件处理程序的包装过多
• 拥有 hasClass 时不要测试 className
• 使用数据属性而不是name

var updateRowData = [];

$('button').on("click", function() {
  if ($(this).hasClass('btn-warning')) {
    const $row = $(this).closest("tr")
    updateRowData.push({
      "trunkNo": $row.find($("[data-name=trunkNo]")).text(),
      "username": $row.find($("[data-name=username]")).text(),
      "password": $row.find($("[data-name=password]")).text(),
      "registrar": $row.find($("[data-name=registrar]")).text(),
      "voiceChannels": $row.find($("[data-name=voiceChannels]")).text(),
      "type": $row.find($("[data-name=type]")).text(),
      "group": $row.find($("[data-name=group]")).text()
    });
console.log(updateRowData)
    $('#selectedTrunkNo').text(updateRowData[0].trunkNo);
    $('#password').val(updateRowData[0].password);
    $('#edit_voiceChan').val(updateRowData[0].voiceChannels);
    $('#edit_typeDd').val(updateRowData[0].type);
    $('#edit_existingGroupTrunks').val(updateRowData[0].group);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<table id="exitingTrunkTable" class="table table-striped table-condensed">
  <thead>
    <tr>
      <th>Trunk No.</th>
      <th>Username</th>
      <th>Password</th>
      <th>Registrar</th>
      <th>Voice Channels</th>
      <th>Type</th>
      <th>Group</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody id="existTableBody">
    <tr>
      <td data-name="trunkNo">635</td>
      <td data-name="username">TEST635</td>
      <td data-name="password">wT+-S~RD,Ag9HO\7</td>
      <td data-name="registrar">Bob</td>
      <td data-name="voiceChannels">70</td>
      <td data-name="type">Standard</td>
      <td data-name="group">Group88</td>
      <td>
        <button id="635_EditBtn" class="btn btn-warning">
                  Update
              </button>
        <button id="635_DelBtn" class="btn btn-danger">
                  Delete
              </button>
      </td>
    </tr>
    <tr>
      <td name="trunkNo">452</td>
      <td name="username">TEST452</td>
      <td name="password">|?]V5Jq^8!m]H=c,&gt;2_</td>
      <td name="registrar">sip.dev.mymetis.co.uk</td>
      <td name="voiceChannels">97</td>
      <td name="type">Standard</td>
      <td name="group">Group34</td>
      <td>
        <button id="452_EditBtn" class="btn btn-warning">
                Update
            </button>
        <button id="452_DelBtn" class="btn btn-danger">
                Delete
            </button>
      </td>
    </tr>
  </tbody>
</table>