Question

我有问题，我希望在“ td”中获取价值这是我的代码：

<table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
      <tr>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
      </tr>
      <tr>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
      </tr>
      <tr>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
      </tr>
      <tr>
        <td>29</td>
        <td>30</td>
        <td>31</td>
      </tr>
    </table>

我曾尝试给它们提供类和onclick functions（），但是有一种方法可以不创建大约一千个函数和id。

Answer 1

您可以在表上使用onclick事件句柄（在jquery中使用ID或类选择器）。参见下面的代码

$(function(){ // this is to ensure if all DOM loaded
   $("#tableToRead td").on("click", function(){ // click handler for each td inside tableToRead table
     var value = $(this).text();// here $(this) refer to clicked td and using .text() gives text inside td.
     alert(value);
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableToRead">
 <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
  </tr>
  <tr>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
  </tr>
  <tr>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
  </tr>
  <tr>
    <td>29</td>
    <td>30</td>
    <td>31</td>
  </tr>
</table>

Answer 2

使用事件委托：将单个侦听器添加到table，然后检查所有点击事件的target。如果单击的元素与td相匹配，请获取该textContent中的td：

document.querySelector('table').addEventListener('click', ({ target }) => {
  if (!target.matches('td')) return;
  console.log('clicked on element with textContent: ' + target.textContent);
});

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
  </tr>
  <tr>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
  </tr>
  <tr>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
  </tr>
  <tr>
    <td>29</td>
    <td>30</td>
    <td>31</td>
  </tr>
</table>

（理想情况下，给一个table一个id，以便您可以通过选择该id而不是使用querySelector('table')来选择它，后者会选择第一个{ {1}}，无论它是什么）

Answer 3

希望这对您有帮助

$('#tbl').on('click','td',function(){
var myValue= $(this).html();
var prevValue=$(this).prev('td').html();
var nextValue=$(this).next('td').html();

alert('myvalue='+myValue+', prevValue='+prevValue+',nextValue='+nextValue+'');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl">
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
  </tr>
  <tr>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
  </tr>
  <tr>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
  </tr>
  <tr>
    <td>29</td>
    <td>30</td>
    <td>31</td>
  </tr>
</table>

Javascript / jQuery表格元素抓取

3 个答案: