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
}

Answer 2

您可以像这样在onclick事件中传递td

props

在您的方法中，使用$（this）.parent（）获取整行，您将获得该tr的全部数据，并且可以对其进行处理

如何不使用id将数据追加到表中？

2 个答案: