JQuery /如何显示每个表格单元格的警报？

Question

这是我的HTML表格。

＆＃13;

＆＃13;

$(document).ready(function() {
  $("button").click(function() {
    $("tr").each(
      $("td").each(
        function() {
          alert($(this).text());
        }
      );

    );
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Alert the value of each list item</button>

<table>
  <thead>
    <th>
      h1
    </th>
    <th>
      h2
    </th>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

在浏览器中它看起来像这样。

当我点击按钮时，我想为每个表格单元格值提供一个警报。

例如，从上面有4个细胞（每行2个细胞）。

所以我想要四个警告，例如＆＃34; a1＆＃34;，＆＃34; b1＆＃34;，＆＃34; a2＆＃34;和＆＃34; b2＆＃34;

如上图所示，我正在尝试使用jquery的.each函数，但仍然没有运气：（

有人可以看看，让我知道如何使用jquery吗？

Answer 1

不需要双循环。单循环适用于它。

  
  $("button").click(function() {
   $('tr td').each(function (index, element) {
    alert($(this).text())
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Alert the value of each list item</button>

<table>
  <thead>
    <th>
      h1
    </th>
    <th>
      h2
    </th>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
  </tbody>
</table>

Answer 2

您可以像这样循环遍历表格上的td：

$(document).ready(function() {
  $("button").click(function() {
    $("td").each(function() {
      alert($(this).text());
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Alert the value of each list item</button>

<table>
  <thead>
    <th>
      h1
    </th>
    <th>
      h2
    </th>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
  </tbody>
</table>

Answer 3

1. 您可以使用$("tr td")选择器循环播放所有4 td

$('button').click(function() {
  $("tr td").each(function() {

    alert($(this).text());
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Alert the value of each list item</button>

<table>
  <thead>
    <th>
      h1
    </th>
    <th>
      h2
    </th>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
  </tbody>
</table>

Answer 4

喜欢这个吗？

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<button>Alert the value of each list item</button>

    <table>
      <thead>
        <th>h1</th>
        <th>h2 </th>
      </thead>
      <tbody>
        <tr>
          <td>a1</td>
          <td>b1</td>
        </tr>
        <tr>
          <td>a2</td>
          <td>b2</td>
        </tr>
      </tbody>
    </table>

＆＃13;

data='...';

＆＃13;

＆＃13;

＆＃13;