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

问题描述：

我有一个空的HTML表.一旦按下按钮，数据应按列顺序插入到每个单元格中.填充第一列后，应转到下一列并进行相应填充.如何使用j Query完成此操作? 我将在下面提供我的html代码:

I have an empty HTML table. Once I Press the button, data should be inserted to each cell in column order. After filling first column, it should go to the next column and fill accordingly.How can I accomplish this using j Query? I shall provide my html code below:

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

这是我需要的屏幕截图.

Here is the screenshot of what I required.

新数据不应插入旧数据下方.但应将新数据插入第一行的第一列.并且旧数据应该在新数据之下.请检查我的屏幕截图

Edit : The new data should not be inserted below old data. but new data should be inserted to the first column in the first row. and old data should come below the new data.please check my screenshots

答

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++;
    });
});

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

此代码将为您提供帮助.

This code will help you.

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

相关推荐