How to remove row through cell content in javascript?
Question
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Data Storage Web</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<h2>Costumer Details :-</h2>
<div
style="border-right: 2px solid black; width: 330px; height: max-content"
>
Name :-  
<input
type="username"
id="UN"
placeholder="Customer Name"
style="
border: none;
border-bottom: 2px solid black;
outline: none;
font-size: medium;
"
/>
<br /><br />
Amount :-
<input
type="number"
id="UA"
placeholder="Due Amount"
style="
border: none;
border-bottom: 2px solid black;
outline: none;
font-size: medium;
"
/>
<br /><br />
Phone No. :-
<input
type="number"
id="PN"
placeholder="Phone No."
style="
border: none;
border-bottom: 2px solid black;
outline: none;
font-size: medium;
"
/>
<br /><br />
<button
style="width: 300px; border-radius: 5px; height: 30px"
onclick="RecordData()"
>
<b
style="
font-family: helvetica;
font-size: medium;
color: rgb(41, 35, 35);
"
>SAVE</b
>
</button>
</div>
<div
style="
/* border: 2px solid black; */
width: 350px;
height: 200px;
margin-left: 350px;
margin-top: -215px;
"
>
<h2>Edit :-</h2>
ID :-  
<input
type="number"
id="UNIDR"
placeholder="Customer ID"
style="
border: none;
border-bottom: 2px solid black;
outline: none;
font-size: medium;
"
/>
<button onclick="removeID()">Remove</button>
</div>
<br />
<hr />
<span>
<h2>Data :-</h2>
<table id="DataTable">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Amount</th>
<th>Phone No.</th>
<th>Issue Date</th>
<th>Due Date</th>
<th>Costumer ID</th>
</tr>
</table>
</span>
<script>
serielNumber = 1;
function RecordData() {
var length1 = document.getElementById("UN").value;
var length2 = document.getElementById("UA").value;
var length3 = document.getElementById("PN").value;
if (
(length1 == null || length1 == "",
length2 == null || length2 == "",
length3 == null || length3 == "")
) {
alert("Enter all values first !");
} else {
var value1 = document.getElementById("UN").value;
var value2 = document.getElementById("UA").value;
var value3 = document.getElementById("PN").value;
var table = document.getElementById("DataTable");
var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1;
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var dddmmyy1 = day + "/" + month + "/" + year;
var dddmmyy2 = day + "/" + (month + 1) + "/" + year;
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
cell1.innerHTML = serielNumber;
serielNumber++;
cell2.innerHTML = value1;
cell3.innerHTML = value2;
cell4.innerHTML = value3;
cell5.innerHTML = dddmmyy1;
cell6.innerHTML = dddmmyy2;
cell7.innerHTML = Math.floor(Math.random() * 10000 + 11111);
var value1 = (document.getElementById("UN").value = "");
var value2 = (document.getElementById("UA").value = "");
var value3 = (document.getElementById("PN").value = "");
}
}
function removeID() {
var row_remove = document.getElementById("UNIDR").value;
console.log(row_remove);
table.deleteRow(row_remove)[6];
}
</script>
</body>
</html>
Here first I enter value in the first section which would add a new row with respect to my entered data, however every row has its unique costumer id generated randomly. I want to remove the row by entering that costumer id in Edit field and clicking the remove button on the edit side, but I am unable to do that through this code, I know its wrong, please correct it.
function removeID() {
var row_remove = document.getElementById("UNIDR").value;
console.log(row_remove);
table.deleteRow(row_remove)[6];
}
3 answers
solution1
2 2021-07-26 18:03:34
You can use below code to fine row based on customer id cell:
var row = Array.from(table.getElementsByTagName("tr")).filter(t => +t.cells[6].innerText == row_remove)
Then you can you need to remove the row from the table:
row[0].parentNode.removeChild(row[0])
Here is working snippet:
serielNumber = 1; function RecordData() { var length1 = document.getElementById("UN").value; var length2 = document.getElementById("UA").value; var length3 = document.getElementById("PN").value; if ( (length1 == null || length1 == "", length2 == null || length2 == "", length3 == null || length3 == "") ) { alert("Enter all values first !"); } else { var value1 = document.getElementById("UN").value; var value2 = document.getElementById("UA").value; var value3 = document.getElementById("PN").value; var table = document.getElementById("DataTable"); var dateObj = new Date(); var month = dateObj.getUTCMonth() + 1; var day = dateObj.getUTCDate(); var year = dateObj.getUTCFullYear(); var dddmmyy1 = day + "/" + month + "/" + year; var dddmmyy2 = day + "/" + (month + 1) + "/" + year; var row = table.insertRow(-1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); var cell5 = row.insertCell(4); var cell6 = row.insertCell(5); var cell7 = row.insertCell(6); cell1.innerHTML = serielNumber; serielNumber++; cell2.innerHTML = value1; cell3.innerHTML = value2; cell4.innerHTML = value3; cell5.innerHTML = dddmmyy1; cell6.innerHTML = dddmmyy2; cell7.innerHTML = Math.floor(Math.random() * 10000 + 11111); var value1 = (document.getElementById("UN").value = ""); var value2 = (document.getElementById("UA").value = ""); var value3 = (document.getElementById("PN").value = ""); } } function removeID() { var row_remove = document.getElementById("UNIDR").value; console.log(row_remove); var table = document.getElementById("DataTable"); var rows = table.getElementsByTagName("tr"); var row = Array.from(rows).filter(t => +t.cells[6].innerText == row_remove) if (table.getElementsByTagName("tr").length > 1 && row && row.length == 1) row[0].parentNode.removeChild(row[0]) }
table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: center; }
<h2>Costumer Details :-</h2> <div style="border-right: 2px solid black; width: 330px; height: max-content"> Name :-   <input type="username" id="UN" placeholder="Customer Name" style=" border: none; border-bottom: 2px solid black; outline: none; font-size: medium; " /> <br /><br /> Amount :- <input type="number" id="UA" placeholder="Due Amount" style=" border: none; border-bottom: 2px solid black; outline: none; font-size: medium; " /> <br /><br /> Phone No. :- <input type="number" id="PN" placeholder="Phone No." style=" border: none; border-bottom: 2px solid black; outline: none; font-size: medium; " /> <br /><br /> <button style="width: 300px; border-radius: 5px; height: 30px" onclick="RecordData()"> <b style=" font-family: helvetica; font-size: medium; color: rgb(41, 35, 35); ">SAVE</b> </button> </div> <div style=" /* border: 2px solid black; */ width: 350px; height: 200px; margin-left: 350px; margin-top: -215px; "> <h2>Edit :-</h2> ID :-   <input min="1" type="number" id="UNIDR" placeholder="Customer ID" style=" border: none; border-bottom: 2px solid black; outline: none; font-size: medium; " /> <button onclick="removeID()">Remove</button> </div> <br /> <hr /> <span> <h2>Data :-</h2> <table id="DataTable"> <tr> <th>S.No</th> <th>Name</th> <th>Amount</th> <th>Phone No.</th> <th>Issue Date</th> <th>Due Date</th> <th>Costumer ID</th> </tr> </table> </span>solution2
1 ACCPTED 2021-07-26 17:31:17
In your function, you have to define what table is unless it's undefined. Also remove [6] right after table.deleteRow(row_remove); it's an invalid syntax.
To solve this: You can actually traverse to each row, compare the unique cust_id with input value. If it's the same, get the row_num , and then remove the row.
function removeID() {
var cust_id = document.getElementById("UNIDR").value;
var table = document.getElementById('DataTable');
if (table.rows.length > 1){
var row_remove = 0,found = 0;
for (var i=1;i<table.rows.length;i++){
if (table.rows[i].cells[6].innerHTML == cust_id){
row_remove = i;
found = 1;
break;
}
}
if(found){
table.deleteRow(row_remove);
}
else{
console.log('cust_id ['+ cust_id+'] not found!');
}
}
}
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Data Storage Web</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: center; } </style> </head> <body> <h2>Costumer Details :-</h2> <div style="border-right: 2px solid black; width: 330px; height: max-content" > Name :-   <input type="username" id="UN" placeholder="Customer Name" style=" border: none; border-bottom: 2px solid black; outline: none; font-size: medium; " /> <br /><br /> Amount :- <input type="number" id="UA" placeholder="Due Amount" style=" border: none; border-bottom: 2px solid black; outline: none; font-size: medium; " /> <br /><br /> Phone No. :- <input type="number" id="PN" placeholder="Phone No." style=" border: none; border-bottom: 2px solid black; outline: none; font-size: medium; " /> <br /><br /> <button style="width: 300px; border-radius: 5px; height: 30px" onclick="RecordData()" > <b style=" font-family: helvetica; font-size: medium; color: rgb(41, 35, 35); " >SAVE</b > </button> </div> <div style=" /* border: 2px solid black; */ width: 350px; height: 200px; margin-left: 350px; margin-top: -215px; " > <h2>Edit :-</h2> ID :-   <input type="number" id="UNIDR" placeholder="Customer ID" style=" border: none; border-bottom: 2px solid black; outline: none; font-size: medium; " /> <button onclick="removeID()">Remove</button> </div> <br /> <hr /> <span> <h2>Data :-</h2> <table id="DataTable"> <tr> <th>S.No</th> <th>Name</th> <th>Amount</th> <th>Phone No.</th> <th>Issue Date</th> <th>Due Date</th> <th>Costumer ID</th> </tr> </table> </span> <script> serielNumber = 1; function RecordData() { var length1 = document.getElementById("UN").value; var length2 = document.getElementById("UA").value; var length3 = document.getElementById("PN").value; if ( (length1 == null || length1 == "", length2 == null || length2 == "", length3 == null || length3 == "") ) { alert("Enter all values first !"); } else { var value1 = document.getElementById("UN").value; var value2 = document.getElementById("UA").value; var value3 = document.getElementById("PN").value; var table = document.getElementById("DataTable"); var dateObj = new Date(); var month = dateObj.getUTCMonth() + 1; var day = dateObj.getUTCDate(); var year = dateObj.getUTCFullYear(); var dddmmyy1 = day + "/" + month + "/" + year; var dddmmyy2 = day + "/" + (month + 1) + "/" + year; var row = table.insertRow(-1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); var cell5 = row.insertCell(4); var cell6 = row.insertCell(5); var cell7 = row.insertCell(6); cell1.innerHTML = serielNumber; serielNumber++; cell2.innerHTML = value1; cell3.innerHTML = value2; cell4.innerHTML = value3; cell5.innerHTML = dddmmyy1; cell6.innerHTML = dddmmyy2; cell7.innerHTML = Math.floor(Math.random() * 10000 + 11111); var value1 = (document.getElementById("UN").value = ""); var value2 = (document.getElementById("UA").value = ""); var value3 = (document.getElementById("PN").value = ""); } } function removeID() { var cust_id = document.getElementById("UNIDR").value; var table = document.getElementById('DataTable'); if (table.rows.length > 1){ var row_remove = 0,found = 0; for (var i=1;i<table.rows.length;i++){ if (table.rows[i].cells[6].innerHTML == cust_id){ row_remove = i; found = 1; break; } } if(found){ table.deleteRow(row_remove); } else{ console.log('cust_id ['+ cust_id+'] not found!'); } } else{ console.log('Table has no data.'); } } </script> </body> </html>
solution3
1 2021-07-26 18:25:34
I suggest you could save troubling the User from typing IDs manually: You could simply add on each row a new button for removing it:
HTML:
...
<table id="DataTable">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Amount</th>
<th>Phone No.</th>
<th>Issue Date</th>
<th>Due Date</th>
<th>Costumer ID</th>
<th>Actions</th>
</tr>
</table>
...
Javascript:
...
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
cell8.innerHTML = "<button onclick=\"return removeRow(this.parentNode.parentNode)\">remove</button>"
...
function removeRow(row)
{
var customer=row.cells[6].innerText;
var x=confirm("Sure to remove customer "+customer+"?");
if (x)
{
row.parentNode.removeChild(row);
}
return x;
}
(Later, in the same way, you could add another row button for editing, which would load the row's data into the form fields allowing thus the user to edit them and save them back to the table.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JavaScript: How to iterate through a table and remove the second cell in Javascript
How to edit content of certain cell in a row into a table using JavaScript?
Loop through the 1st row of HTML table (GridView) and get the cell content using Javascript
How to add content in a cell - Javascript
Remove table row by finding content with Javascript
How to update cell in row in javascript?
How to remove an appended content in javascript?
Javascript - iterate through table row and edit cell style
How to refresh table, row or cell content after database content update
javascript how to add a row every forth cell?
Related Tags