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

Question

为了澄清，我想在 <td> 内部的 link 的右侧添加一个左向箭头（或者更确切地说，向 <td> 中的所有 <td>柱子）。该箭头稍后将用于手风琴下拉菜单。

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

~~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，任何使用的类也用于其他具有 link 的元素。

Answer 1

知道条形码是第 2 列，您可以使用 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: 'C0';
 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>

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

TamperMonkey: add element after content in a <td> without IDs

html

javascript

tampermonkey