0
私はフォームを持っています。 Submitボタンをクリックすると、フォーム要素を持つオブジェクトが作成されます。そして、私はこれらのオブジェクトを配列にプッシュします。この配列でhtmlテーブルを作成した後。クリック更新ボタンによるフォーム入力テキストによるJquery更新配列
ご覧のとおり、私は更新ボタンを持っています。ボタンをクリックすると、テーブルTDが入力を反転し、テキストを変更できます。私がする必要があるのは、更新ボタンを2回クリックすると、その配列を更新する必要があるということです。どうすればいいですか?
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>
あなたがa、b、c、d、e、f、およびeを並べ替えると、テーブル – Furkan
@ Furkanのfトップが表示されます。 他にも多くのバグがあります。たとえば、ページネーションを使用します。 リファクタリングを行うことをお勧めします。多くの問題を見つけて修正するのに役立ちます。 –