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请求中使用。像这样：

＆＃13;

$('.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...
});

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用jQuery的each()遍历所有$(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>

glDrawPixels

将特定行的td值作为数组

2 个答案: