通过内部值检测 TD 元素并将其移动到最后答案

【问题标题】：Detect TD element by inner value and move it to be last通过内部值检测 TD 元素并将其移动到最后
【发布时间】：2020-12-29 03:23:48
【问题描述】：

尝试通过移动元素及其内容来提高我的 ECMAScript 技能。关于我的场景，一旦 DOM 准备就绪，我想...

检查我的第四个<tr> 中是否有<td> 的标签元素的值为“None”。
如果为真，并且它不是最后一个 <td>，则复制整个 <td> 并将其附加到该 <tr>，使其成为该行中的最后一个 <td>。
删除值为 none 的原始 <td>。

我的 HTML 代码

<table id="myItems">
<tbody>
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
<tr>
  <td><input id="item10"><label for="item10">House</label></td>
  <td><input id="item11"><label for="item11">None</label></td>
  <td><input id="item12"><label for="item12">Car</label></td>
</tr>
</table>

到目前为止我已经尝试过，但需要改进......

   //get table name
    const mtarget = 'myItems';

    //check if exists
    if (document.getElementById(mtarget)) {

        //make the swap
        function init() {      
            //if so, target the specific table
            const mtable = document.querySelector("#" + mtarget);
            const lastrow = mtable.querySelectorAll('tbody tr')[3];
            //within it, move the none <td> to the end of existing <tr>
            const tdorgNone = lastrow.querySelectorAll('td')[1];
            const tdcloneNone = tdorgNone.cloneNode(true);
            lastrow.appendChild(tdcloneNone);
            tdorgNone.remove();
        }

        init();

我觉得我很接近了，但请注意我没有按标签值定位正确的 <td>。我需要通过了解内在价值来更深入地了解找到我想要的<td>。 2020 年如何通过 ECMAScript 改进此代码？

【问题讨论】：

标签： javascript ecmascript-6 ecmascript-2016 ecmascript-next

【解决方案1】：

使用查询字符串，您可以非常简洁地在数组中选择您想要的<tr> 的子代。然后，您可以在.find 和<td> 上加上标签——如果它存在，那么只需在父<tr> 上调用appendChild，<td> 将从之前的位置移除并放在底部。

const mtarget = 'myItems';
const tds = [...document.querySelectorAll(`#${mtarget} tr:nth-child(4) td`)];
const noneTd = tds.find(td => td.children[1].textContent === 'None');
if (noneTd) {
  noneTd.parentElement.appendChild(noneTd);
}

<table id="myItems">
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td><input id="item10"><label for="item10">House</label></td>
      <td><input id="item11"><label for="item11">None</label></td>
      <td><input id="item12"><label for="item12">Car</label></td>
    </tr>
</table>

【讨论】：