javascript - TamperMonkey:在没有 ID 的 中的内容后添加元素

Question

为澄清起见，我希望在 <td>(或该列中的所有 <td>)内的链接右侧添加一个左向箭头。该箭头稍后将用于 Accordion 下拉菜单。

首先，我可以用什么方法插入 <a class="accordion">&#9664;</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>