用表格行中的所有值填充 JS 数组

Question

我几乎没有使用过javascript，我被困住了：我有一张带 id 的桌子JamTable我正在尝试编写一些 JS，它将<td>为单击的任何行获取每个值的数组，以便我可以在弹出窗口中显示它，使用 ajax 调用通过 POST 请求将其返回到服务器，然后更新表上的元素，因此不需要回发 - 但到目前为止，我什至无法填充数组。我有：    $(document).ready(function () {        // Get all table row elements <tr> in table 'JamTable' into var 'tr'        var tr = $('#JamTable').find('tr');        // Bind a 'click' event for each of those <tr> row elements        tr.bind('click', function (e) {            // so that when a row is clicked:                        var r = $(this).closest('tr').row;            var myArray = new Array(r.cells);            for (var c = 0, col; col = r.cells[c]; c++) {                alert(col.text)            }        });    });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="JamTable">      <tbody>          <tr>              <td>1</td>              <td>JAM</td>              <td>0.004</td>          </tr>          <tr>              <td>3</td>              <td>BOB</td>              <td>0.24</td>          </tr>          <tr>              <td>9</td>              <td>Nasty Simon</td>              <td>94.3</td>          </tr>      </tbody>    </table>是的，当谈到 JS 时，我完全迷失了

Answer 1

在这种情况下，使用适当的事件委托是成功的关键。即使使用动态添加的行（在定义事件侦听器后添加到DOM ），也可以保证在行上捕获“单击”事件

细分（见评论）：

const tableElm = document.querySelector('table')

// listen to "click" event anywhere on the <table>

tableElm.addEventListener('click', onTableClick)

function onTableClick(e){

  // event delegation 

  const rowElm = e.target.closest('tr')

  // traverse each child of the row (HTMLCollection). map the text value into an Array

  // https://stackoverflow.com/a/34250397/104380

  const values = rowElm ? [...rowElm.children].map(td => td.innerText) : []

  // print result

  console.clear()

  console.log(  values  )

}

<table>

  <tbody>

    <tr>

      <td>1</td>

      <td>JAM</td>

      <td>0.004</td>

    </tr>

    <tr>

      <td>3</td>

      <td>BOB</td>

      <td>0.24</td>

    </tr>

    <tr>

      <td>9</td>

      <td>Nasty Simon</td>

      <td>94.3</td>

    </tr>

  </tbody>

</table>

如果您将数据发送回服务器，您可能还应该有一些唯一的 id <tr>，它可能需要知道它属于哪一行

Answer 2

您可以从 委派事件tr。点击它得到children. 使用Array.from将创建一个数组td。用于迭代map并从中获取文本td

$("#JamTable").on('click', 'tr', function(e) {

  let k = Array.from($(this).children()).map((item) => {

    return item.innerHTML;

  })

  console.log(k)

})

td {

  border: 1px solid green;

  cursor: pointer;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id='JamTable'>

  <tbody>

    <tr>

      <td>1</td>

      <td>JAM</td>

      <td>0.004</td>

    </tr>

    <tr>

      <td>3</td>

      <td>BOB</td>

      <td>0.24</td>

    </tr>

    <tr>

      <td>9</td>

      <td>Nasty Simon</td>

      <td>94.3</td>

    </tr>

  </tbody>

</table>

Answer 3

你不需要jquery。

您可以使用querySelectorAll来获取trs 并简单地使用节点上的子tr节点来获取tds

const trs = [...document.querySelectorAll('tr')]

trs.forEach(tr => tr.addEventListener('click', e => {

  // whenever it is clicked, get its tds

  const values = [...tr.children].map(td => td.innerText)

  console.log('click', values)

}, false))

<table>

  <tbody>

    <tr>

      <td>1</td>

      <td>JAM</td>

      <td>0.004</td>

    </tr>

    <tr>

      <td>3</td>

      <td>BOB</td>

      <td>0.24</td>

    </tr>

    <tr>

      <td>9</td>

      <td>Nasty Simon</td>

      <td>94.3</td>

    </tr>

  </tbody>

</table>

正如@vsync 建议的那样，最好使用事件委托，以防您有很多行以避免绑定多次点击。这也允许稍后添加更多行，而无需绑定更多点击处理程序

edit2 仍然感谢@vsync，避免使用onclick并更喜欢addEventListener避免覆盖现有事件

const table = document.querySelector('table')

table.addEventListener('click', e => {

  if (e.target.nodeName !== 'TD') { return }

  const values = [...e.target.parentNode.children].map(c => c.innerText)

  console.log(values)

}, false)

<table>

  <tbody>

    <tr>

      <td>1</td>

      <td>JAM</td>

      <td>0.004</td>

    </tr>

    <tr>

      <td>3</td>

      <td>BOB</td>

      <td>0.24</td>

    </tr>

    <tr>

      <td>9</td>

      <td>Nasty Simon</td>

      <td>94.3</td>

    </tr>

  </tbody>

</table>

Answer 4

$('#JamTable tbody tr').click(function () {

    var arr = [];

    $($(this).children('td')).each(function (index, val) {

        arr.push(val.innerText);

    });

    console.log(arr);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="JamTable">

    <tbody>

        <tr>

            <td>1</td>

            <td>JAM</td>

            <td>0.004</td>

        </tr>

        <tr>

            <td>3</td>

            <td>BOB</td>

            <td>0.24</td>

        </tr>

        <tr>

            <td>9</td>

            <td>Nasty Simon</td>

            <td>94.3</td>

        </tr>

    </tbody>

</table>