javascript - 如何在不使用id的情况下将数据追加到表中？

Question

这是我的代码:

表格，其中包含候选人的详细信息:

<table id="candidates-table" class="table table-striped table-bordered">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Candidate Picture</th>
      <th scope="col">Candidate Name</th>
      <th scope="col">Contestant ID</th>
      <th scope="col">Elections</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody id="candidates-table-body">
    <!--Here data comes from data.js file-->
  </tbody>
</table>

data.js代码:

假设函数正在被调用并且完整的代码被正确执行:

function refreshCandidateTable() {
  $.ajax({
    url: 'load_candidates_details.php',
    type: 'POST',
    data: {},
    dataType: "json",
    success: function(res) {
      document.getElementById("candidates-table-body").innerHTML = "";
      for (let i = 0; i < res.length; i++) {
        document.getElementById("candidates-table-body").innerHTML += "<tr>" +
          "<td>" + res[i].contestant_picture + "</td>" +
          "<td>" + res[i].contestant_name + "</td>" +
          "<td>" + res[i].contestant_id + "</td>" +
          "<td'>" + res[i].election_type + "</td>" +
          "<td><a href='#new-candidate' onclick='changeCandidateDetails()' style='padding-right: 1rem' id='edit-candidate'>Edit</a>" +
          "<a href='#new-candidate' id='remove-candidate'>Remove</a></td></tr>";
      }
    }
  })
}

到目前为止，一切正常。

当我点击“操作”列中的“编辑”链接时，会弹出一张卡片，如下所示:

<div class="row card mb-5" id="change-candidate-details" style="display: none; padding-top: 1rem">
  <div class="card-header">
    Edit candidate details
  </div>
  <div class="card-body">
    <form id="edit-candidate-candidate" enctype="multipart/form-data" action="add_candidate.php">
      <div class="form-group">
        <label>Candidate Name</label>
        <input type="text" class="form-control input-lg" id="candidate-name" placeholder="Enter candidate name" required>
      </div>
      <div class="form-group">
        <label>Election Type</label>
        <select class="form-control input-lg" id="candidate-election-type" required>
                                <option disabled>Select the Election Type</option>
                                <option name="SVC">School Vice Captain</option>
                                <option name="SHB">School Head Boy</option>
                                <option name="BHC">Bhaskara House Captain</option>
                                <option name="BVC">Bhaskara House Vice Captain</option>
                                <option name="SHC">Shushrutha House Captain</option>
                                <option name="SHVC">Shushrutha House Vice Captain</option>
                                <option name="CHC">Charaka House Captain</option>
                                <option name="CVC">Charaka House Vice Captain</option>
                            </select>
      </div>
      <div class="form-group">
        <input type="file" class="form-control-file input-lg" id="candidate-picture" required>
      </div>
      <div class="form-group">
        <input type="submit" class="btn btn-primary form-control input-lg" id="submit-candidate-details">
      </div>
    </form>
  </div>
  <div class="alert alert-danger" id="change-candidate-form-response" style="display: none; padding-top: 2rem">
  </div>
</div>

现在，我希望在这张卡片中显示候选人的详细信息；例如表中有一行如下:

candidatepicture.jpg Goutam RVPS2018GOUSBC SBC Change Remove

当我单击上一行上的“更改”时，我需要将详细信息添加到卡中。即输入字段应显示与单击更改链接的行等效的默认值。

我不知道如何实现它，因为 document.getElementById() 无法使用，因为我没有为其分配任何 id。问题是我无法找到一种方法来找出单击了表中的哪一行。

即使我发现点击了哪一行，我也不知道如何进一步进行，因为我对 JavaScript 还很陌生

Answer 1

您需要做的是:

• 1)收到ajax数据时将其保存在可遍历的集合中
• 2) 找到一种方法将每一行映射到数据集合的每个元素
• 3) 在处理“编辑”点击时使用此映射

定义一个与refreshCandidateTable和changeCandidateDetails具有相同作用域的变量来存储响应中的数据

// this variable will be visible in both refreshCandidateTable and changeCandidateDetails
var candidatesData = {};
function refreshCandidateTable() {
$.ajax({
    url: 'load_candidates_details.php',
    type: 'POST',
    data: {},
    dataType: "json",
    success: function (res) {
        document.getElementById("candidates-table-body").innerHTML = "";
        for (let i = 0; i < res.length; i++) {
            // we will be able to get the contestant object by writing candidatesData[id], we just need a way to pass this id
            candidates[res[i].contestant_id] = res[i];
            document.getElementById("candidates-table-body").innerHTML += "<tr>" +
                "<td>" + res[i].contestant_picture + "</td>" +
                "<td>" + res[i].contestant_name + "</td>" +
                "<td>" + res[i].contestant_id + "</td>" +
                "<td'>" + res[i].election_type + "</td>" +
                "<td><a href='#new-candidate' onclick='changeCandidateDetails("+res[i].contestant_id+")' style='padding-right: 1rem' id='edit-candidate'>Edit</a>" +
                "<a href='#new-candidate' id='remove-candidate'>Remove</a></td></tr>";
        }
    }
})

}

ID 在处理程序中传递 onclick='changeCandidateDetails("+res[i].contestant_id+")'现在，将使用正确的 id 作为参数来调用changeCadidateDetails。

所以在changeCandidateDetails中:

function changeCandidateDetails(id) {
    var candidate = candidatesData[id];
    .... // show your form an update the fields with the values from candidate
}