我要使用按钮update编辑和更新我创建的表。
我想要这样的东西:
function myFunction(){
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var rowFn = row.insertCell(0);
var rowLn = row.insertCell(1);
var tombol = row.insertCell(2);
var firstName = document.getElementById("firstName");
var lastName = document.getElementById("lastName");
createButton();
rowFn.innerHTML = firstName.value;
rowLn.innerHTML = lastName.value;
firstName.value = "";
lastName.value = "";
};
function createButton(){
var td = document.querySelectorAll("td")[2];
var btnDel = document.createElement("button");
var btnUpdate = document.createElement("button");
btnDel.innerHTML = "Delete";
btnDel.setAttribute("onclick", "deleteFunction(this)");
td.appendChild(btnDel);
btnUpdate.innerHTML = "Update";
btnUpdate.setAttribute("onclick", "updateFunction()");
btnUpdate.setAttribute("style", "margin-left: 5px;");
td.appendChild(btnUpdate);
}
<form>
First Name : <br>
<input type="text" id="firstName"><br>
Last Name : <br>
<input type="text" id="lastName"><br>
</form>
<button onclick="myFunction()">Submit</button>
<table class="table" id="myTable">
<tr>
<th>Name</th>
<th>Last Name</th>
<th>Action</th>
</tr>
</table>
我在创建函数时受阻,所以请帮助我创建函数。
答案 0 :(得分:1)
这就是你想要的。
const keys = Object.keys(res);
let isTypeCorrect: boolean = (
['result', 'additional-info'].every(key => keys.includes(key))
&& keys.length === 2
)
deleteFunction()
function deleteFunction(item) {
item.parentElement.parentElement.remove();
}
<div>
<div>
<button onclick="deleteFunction(this);">Delete 1</button>
</div>
</div>
<div>
<div>
<button onclick="deleteFunction(this);">Delete 2</button>
</div>
</div>
<div>
<div>
<button onclick="deleteFunction(this);">Delete 3</button>
</div>
</div>
updateFunction()
function updateFunction(item) {
item.parentElement.parentElement.children[0].innerText = document.getElementById("name").value;
item.parentElement.parentElement.children[1].innerText = document.getElementById("last").value;
}
<input id="name" value="Mark"><br>
<input id="last" value="Man">
<div>
<label>First Name</label>
<label>Last Name</label>
<div>
<button onclick="updateFunction(this);">Update</button>
</div>
</div>
function myFunction(){
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var rowFn = row.insertCell(0);
var rowLn = row.insertCell(1);
var tombol = row.insertCell(2);
var firstName = document.getElementById("firstName");
var lastName = document.getElementById("lastName");
createButton();
rowFn.innerHTML = firstName.value;
rowLn.innerHTML = lastName.value;
firstName.value = "";
lastName.value = "";
};
function createButton(){
var td = document.querySelectorAll("td")[2];
var btnDel = document.createElement("button");
var btnUpdate = document.createElement("button");
btnDel.innerHTML = "Delete";
btnDel.setAttribute("onclick", "deleteFunction(this)");
td.appendChild(btnDel);
btnUpdate.innerHTML = "Update";
btnUpdate.setAttribute("onclick", "updateFunction(this)");
btnUpdate.setAttribute("style", "margin-left: 5px;");
td.appendChild(btnUpdate);
}
function deleteFunction(elem) {
elem.parentElement.parentElement.remove();
}
function updateFunction(elem) {
var firstName = prompt("Enter first name");
var lastName = prompt("Enter last name");
if (firstName !== "") {
elem.parentElement.parentElement.children[0].innerText = firstName;
}
if (lastName !== "") {
elem.parentElement.parentElement.children[1].innerText = lastName;
}
}
答案 1 :(得分:0)
function User(id, firstname, lastname) {
this.Id = id;
this.FirstName = firstname;
this.Lastname = lastname;
}
var UserList=[];
function Add(){
UserList.push({
Id:UserList.length+1,
FirstName:$("#firstName").val(),
LastName:$("#lastName").val()
});
$("#firstName").val('');
$("#lastName").val('');
$("#id").val('');
LoadTable();
};
function LoadTable(){
$("#myTable tbody").html('');
var rows=" <tr><th>Name</th><th>Last Name</th> <th>Action</th></tr>";
for(i=0;i<UserList.length;i++){
rows =rows+ "<tr><td>" + UserList[i].FirstName + "</td><td>" + UserList[i].LastName + "</td><td> <a onclick='update("+UserList[i].Id+")'>update</a><a onclick='Delete("+UserList[i].Id+")'>Delete</a></td></tr>";
$(rows).appendTo("#myTable tbody");
}
}
function update(id){
var result = $.grep(UserList, function(e){ return e.Id == id; });
$("#firstName").val(result[0].FirstName);
$("#lastName").val(result[0].LastName);
$("#id").val(result[0].Id);
$("#Add").hide();
$("#Update").show();
}
function Update(){
for(i=0;i<UserList.length;i++){
if(UserList[i].Id==$("#id").val()){
UserList[i].FirstName=$("#firstName").val();
UserList[i].LastName=$("#lastName").val();
}
}
LoadTable();
$("#firstName").val('');
$("#lastName").val('');
$("#id").val('');
$("#Add").show();
$("#Update").hide();
}
function Delete(id){
var result = $.grep(UserList, function(e){ return e.Id == id; });
var i = UserList.indexOf(result[0]);
if (i >= 0) UserList.splice(i, 1);
LoadTable();
}
table{
border:1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
First Name : <br>
<input type="text" id="firstName"><br>
Last Name : <br>
<input type="text" id="lastName"><br>
<input type="text" id="id" style="display:none;">
</form>
<button onclick="Add()" id="Add">Add</button>
<button onclick="Update()" id="Update" style="display:none;">Update</button>
<table class="table" id="myTable">
<tr>
<th>Name</th>
<th>Last Name</th>
<th>Action</th>
</tr>
</table>