将特定行的td值作为数组传递给JavaScript

Question

我有一张包含一些标记的表：

<table>
  <tr class = 'common'>
    <td contenteditable = 'true' name = 'marks'>10</td>
    <td contenteditable = 'true' name = 'marks'>50</td>
    <td contenteditable = 'true' name = 'marks'>40</td>
  </tr>
  <tr class = 'common'>
    <td contenteditable = 'true' name = 'marks'>40</td>
    <td contenteditable = 'true' name = 'marks'>20</td>
    <td contenteditable = 'true' name = 'marks'>10</td>
  </tr>
</table>

在该行进行某些更改时，我想传递所有数字。

例如，我想将第一行上的数字50更改为10。 然后，第一行上的所有数字将作为数组传递给JavaScript。 第二行也是如此，如果我在第二行进行了一些更改，则第二行上的所有数字都将作为数组传递给JavaScript。

行数不是固定的。 因此，可能会超过2。

$(document).on('blur', '.common td[contenteditable]', function() {
      var numArray = array(); // 10,10,40   
});

Answer 1

要做到这一点，你可以挂钩一个input事件处理程序的contenteditable细胞。 然后，您可以使用map()在修改后的行中构建单元格值的数组，以准备在您的AJAX请求中使用。 像这样：

 $('.common td[contenteditable]').on('input', function() { var marks = $(this).closest('tr').find('td').map(function() { return $(this).text().trim(); }).get(); console.log(marks); // make your AJAX call here... }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="common"> <td contenteditable="true" name="marks">10</td> <td name="marks">50</td> <td name="marks">40</td> </tr> <tr class="common"> <td contenteditable="true" name="marks">40</td> <td name="marks">20</td> <td name="marks">10</td> </tr> </table> 

Answer 2

您可以使用jQuery的each()遍历所有td ，如下所示：

 $(document).on('blur', '.common td[contenteditable]', function() { var numArray = []; var allTD = $(this).closest('tr').find('td').each(function(){ numArray.push($(this).text()); }); console.log(numArray); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class = 'common'> <td contenteditable='true' name='marks'>10</td> <td name='marks'>50</td> <td name='marks'>40</td> </tr> <tr class = 'common'> <td contenteditable = 'true' name = 'marks'>40</td> <td name = 'marks'>20</td> <td name = 'marks'>10</td> </tr> </table>