jQuery设置的复选框和数字字段在一瞬间出现，然后突然消失

checkboxes and number fields set by jquery appear for a split second, then suddenly disappear

本文关键字：然后 消失 突然 一瞬间 设置 复选框 字段 数字 jQuery      更新时间：2023-09-26

我创建了一个简单的html文件，该文件发出ajax请求以从数据库表中获取数据。

某些列不会通过 ajax 更新。在此页面中手动提供输入。由于每次ajax调用都会刷新页面数据，因此我编写了storeVars()和putVars()，分别在刷新前存储输入值和在刷新后设置存储的值。但这不起作用:(

JavaScript：

function createList() {
    $.ajax({
        type: "POST",
        url: "fetch_registered_list.php?event_id=1",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data) {
            $('#table_data tr').not(':first').remove();
            if (data != '' || data != undefined || data != null) {
                var html = '';
                $.each(data, function(i, item) {
                    html += "<tr><td>" + data[i].sno + "</td>" + "<td>" + data[i].name + "</td>" + "<td>" + data[i].email + "</td>" + "<td>" + data[i].phone + "</td>" + "<td><input class='check' name='" + i +
                        "' type='checkbox'/></td>" + "<td><input class='score' name='" + data[i].email + "' type='number'/></td></tr>"
                })
                $('#table_data tr').first().after(html);
            }
        }
    });
}

$(document).ready(function() {
    createList();
    setInterval(function() {
        storeVars();
        createList();
        putVars();
    }, 5000);
});
var checkboxes = new Array();
var scores = new Array();
function storeVars() {
    $('#table_data tbody tr:not(:first-child) td:nth-child(5)').each(function() {
        checkboxes.push($(this).find('.check').is(':checked'));
    });
    $('#table_data tbody tr:not(:first-child) td:nth-child(6)').each(function() {
        scores.push($(this).find('.score').val());
    });
}
function putVars() {
    $('#table_data tbody tr:not(:first-child) td:nth-child(5)').each(function() {
        $(this).find('.check').prop('checked', true);
    });
    $('#table_data tbody tr:not(:first-child) td:nth-child(6)').each(function() {
        $(this).find('.score').val('44');
    });
}

.HTML：

<body>
    <div id="wrapper">
        <div id="heading">
            <h1>Event One</h1>
        </div>
        <form method="post">
            <table id="table_data">
                <tr>
                    <td><strong>S.no.</strong></td>
                    <td><strong>Name</strong></td>
                    <td><strong>Email</strong></td>
                    <td><strong>Phone</strong></td>
                    <td><strong>Participated</strong></td>
                    <td><strong>Score</strong></td>
                </tr>
            </table>
            <footer>
                <input id="button" type="button" name="submit" value="Announce Winners" />
            </footer>
        </form>
    </div>
</body>

首先，您必须在每个新存储上重置数组，否则您将拥有具有指数新条目的数组。其次，您的putVars()函数不正确，它必须检查每个数组的值，以便在相应的输入中重新创建正确的数据。

因此，更新文档就绪函数以声明两个数组。

$(document).ready(function() {
    var checkboxes,
        scores;
    createList();
    setInterval(function() {
        storeVars();
        createList();
        putVars();
    }, 5000);
});

然后重置每个存储的两个阵列。

function storeVars() {
    checkboxes = new Array();
    scores = new Array();
    $('#table_data tbody tr:not(:first-child) td:nth-child(5)').each(function() {
        checkboxes.push($(this).find('.check').is(':checked'));
    });
    $('#table_data tbody tr:not(:first-child) td:nth-child(6)').each(function() {
        scores.push($(this).find('.score').val());
    });
}

最后像这样更新你的 putVars(( 函数。

function putVars() {
    $('#table_data tbody tr:not(:first-child) td:nth-child(5)').each(function(index) {
      if(checkboxes[index] == true) {
        $(this).find('.check').prop('checked', true);
      }
      else {
        $(this).find('.check').prop('checked', false);
      }
    });
    $('#table_data tbody tr:not(:first-child) td:nth-child(6)').each(function(index) {
        $(this).find('.score').val(scores[index]);
    });
}

工作小提琴

相关文章：