0
私の目標は、DELETEおよびEDITボタンを含むテーブルにデータを追加するプログラムを作成することです。私はすでに新しいデータ/行を追加し、行を削除するためのコードを作成しました。私の問題は、テーブルのデータ/行を編集する方法に関するコードを理解することができないことです。ここに私のコードだ：jQueryを使用して行データを編集する方法
$(document).ready(function(){
$(".add-row").click(function(){
var id = $("#id").val();
var name = $("#name").val();
var gender = $("#gender").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + id + "</td><td>" + name + "</td><td>" + gender + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
$(".edit-row").click(function(){
if($(this).is(":checked")){
$(this).html('<input type="text" value="' + $(this).html() + '"/>');
};
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Form</title>
<link rel="stylesheet" type="text/css" href="css/jstyle.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<form>
<input type="text" id="id" placeholder="ID Number">
<input type="text" id="name" placeholder="Name">
<label>Gender:
<select id="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</label>
<input type="button" class="add-row" value="Add Row">
</form>
<table>
<thead>
<tr>
<th>Select</th>
<th>ID Number</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr hidden>
<td><input type="checkbox" name="record"></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
<button type="button" class="edit-row">Edit Row</button>
</body>
</html>は、事前にありがとうございます！
編集ボタンは、通常、各行に配置されています。次に、イベントハンドラでは、ボタンからのトラバースを使用して現在の行にアクセスします – charlietfl
これはコードのいくつかの短い行ではありません.JavaScript/jQueryを使用した編集可能な表のチュートリアルがたくさんあり、軽量なプラグインがたくさんあります。それらを見て、いくつかのチュートリアルに従ってみてください。試しに試してみてください。私たちはあなたのためにそれを書くことはできません。 – ProEvilz