Question

我有这张桌子：

var table = document.getElementById('tableID'),
    cells = table.getElementsByTagName('td');

for (var x = 0, len = cells.length; x < len; x++) {
    cells[x].onclick = function () {
        console.log(this.innerHTML);
    };
}

<table class="table table-striped" id="tableID">
    <tbody>
      <tr ng-repeat="cup in cups">
          <td>{{cup.cupnum}}</td>
          <td>{{::cup.contents.model}}</td>
          <td>{{::cup.contents.woa}}</td>
          <td>{{::cup.contents.perfBy}}</td>
          <td>{{::cup.contents.perfAt}}</td>
          <td>{{::cup.contents.loadEvent}}</td>
          <td>{{samples[cup.contents.sampleID-1].contents.name}}</td>
          <td>{{holders[cup.contents.holderID-1].contents.type}}</td>
      </tr>
    </tbody>
</table>

我该如何制作它以便我只需获取每行的最后一列的值而无需点击？：<td>{{holders[cup.contents.holderID-1].contents.type}}</td> 柱

Answer 1

尝试使用：

cells =  table.querySelector('td:last-child')

这将始终返回行的最后一个td。

Answer 2

要访问最后一列，请查询所有td:last-child

var cells = document.querySelectorAll('#tableID td:last-child');
var result = document.getElementById("result");
result.innerHTML="";
for (var x = 0, len = cells.length; x < len; x++) {
        result.innerHTML+=cells[x].innerHTML+"<br>";
};

<table class="table table-striped" id="tableID" border="1">
    <tbody>
      <tr ng-repeat="cup in cups">
          <td>{{cup.cupnum}}</td>
          <td>{{::cup.contents.model}}</td>
          <td>{{::cup.contents.woa}}</td>
          <td>{{::cup.contents.perfBy}}</td>
          <td>{{::cup.contents.perfAt}}</td>
          <td>{{::cup.contents.loadEvent}}</td>
          <td>{{samples[cup.contents.sampleID-1].contents.name}}</td>
          <td>{{holders[cup.contents.holderID-1].contents.type}}</td>
      </tr>
       <tr ng-repeat="cup in cups">
          <td>{{cup.cupnum}}</td>
          <td>{{::cup.contents.model}}</td>
          <td>{{::cup.contents.woa}}</td>
          <td>{{::cup.contents.perfBy}}</td>
          <td>{{::cup.contents.perfAt}}</td>
          <td>{{::cup.contents.loadEvent}}</td>
          <td>{{samples[cup.contents.sampleID-1].contents.name}}</td>
          <td>{{holders[cup.contents.holderID-1].contents.type}}</td>
      </tr>
    </tbody>
</table>
<hr>
<h2>Result</h2>
<div id="result"></div>

获取重复表的列值？

2 个答案: