Question

我有一个空的HTML表格。按下按钮后，应按列顺序将数据插入每个单元格。填充第一列后，它应该转到下一列并相应地填充。如何使用j Query完成此操作？我将在下面提供我的HTML代码：

<html>
<head>
    <style>
        table, th, td {
            border: 1px dashed black;
        }
    </style>
</head>
<body>
    <button onclick="callNext()">NEXT</button>
    <table>
          <tr>
            <td>A0501</td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
    </table>


    <script type="text/javascript">
        function callNext() {

        }
    </script>

</body>

以下是我需要的屏幕截图。

编辑：不应将新数据插入旧数据下方。但是应该将新数据插入第一行的第一列。旧数据应该低于新数据。请查看我的截图

Answer 1

＆＃13;

var nextCount = 1;

function callNext()
{
    var tr_count = 1;
    $('td').each(function(e)
    {
        tr_count++;
    });
    for (var i = tr_count - 1; i >= 1; i--)
    {
        var nextTd = i + 1;
        // alert(i);
        $('#' + nextTd).html($('#' + i).html())
    }
    $('#1').text(nextCount); // Your data
    nextCount++;
}

$('tr').each(function(e)
{
    e = e + 1;
    var count = e;
    var tdCount = 0;
    $(this).find('td').each(function()
    {
        if (tdCount == 0)
        {
            $(this).attr('id', e);
        }
        else
        {
            count = count + 4;
            $(this).attr('id', count);
        }
        tdCount++;
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <style>
        table, th, td {
            border: 1px dashed black;
        }
    </style>
</head>
<body>
    <button onclick="callNext()">NEXT</button>
    <table>
          <tr>
            <td>A0501</td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
    </table>

＆＃13;

此代码可以帮助您。

Answer 2

请参阅下文，了解如何使用每行和单元格的计数器进行操作。保持最大行数，并继续迭代它们，直到列中的最后一行到达，然后将tdCounter增加1并将rowCounter重置回0从顶部再次开始。

参见下面的演示

var tdCounter = 0;
var rowCounter = 0;
var rows = $("#my-table").find('tr').length;

$("#next").click(function() {

  $("#my-table tr:eq(" + rowCounter + ")").each(function(index) {
    $(this).find("td:eq(" + tdCounter + ")").text(index);
    rowCounter++;
    if (rowCounter !== 0 && (rowCounter % rows === 0)) {
      tdCounter++;
      rowCounter = 0;
    }
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px dashed black;
    }
  </style>
</head>

<body>
  <button id="next">NEXT</button>
  <table id="my-table">
    <tr>
      <td>A0501</td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
  </table>

</body>

希望能帮到你。

Answer 3

你应该写这样的东西：

$('img').hover(function(e) {
  $(this).toggleClass('active');
  e.preventDefault();
});

这个伪代码应该让您了解如何逐列插入数据。

Answer 4

如果您仅使用<table>在网格中显示数据，并且您不关心支持Internet Explorer，则可以将大部分逻辑卸载到CSS中一个CSS grid。

＆＃13;

$('button').on('click', () => {
  // Make a new <div> with some data
  const hue = Math.floor(Math.random() * 24) * 15;
  const $div = $(`<div style="background: hsl(${hue}, 80%, 80%)">${hue}</div>`);

  // Put it at the top of the grid
  $('.data-grid').prepend($div);

  // And remove the bumped <div> from the end
  $('.data-grid > :last-child').remove();
});

＆＃13;

.data-grid {
  display: grid; /* CSS grid */
  grid-auto-flow: column; /* fill grid top to bottom, then left to right */
  grid-template-columns: repeat(4, 50px); /* 4 columns, 50px wide */
  grid-template-rows: repeat(4, auto); /* 4 rows, as tall as their content */
  grid-gap: 3px; /* 3px of gutter between items */
}

.data-grid div {
  border: 1px dashed black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>NEXT</button>
<div class="data-grid">
  <!-- 16 <div>s with &nbsp;s to give them height -->
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
</div>

＆＃13;

HTML，如何使用jQuery以列方式向表中添加数据？

4 个答案: