Question

TamperMonkey：在不带 ID 的 <td> 中的内容后添加元素

2018-11-05

850

javascript html tampermonkey

为了澄清起见，我希望在 <td> 内的链接右侧添加一个向左箭头（或者更确切地说是向该列中的所有 <td> 添加）。该箭头稍后将用于手风琴下拉菜单。

首先，我可以使用什么方法插入 <a class="accordion">◀</a> ？（如果可能的话，使用纯 JS）我怎样才能将它放在每个包含条形码编号但不包含其他链接（如 shipID）的单元格的 <td> 上？

~~jsfiddle.net/pshock13/fotr5p93/~~

    <table>
  <thead>
    <tr class="header">
      <th class="tablesorter-header">Shipment ID</th>
      <th class="tablesorter-header">Barcode</th>
      <th class="tablesorter-header"> More info</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="http://search.com/AAA/results?s=7546895555555">7546895555555</a></td>
      <td><a href="http://search.com/AAA/results?s=987654321">987654321</a></td>
      <td>more stuff</td>
    </tr>
    <tr>
      <td><a href="http://search.com/AAA/results?s=1234567222222">1234567222222</a></td>
      <td><a href="http://search.com/AAA/results?s=123456789">123456789</a></td>
      <td>other stuff</td>
    </tr>
  </tbody>
</table>

JSFiddle 中是我正在使用的精简版。没有可用的 ID，并且使用的任何类也用于具有链接的其他元素。

Answer 1

您可以使用 querySelectorAll 抓取所有适当的单元格，因为条形码位于第二列。知道我们可以使用 nth-child 选择器。

//NEW AND IMPORVED
//Get just the cells we wan knowing barcode is the second column
var barCodeCells = document.querySelectorAll("#theTable tbody tr > td:nth-child(2) > div");
var newElement = "<a class='accordion'>&#9664;</a>";

//Iterate our cells
for(var i = 0; i < barCodeCells.length; i++){  
  //Append the new element to the innerHTML
  barCodeCells[i].innerHTML += newElement;
}


//Old Version
//Get the rows from the body only
/*var theTableBodyRows = document.querySelectorAll("#theTable tbody tr");
var newElement = "<a class='accordion'>&#9664;</a>";

//Loops throug the rows
for(var i = 0; i < theTableBodyRows.length; i++){
  //Knowing th barcode is the 2ns cell get that
  var targetCell = theTableBodyRows[i].querySelector("td:nth-child(2)");
  //Append the new element to the innerHTML
  targetCell.innerHTML += newElement;
}*/

<table id="theTable">
  <thead>
    <tr class="header">
      <th class="tablesorter-header">Shipment ID</th>
      <th class="tablesorter-header">Barcode</th>
      <th class="tablesorter-header"> More info</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="http://search.com/AAA/results?s=7546895555555">7546895555555</a></td>
      <td><div><a href="http://search.com/AAA/results?s=987654321">987654321</a></div></td>
      <td>more stuff</td>
    </tr>
    <tr>
      <td><a href="http://search.com/AAA/results?s=1234567222222">1234567222222</a></td>
      <td><div><a href="http://search.com/AAA/results?s=123456789">123456789</a></div></td>
      <td>other stuff</td>
    </tr>
  </tbody>
</table>

如果箭头纯粹是装饰性的，您可以跳过 javascript 而只使用 CSS

#theTable>tbody>tr>td:nth-child(2) a:after {
 content: '\25C0';
 padding-left: 3px;
}

<table id="theTable">
  <thead>
    <tr class="header">
      <th class="tablesorter-header">Shipment ID</th>
      <th class="tablesorter-header">Barcode</th>
      <th class="tablesorter-header"> More info</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="http://search.com/AAA/results?s=7546895555555">7546895555555</a></td>
      <td><div><a href="http://search.com/AAA/results?s=987654321">987654321</a></div></td>
      <td>more stuff</td>
    </tr>
    <tr>
      <td><a href="http://search.com/AAA/results?s=1234567222222">1234567222222</a></td>
      <td><div><a href="http://search.com/AAA/results?s=123456789">123456789</a></div></td>
      <td>other stuff</td>
    </tr>
  </tbody>
</table>