当onclick时，Javascript将按钮元素存储在变量中

Question

我有一个包含用户的表格，并希望操作按钮能够在他们所属的<tr>上工作。当其中一个按钮调用javascript函数时，我希望函数将<tr>元素存储在变量中，这样我就可以只使用保存按钮的元素，而不会影响任何其他<tr>元素。 ps：我可以使用jQuery！
我的代码：

＆＃13;

＆＃13;

function editUser() {
  /*
  var button = *the button clicked*;
  var tr = button.getParent(get the <tr> in some way);
  editSomething(tr);
  */
}

＆＃13;

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr:nth-child(even) td {
  border: 1px solid #cbcbcb;
}

#search {
  padding-bottom: 5vw;
}

.actionLink {
  border: 1px solid black;
  padding: 2px;
}

.actionLink:hover {
  cursor: pointer;
  background-color: black;
  color: white;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Username</th>
      <th>Rank</th>
      <th>Points</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Gamanware</td>
      <td>Owner</td>
      <td>0</td>
      <td>Online</td>
      <td>
        <a onclick="editUser()" class="actionLink">Quick Edit</a>
        <a onclick="editUser()" class="actionLink">View</a>
        <a onclick="editUser()" class="actionLink">Delete</a>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用当前元素.parentNode.parentNode中的a function editUser(thatTR) { var tr = thatTR.parentNode.parentNode editSomething(tr); } function editSomething(tr){ console.log(tr) }：

＆＃13;

＆＃13;

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr:nth-child(even) td {
  border: 1px solid #cbcbcb;
}

#search {
  padding-bottom: 5vw;
}

.actionLink {
  border: 1px solid black;
  padding: 2px;
}

.actionLink:hover {
  cursor: pointer;
  background-color: black;
  color: white;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Username</th>
      <th>Rank</th>
      <th>Points</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Gamanware</td>
      <td>Owner</td>
      <td>0</td>
      <td>Online</td>
      <td>
        <a onclick="editUser(this)" class="actionLink">Quick Edit</a>
        <a onclick="editUser(this)" class="actionLink">View</a>
        <a onclick="editUser(this)" class="actionLink">Delete</a>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

function editUser(thatTR) {
  var tr = thatTR.closest('tr');
  editSomething(tr);
}
function editSomething(tr){
  console.log(tr);
}

＆＃13;

＆＃13;

＆＃13;

OR：您可以使用element.parentNode：

＆＃13;

＆＃13;

    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    td,
    th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }

    tr:nth-child(even) {
      background-color: #dddddd;
    }

    tr:nth-child(even) td {
      border: 1px solid #cbcbcb;
    }

    #search {
      padding-bottom: 5vw;
    }

    .actionLink {
      border: 1px solid black;
      padding: 2px;
    }

    .actionLink:hover {
      cursor: pointer;
      background-color: black;
      color: white;
    }

＆＃13;

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Username</th>
      <th>Rank</th>
      <th>Points</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Gamanware</td>
      <td>Owner</td>
      <td>0</td>
      <td>Online</td>
      <td>
        <a onclick="editUser(this)" class="actionLink">Quick Edit</a>
        <a onclick="editUser(this)" class="actionLink">View</a>
        <a onclick="editUser(this)" class="actionLink">Delete</a>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个。它不引人注目 - 即没有使用内联脚本

jQuery （因为你说过你可以使用它）：

$(".actionLink").on("click",function() {
    alert($(this).text() + "("+$(this).closest("tr")+")"); 
})

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr:nth-child(even) td {
  border: 1px solid #cbcbcb;
}

#search {
  padding-bottom: 5vw;
}

.actionLink {
  border: 1px solid black;
  padding: 2px;
}

.actionLink:hover {
  cursor: pointer;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Username</th>
      <th>Rank</th>
      <th>Points</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Gamanware</td>
      <td>Owner</td>
      <td>0</td>
      <td>Online</td>
      <td>
        <a class="actionLink">Quick Edit</a>
        <a class="actionLink">View</a>
        <a class="actionLink">Delete</a>
      </td>
    </tr>
  </tbody>
</table>

普通JS （最接近IE兼容）：

// element.closest() is not supported by IE at all
var getClosestTr = function(elem) { for ( ; elem && elem !== document; elem = elem.parentNode ) { if (elem.tagName=="TR") return elem;} return null; };

document.querySelectorAll(".actionLink").forEach(function(link) {
  link.onclick=function() {
    alert(this.innerText + "("+getClosestTr(this)+")"); // or this.closest("tr") where supported
  }
})

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr:nth-child(even) td {
  border: 1px solid #cbcbcb;
}

#search {
  padding-bottom: 5vw;
}

.actionLink {
  border: 1px solid black;
  padding: 2px;
}

.actionLink:hover {
  cursor: pointer;
  background-color: black;
  color: white;
}

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Username</th>
      <th>Rank</th>
      <th>Points</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Gamanware</td>
      <td>Owner</td>
      <td>0</td>
      <td>Online</td>
      <td>
        <a class="actionLink">Quick Edit</a>
        <a class="actionLink">View</a>
        <a class="actionLink">Delete</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

您可以使用closest：

function editUser(e) {
    let tr = e.closest('tr'); 
}

<tr>
  <td>
    <a onclick="editUser(this)" class="actionLink">Quick Edit</a>
    <a onclick="editUser(this)" class="actionLink">View</a>
    <a onclick="editUser(this)" class="actionLink">Delete</a>
  </td>
</tr>

Answer 4

您只需为具有actionLink类的所有元素添加一个EventListener，然后使用element.parentElement.parentElement获取TR，因为它是链接父级的父级：

document.querySelectorAll(".actionLink").forEach(e => e.addEventListener("click", editUser));

function editUser(e) {
  let tr = (e.target.parentElement.parentElement);
  // doSomethingWith(tr);
}

或者，完成：

document.querySelectorAll(".actionLink").forEach(e => e.addEventListener("click", editUser));

function editUser(e) {
  let tr = (e.target.parentElement.parentElement);
  // doSomethingWith(tr);
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr:nth-child(even) td {
  border: 1px solid #cbcbcb;
}

#search {
  padding-bottom: 5vw;
}

.actionLink {
  border: 1px solid black;
  padding: 2px;
}

.actionLink:hover {
  cursor: pointer;
  background-color: black;
  color: white;
}

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Username</th>
      <th>Rank</th>
      <th>Points</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Gamanware</td>
      <td>Owner</td>
      <td>0</td>
      <td>Online</td>
      <td>
        <a class="actionLink">Quick Edit</a>
        <a class="actionLink">View</a>
        <a class="actionLink">Delete</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 5

好吧，如果获得父tr只是你真正需要的东西，你可以使用parentElement事件目标来访问它。看一下修改后的片段：

function editUser(button) {
  const tr = button.parentElement.parentElement
  console.log(tr)

}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr:nth-child(even) td {
  border: 1px solid #cbcbcb;
}

#search {
  padding-bottom: 5vw;
}

.actionLink {
  border: 1px solid black;
  padding: 2px;
}

.actionLink:hover {
  cursor: pointer;
  background-color: black;
  color: white;
}

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Username</th>
      <th>Rank</th>
      <th>Points</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Gamanware</td>
      <td>Owner</td>
      <td>0</td>
      <td>Online</td>
      <td>
        <a onclick="editUser(this)" class="actionLink">Quick Edit</a>
        <a onclick="editUser(this)" class="actionLink">View</a>
        <a onclick="editUser(this)" class="actionLink">Delete</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 6

为每个id设置<tr>并将其传递给函数editUser(id)。

然后在函数内部检查哪个是调用者tr，并且仅使用选择器的id更改它。