Question

我创建了一个简单的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>

Answer 1

首先，您必须在每个新存储上重置阵列，否则您将拥有带有指数新条目的阵列。其次，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]);
    });
}

working fiddle

由jquery设置的复选框和数字字段会瞬间显示，然后突然消失

1 个答案: