[英]how to delete specific row from table on button click using javaScript
I'm trying to delete specific row from table on button click.when I click on Delete button it delete row one,not the specific selected row.我正在尝试在单击按钮时从表中删除特定行。当我单击删除按钮时,它会删除第一行,而不是特定的选定行。
here's my code这是我的代码
JavaScript JavaScript
let srN=1;
function getData(){
let Name= document.getElementById("txtName").value;
let fName=document.getElementById("txtFname").value;
let mail=document.getElementById("txtEmail").value;
let password=document.getElementById("txtPassword").value;
let address=document.getElementById("txtAddress").value;
let city=document.getElementById("txtCity").value;
let work=document.querySelector('input[name="gridRadios"]:checked').value
let skills=document.getElementById("txtSkills").value;
let experience=document.getElementById("txtExperience").value;
let message=document.getElementById("msg").value;
let tblData=document.getElementById("tbl");
let data="<tr id=tr'srN'><td>"+srN+"</td><td>"+Name+"</td><td>"+fName+"</td><td>"+mail+"</td> <td>"+password+"</td><td>"+address+"</td><td>"+city+"</td><td>"+work+"</td><td>"+skills+"</td><td>"+experience+"</td><td>"+message+"</td><td><button id='delRow"+srN+"' onclick='remove("+srN+")'>Delete</button></td></tr>";
srN+=1;
tblData.innerHTML+=data;
document.getElementById("txtName").value=" ";
document.getElementById("txtFname").value=" ";
document.getElementById("txtEmail").value=" ";
document.getElementById("txtPassword").value=" ";
document.getElementById("txtAddress").value=" ";
document.getElementById("txtCity").value=" ";
document.querySelector('input[name="gridRadios"]:checked').value=" ";
document.getElementById("txtSkills").value=" ";
document.getElementById("txtExperience").value=" ";
document.getElementById("msg").value=" ";
document.getElementById("txtName").focus();
}
function remove(){
document.getElementById("tr'srN'").remove();
}
Change your data
line to this:将您的data
线更改为:
let data="<tr id=tr"+srN+"><td>"+srN+"</td><td>"+Name+"</td><td>"+fName+"</td><td>"+mail+"</td> <td>"+password+"</td><td>"+address+"</td><td>"+city+"</td><td>"+work+"</td><td>"+skills+"</td><td>"+experience+"</td><td>"+message+"</td><td><button id='delRow"+srN+"' onclick='remove("+srN+")'>Delete</button></td></tr>";
And change your removal line to this:并将您的删除行更改为:
document.getElementById("tr"+srN).remove();
As per the code provided,根据提供的代码,
let srN=1;
function getData(){
let Name= document.getElementById("txtName").value;
let fName=document.getElementById("txtFname").value;
let mail=document.getElementById("txtEmail").value;
let password=document.getElementById("txtPassword").value;
let address=document.getElementById("txtAddress").value;
let city=document.getElementById("txtCity").value;
let work=document.querySelector('input[name="gridRadios"]:checked').value
let skills=document.getElementById("txtSkills").value;
let experience=document.getElementById("txtExperience").value;
let message=document.getElementById("msg").value;
let tblData=document.getElementById("tbl");
// changes to how tr id attribute was set
let data="<tr id=tr'"+srN+"'><td>"+srN+"</td><td>"+Name+"</td><td>"+fName+"</td><td>"+mail+"</td> <td>"+password+"</td><td>"+address+"</td><td>"+city+"</td><td>"+work+"</td><td>"+skills+"</td><td>"+experience+"</td><td>"+message+"</td><td><button id='delRow"+srN+"' onclick='remove("+srN+")'>Delete</button></td></tr>";
srN+=1;
tblData.innerHTML+=data;
document.getElementById("txtName").value=" ";
document.getElementById("txtFname").value=" ";
document.getElementById("txtEmail").value=" ";
document.getElementById("txtPassword").value=" ";
document.getElementById("txtAddress").value=" ";
document.getElementById("txtCity").value=" ";
document.querySelector('input[name="gridRadios"]:checked').value=" ";
document.getElementById("txtSkills").value=" ";
document.getElementById("txtExperience").value=" ";
document.getElementById("msg").value=" ";
document.getElementById("txtName").focus();
}
// changes made on remove function to accept the srN
// and thus remove by srN of individual table row
function remove(srN){
document.getElementById("tr" + srN).remove();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.