使用两列仅JavaScript来获取表的数据

时间:2017-08-03 07:31:20

标签: javascript jquery html angularjs

我是var payload = { notification: { title: options.title, body: options.text, }, data: { type: options.type, } }; 的新手。我搜索了很多,但我没有得到解决方案。我有一张像 -

这样的表格
webDevelopment

这里我希望获得特定列的表格数据,如

A             B      C      D
FullName     ABC    pqr     xyz
TelephoneNo  123    RST     GHI

所以,数据应该像 -

A and B

我希望列A和列B中存在行数据

Html -

FullName: ABC

我尝试的是什么 -

<table class="table table-striped table-bordered report-table" id="tableid" contextmenu-container="meta.contextmenu" fixed-header>
            <thead class="text-center text-info">
              <th class="text-center">Annotation</th>
              <th class="text-center">Field</th>
              <th class="text-center">Message</th>
              <th class="text-center">Score</th>
            </thead>
            <tr ng-repeat="report in reports.data">
              <td class="text-center">{{ report.attributes.annotation }}</td>
              <td class="td-report-field" contentEditable contextmenu-item="report" context-menu="menuOptions">{{ report.attributes.field }}</td>
              <td>
                <input type="checkbox" ng-if="report.attributes.message && showcheckbox" ng-bind="report.attributes.message" ng-click="getcheckedData(report.attributes.message)">
                <span ng-if="report.attributes.message" contentEditable ng-model="report.attributes.message">
                      {{ report.attributes.message }}
                    </span>
                <span ng-if="!report.attributes.message">{{ report.attributes.message }}</span>
              </td>
              <td class="text-center">{{ report.attributes.score }}</td>
            </tr>
          </table>

1 个答案:

答案 0 :(得分:3)

我将根据您的上半部分问题以示例数据给出答案。

jsFiddle

$('table > tbody > tr').each(function(){
	console.log($(this).children()[0].innerHTML + ": " + $(this).children()[1].innerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>A</td>
      <td>
        B
      </td>
      <td>C</td>
      <td>D</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Fullname</td>
      <td>ABC</td>
      <td>PQR</td>
      <td>XYZ</td>
    </tr>
    <tr>
      <td>TelephoneNo</td>
      <td>123</td>
      <td>GHJ</td>
      <td>TYU</td>
    </tr>
  </tbody>
</table>

您可以使用纯JavaScript https://jsfiddle.net/mg0uyc44/1/

var tr = document.querySelectorAll('tbody tr');

for(var i=0; i<tr.length; i++){
	console.log(tr[i].childNodes[1].innerHTML + ": " + tr[i].childNodes[3].innerHTML)
}
<table>
  <thead>
    <tr>
      <td>A</td>
      <td>
        B
      </td>
      <td>C</td>
      <td>D</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Fullname</td>
      <td>ABC</td>
      <td>PQR</td>
      <td>XYZ</td>
    </tr>
    <tr>
      <td>TelephoneNo</td>
      <td>123</td>
      <td>GHJ</td>
      <td>TYU</td>
    </tr>
  </tbody>
</table>