Question

我想从每一行中获取数据，以简单文本的形式显示在段落的同一页上。

下表示例：

<table>
    <thead>
        <tr>
            <th class="a header">A</th>
            <th class="b header">B</th>
            <th class="c header">C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="a">A1</td>
            <td class="b">B1</td>
            <td class="c">C1</td>
        </tr>
        <tr>
            <td class="a">A2</td>
            <td class="b">B2</td>
            <td class="c">C2</td>
        </tr>
    </tbody>
</table>

输出应如下所示：

A1 B1 C1   A2 B2 C2

我已经尝试寻找解决方案，但是它不起作用。我先感谢您的帮助。

Answer 1

使用document.querySelectorAll('td')获取所有td元素。使用forEach循环遍历元素，并使用textContent获取其文本。在paragraph中，使用innerHTML

添加此文本

document.querySelector('#a').querySelectorAll('td').forEach((e)=>document.querySelector('#here').innerHTML+=e.textContent + " ")

<table id="a">
     <thead>
      <tr>
       <th class="a header">A</th>
       <th class="b header">B</th>
       <th class="c header">C</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td class="a">A1</td>
       <td class="b">B1</td>
       <td class="c">C1</td>
      </tr>
      <tr>
       <td class="a">A2</td>
       <td class="b">B2</td>
       <td class="c">C2</td>
      </tr>
     </tbody>
   </table>
   
   <p id="here"></p>

使用jquery，获取所有td元素，然后使用each对其进行迭代，然后使用text将paragraph附加到append()

$('#a').find('td').each(function(i,e){
$('#here').append($(e).text() + " ")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="a">
     <thead>
      <tr>
       <th class="a header">A</th>
       <th class="b header">B</th>
       <th class="c header">C</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td class="a">A1</td>
       <td class="b">B1</td>
       <td class="c">C1</td>
      </tr>
      <tr>
       <td class="a">A2</td>
       <td class="b">B2</td>
       <td class="c">C2</td>
      </tr>
     </tbody>
   </table>
   
   <p id="here"></p>

Answer 2

尝试使用HTML DOM子级属性

var dataTable = document.getElementsByTagName('table');
var dataTableBody = dataTable[0].children[1];
for (var i = 0; i < dataTableBody.length; i++) {
  console.log(dataTableBody[i].innerHTML)
}

<table>
  <thead>
    <tr>
      <th class="a header">A</th>
      <th class="b header">B</th>
      <th class="c header">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="a">A1</td>
      <td class="b">B1</td>
      <td class="c">C1</td>
    </tr>
    <tr>
      <td class="a">A2</td>
      <td class="b">B2</td>
      <td class="c">C2</td>
    </tr>
  </tbody>
</table>

从表中获取数据以纯文本形式显示

2 个答案: