Question

我有一张表格。当我单击“提交”按钮时，我创建了一个包含表单元素的对象。然后我将这些对象推送到一个数组。在我用这个数组创建一个html表之后。

我有一个更新按钮，你可以看到。当我单击按钮时，表TD转动输入，我可以更改文本。我需要做的是当我第二次点击更新按钮时，必须更新该数组。我怎么能这样做？

main.js：

var obj = { };
var data, i;
var personArray = [];
var pageNum = 1;
var objPerPage = 5;

$("#submitButton").click(function () {
    addObject();
    showTable(pageNum);
    pagination(pageNum);
    resetForm('');
});

function addObject() {
    var obj = { };
    data = $('#personForm').serializeArray();
    for (i = 0; i < data.length; i++) {
        obj[data[i].name] = data[i].value;
    }

    personArray.push(obj);
}

function pagination(p) {
    var personArrayLen = personArray.length;
    var pageNumFin = Math.ceil(personArrayLen / objPerPage);
    if (pageNumFin > 1) {
        $(".paging").remove();
        for (t = pageNumFin; t > 0; t--) {
            $('<button type="button" id="pageId-' + t + '" class="paging">' + t + '</button>').insertAfter('#table');
        }

        $('.paging').click(function () {
            var id = $(this).attr('id');
            var ind = id.split('-');
            var pageNum = ind[1];
            showTable(pageNum);
        });
    }
}

function showTable(page) {
    var index = personArray.length;
    var start = (page - 1) * objPerPage;
    var finish = start + objPerPage;
    if (finish > index) {
        finish = index;
    } else {
        finish = start + objPerPage;
    }

    $('.personRow').remove();
    for (k = finish; k >= start; k--) {
        $("table#personTable tbody").append('<tr class="personRow"><td>' + personArray[k].firstname + '</td><td>' + personArray[k].lastname + '</td><td>' + personArray[k].tc + '</td><td>' + personArray[k].birthday + '</td><td><button class="deleteButton" id="deleteRow-' + k + '">Delete</button></td><td><button class="updateButton" id="updateRow-' + k + '">Update</button></td></tr>');
    }

    $(".deleteButton").click(function () {
        var id = $(this).attr('id');
        var ind = id.split('-');
        var deleteIndex = ind[1];
        deleteFunction(deleteIndex);
    });

    $(".updateButton").click(function () {

        var id = $(this).attr('id');
        var ind = id.split('-');
        var updateIndex = ind[1];
        console.log(updateIndex);
        $(this).parent().siblings().slice(0, 4).each(
            function () {
                if ($(this).find('input').length) {
                    $(this).text($(this).find('input').val());
                } else {
                    var inputText = $(this).text();
                    $(this).text('').append($('<input />', { 'value': inputText }).val(inputText));
                    console.log(personArray[updateIndex].name);
                    personArray[updateIndex].name = inputText;
                }
            });
    });
}

function resetForm(value) {
    $("#firstname").val(value);
    $("#lastname").val(value);
    $("#tc").val(value);
    $("#birthday").val(value);
}

/*Seçili öğeyi silip tabloyu gösterme fonksiyonunu çağırır*/
function deleteFunction(delInd) {
    if (delInd > -1) {
        personArray.splice(delInd, 1);
    }
    showTable(pageNum);    
    pagination(pageNum);    
}

function updateFunction() {
    $(this).parent().siblings().css('background-color', 'red');
    $(this).parent().siblings().each(
        function () {
            if ($(this).find('input').length) {
                $(this).text($(this).find('input').val());
            } else {
                var t = $(this).text();
                $(this).text('').append($('<input />', { 'value': t }).val(t));
            }
        });
}

的index.html：

<!DOCTYPE html>

<html>
    <head>
        <title>Person Record</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    </head>
    <body>
        <form id="personForm">
            <div>
                <label for="firstname">Name:</label>
                <input type="text" id="firstname" name="firstname" value="" placeholder="İsim"/>
            </div>
            <div>
                <label for="lastname">Surname:</label>
                <input type="text" id="lastname" name="lastname" value="" placeholder="Soyisim"/>
            </div>
            <div>
                <label for="tc">TC:</label>
                <input type="tel" id="tc" name="tc" value="" placeholder="TC"/>
            </div>
            <div>
                <label for="birthday">Birthday:</label>
                <input type="date" id="birthday" name="birthday" />
            </div>
            <div>
                <input type="button" value="Save" id="submitButton" />
            </div>
        </form>

        <div id="table">
            <h3>Tüm Kişiler</h3>
            <table id="personTable" border="1">
                <thead>
                    <tr>
                        <th> Name </th>
                        <th> Surname </th>
                        <th> TC </th>
                        <th> Birthday </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>           
        </div>

        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

Answer 1

我在你的代码中发现了问题。你忘了从数组长度中减去1。请注意功能 showTable 中的循环。

工作代码：

var obj = { };
var data, i;
var personArray = [];
var pageNum = 1;
var objPerPage = 5;

$("#submitButton").click(function () {
    addObject();
    showTable(pageNum);
    pagination(pageNum);
    resetForm('');
});

function addObject() {
    var obj = { };
    data = $('#personForm').serializeArray();
    for (i = 0; i < data.length; i++) {
        obj[data[i].name] = data[i].value;
    }

    personArray.push(obj);
}

function pagination(p) {
    var personArrayLen = personArray.length;
    var pageNumFin = Math.ceil(personArrayLen / objPerPage);
    if (pageNumFin > 1) {
        $(".paging").remove();
        for (t = pageNumFin; t > 0; t--) {
            $('<button type="button" id="pageId-' + t + '" class="paging">' + t + '</button>').insertAfter('#table');
        }

        $('.paging').click(function () {
            var id = $(this).attr('id');
            var ind = id.split('-');
            var pageNum = ind[1];
            showTable(pageNum);
        });
    }
}

function showTable(page) {
    var index = personArray.length;
    var start = (page - 1) * objPerPage;
    var finish = start + objPerPage;
    if (finish > index) {
        finish = index;
    } else {
        finish = start + objPerPage;
    }

    $('.personRow').remove();
    for (k = finish - 1; k >= start; k--) {
        $("table#personTable tbody").append('<tr class="personRow"><td>' + personArray[k].firstname + '</td><td>' + personArray[k].lastname + '</td><td>' + personArray[k].tc + '</td><td>' + personArray[k].birthday + '</td><td><button class="deleteButton" id="deleteRow-' + k + '">Delete</button></td><td><button class="updateButton" id="updateRow-' + k + '">Update</button></td></tr>');
    }

    $(".deleteButton").click(function () {
        var id = $(this).attr('id');
        var ind = id.split('-');
        var deleteIndex = ind[1];
        deleteFunction(deleteIndex);
    });

    $(".updateButton").click(function () {

        var id = $(this).attr('id');
        var ind = id.split('-');
        var updateIndex = ind[1];
        console.log(updateIndex);
        $(this).parent().siblings().slice(0, 4).each(
            function () {
                if ($(this).find('input').length) {
                    $(this).html($(this).find('input').val());
                } else {
                    var inputText = $(this).text();
                    $(this).text('').append($('<input />', { 'value': inputText }).val(inputText));
                    console.log(personArray[updateIndex].name);
                    personArray[updateIndex].name = inputText;
                }
            });
    });
}

function resetForm(value) {
    $("#firstname").val(value);
    $("#lastname").val(value);
    $("#tc").val(value);
    $("#birthday").val(value);
}

/*Seçili öğeyi silip tabloyu gösterme fonksiyonunu çağırır*/
function deleteFunction(delInd) {
    if (delInd > -1) {
        personArray.splice(delInd, 1);
    }
    showTable(pageNum);    
    pagination(pageNum);    
}

function updateFunction() {
    $(this).parent().siblings().css('background-color', 'red');
    $(this).parent().siblings().each(
        function () {
            if ($(this).find('input').length) {
                $(this).text($(this).find('input').val());
            } else {
                var t = $(this).text();
                $(this).text('').append($('<input />', { 'value': t }).val(t));
            }
        });
}

fiddle

PS看起来你需要一些框架。

通过单击更新按钮，Jquery更新带有表单输入文本的数组

1 个答案: