how can i use delete buttons to delete row? - javascript

I wrote some code to make a dynamic table. Inserting the data part works ok. But I can't delete the row using the delete button because it's inside the innerHTML.
Does anyone have an idea? I can't figure it out.
var tr = document.getElementsByTagName("tr");
var td = document.getElementsByTagName("td")
//insert row with data
function myCreateFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(tr.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1)
var cell3 = row.insertCell(2)
var cell4 = row.insertCell(3);
cell1.innerHTML = document.getElementById("fname").value;
cell2.innerHTML = document.getElementById("lname").value;
cell4.innerHTML = '<button type = "button">Delete</button>'
if(document.getElementById("myRadio").checked){
cell3.innerHTML = document.getElementById("myRadio").value
} else {
cell3.innerHTML = document.getElementById("myRadio2").value
}
document.getElementById("fname").value = null;//form with no value
document.getElementById("lname").value = null;//form with no value
document.getElementById("myRadio").checked = false;//form with no value
document.getElementById("myRadio2").checked = false;//form with no value
}

You can use deleteRow() function
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
}
table, td {
border: 1px solid black;
}
<table id="myTable">
<tr>
<td>Row 1</td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>Row 2</td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>Row 3</td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
</table>
reference from here
You can attach like this.
cell4.innerHTML = '<button type = "button" onclick="deleteRow(this)">Delete</button>';

Related

editable html table with dynamic data dropdown

I have a table here which is editable so that we can add a row or delete the selected row here .
providing the code for the same :
<table id="dataTable">
<tr>
<th></th>
<th>Property</th>
<th>Value</th>
</tr>
<tbody>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>Type </td>
<td id="nodeType"></td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td id="property1Value">Property 1</td>
<td id="property1">
<select id="dropDownValue">
<option value="null">null</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td id="property2Value">Property 2</td>
<td id="property2">
</td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td id="property3">dataSourceName</td>
<td id="property3Value">
<select id="dropDownValue">
<option value="null">null</option>
</select>
</td>
</tr>
</tbody>
</table>
i have two function add and delete row :
while adding a row i need to add a column which have checkbox and a input and a drop down , the issue i am facing here is the dropdown options are dynamic and generated by an api call so i am constructing the select options something like this ::
const dataSet= ['a' , 'b', 'c']
var select = document.getElementById("dropDownValue");
var opt = document.createElement('option');
for (var i = 0; i < dataSet.length; i++) {
var optn = dataSet[i];
var el = document.createElement("option");
el.textContent = optn;
el.value = optn;
select.appendChild(el);
}
but this dropdown is not getting populated for all the tr's and comes only for one tr in the table
and i am trying to add this select while adding rows also : here is the addRow function
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name = "chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("select");
//element3.type = "text";
//element3.name = "txtbox[]";
cell3.appendChild(element3);
}

Problem with adding rows using javascript

I have a problem adding rows to the table with this code and I can't solve it.
function add() {
document.getElementById("popup").style.display = "block";
document.getElementById("add").addEventListener("click", function() {
if (!checkEmptyInput()) {
var newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3),
cell5 = newRow.insertCell(4),
product = document.getElementById("ins-product").value,
color = document.getElementById("ins-color").value,
price = document.getElementById("ins-price").value;
cell1.innerHTML = '<input type="checkbox" id="select">';
cell2.innerHTML = product;
cell3.innerHTML = color;
cell4.innerHTML = price;
cell5.innerHTML = '<input type="button" value="edit" id="edit">';
//selectedRowToInput();
}
document.getElementById("popup").style.display = "none";
});
clearinput();
}
function remove() {
var table = document.getElementById("table");
var index = 1;
while (index < table.rows.length) {
var input = table.rows[index].cells[0].children[0];
if (input && input.checked) {
table.deleteRow(index);
} else {
index++;
}
}
}
.popup {
display: none;
}
<div class="container">
<div class="tab tab-1">
<table id="table" border="1">
<tr>
<th>Select</th>
<th>Product</th>
<th>Color</th>
<th>Price</th>
<th>Edit</th>
</tr>
<tr>
<td><input type="checkbox" id="select"></td>
<td>A1</td>
<td>B1</td>
<td>10</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
<tr>
<td><input type="checkbox" id="select"></td>
<td>A3</td>
<td>B3</td>
<td>30</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
<tr>
<td><input type="checkbox" id="select" class="select"></td>
<td>A2</td>
<td>B2</td>
<td>20</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
</table>
</div>
<button onclick="add();">Add</button>
<button onclick="remove();">Remove</button>
<div class="popup" id="popup">
First Name :<input type="text" name="Product" id="ins-product"> Last Name :<input type="text" name="Color" id="ins-color"> Age :<input type="number" name="Price" id="ins-price">
<button id="add">Add</button>
<!--button onclick="edit();">Edit</button>-->
</div>
</div>
When I use add for the second time it adds two rows at once. And for the third time, it adds three rows of the same value. The number of rows inserting increases when I click on add repeatedly.
Your Code Got Some Undefined Functions and miss Placing functions Causing The issue.
The General Rule For Adding A New Row To the Table Is :
// Insert a row in the table at the last row
var newRow = tableRef.insertRow();
// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
For Your Specific "code"
The Event Listener For The Button With id = "add"
document.getElementById("add").addEventListener("click",function(){
Must Be Outside the function add to be triggered probably
Another Error Will Appear As the function "checkEmptyInput()" is no defined
Simply define or remove it for your code to work.
Here's a working code for you:
<script>
document.getElementById("add").addEventListener("click",function(){
if(!checkEmptyInput()){
var newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3),
cell5 = newRow.insertCell(4),
product = document.getElementById("ins-product").value,
color = document.getElementById("ins-color").value,
price = document.getElementById("ins-price").value;
cell1.innerHTML = '<input type="checkbox" id="select">';
cell2.innerHTML = product;
cell3.innerHTML = color;
cell4.innerHTML = price;
cell5.innerHTML = '<input type="button" value="edit" id="edit">';
//selectedRowToInput();
}
document.getElementById("popup").style.display = "none";
});
function add()
{
document.getElementById("popup").style.display = "block";
}
function remove () {
var table = document.getElementById("table");
var index = 1;
while (index < table.rows.length) {
var input = table.rows[index].cells[0].children[0];
if (input && input.checked) {
table.deleteRow(index);
}
else {
index++;
}
}
}
</script>

Can I put <input> tag in insertRow() function? Not only text

I want to use insertRow() function for adding rows in my table. but can I insert a row which contain <input> tag. because my table look like this
<table><thead>
<tr>
<th>No Account</th>
<th>Deskripsi</th>
<th>Debit</th>
<th>Credit</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="input-td" type="text" placeholder="No Account">
</td>
<td><input class="input-td" type="text" placeholder="-"></td>
<td><input class="input-td" type="text" placeholder="-"></td>
<td><input class="input-td" type="text" placeholder="0"></td>
<td><input class="input-td" type="text" placeholder="0"></td>
</tr></thead>
</table>
<i class="fa fa-plus"></i>&nbsp Add row
so far i could only find this example for the javascript code
function myCreateFunction() {
var table = document.getElementById("bootstrap-data-table");
var row = table.insertRow(3);
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);
cell1.innerHTML = "0";
cell2.innerHTML = "0";
cell3.innerHTML = "0";
cell4.innerHTML = "0";
cell.innerHTML = "0";
}
could I change "0" which is only text to being input tag like the previous row?
You could just assign an HTML string:
cell1.innerHTML = `<input class="input-td" type="text" placeholder="No Account">`;
Other options include creating the DOM via document.createElement and the like.
const input1 = document.createElement("input");
input1.classList.add("input-td");
input1.type = "text";
input1.placeholder = "No Account";
cell1.appendChild(input1);

Insert new row just below the clicked row with the use of rowIndex

Below is a code i wrote to do the following things
each table row contains a '+' button
when click on the button the code should find the row index of the clicked row
then a new row should add to the cilcked row's (rowindex+1) position. ie, just below the clicked row.
But now the problems arise is that
the onclick function inside button is not working , if i write it inside then it will work
the onclick of button in 'cell3' is not working
As i am a beginner in php and very beginner in javascript, can anyone please help me with detailed explanation
<script>
function myFunction(x) {
var table = document.getElementById("myTable");
var rowno=x.rowIndex;
alert(rowno);
var row = table.insertRow(rowno+1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input type="text"s name="txt1">';
cell2.innerHTML = '<input type="text" name="txt2">';
cell3.innerHTML = '<input type="button" name="btn" value="+" onclick="myFunction(this)">';
}
</script>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td><button onclick="myFunction(this)">+</button></td>
</tr>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td><button onclick="myFunction(this)">+</button></td>
</tr>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td><button onclick="myFunction(this)">+</button></td>
</tr>
</table>
You are passing the button to your function and trying to find its rowIndex which is not possible. You need to find the rowIndex of the button's parent row. I have modified the javascript code to select it. This should work.
<script type="text/javascript">
function myFunction(x) {
var table = document.getElementById("myTable");
var rowno = x.parentNode.parentNode.rowIndex; //this selects the button's parent row
alert(rowno);
var row = table.insertRow(rowno + 1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input type="text"s name="txt1">';
cell2.innerHTML = '<input type="text" name="txt2">';
cell3.innerHTML = '<input type="button" name="btn" value="+" onclick="myFunction(this)">';
}
</script>

Why my Save button and Cancel Button doesn't show after I clicked the New Product button?

I'm a beginner in javascript.
When I clicked the New Product button new Row will be added in the table(that worked out). But, Save button and Cancel button supposedly will show up(and it didn't work) and the New Product button will be hidden(still didn't work).
Here's a part of my HTML where I declared my buttons and the table.
<table id="dataTable" class="poductTable" border="1" cellspacing="2" width="75%" align="center">
<tr>
<td>No</td>
<td>Name</td>
<td>Description</td>
<td>Unit</td>
<td>Qty</td>
</tr>
<tr>
<td>1</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
<table align="center" id="productActions">
<tr>
<td><button type="button" onclick="saveProd()" id="saveProd" style="display:none;">Save</button></td>
<td><button type="button" onclick="cancelProd()" id="cancelProd" style="display:none;">Cancel</button></td>
<td><button type="button" onclick="addRow('dataTable')" id="newProd">New Product</button></td>
<td><button type="button" onclick="editProduct()" id="editProd">Edit Product</button></td>
<td><button type="button" onclick="delProduct()" id="delProd">Delete Product</button></td>
</tr>
</table>
Here is the part of my script.
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount + 0;
var cell2 = row.insertCell(1);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "newProdName[]";
cell2.appendChild(element1);
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "newProdDesc[]";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "newProdUnit[]";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "newProdQty[]";
cell5.appendChild(element4);
}
$(document).ready(function () {
$('#newProd').click(function () {
$(this).hide();
$('#saveProd').show();
$('#cancelProd').show();
});
});
Thank you for helping in advance.
I've had the same issue before
Not sure if its the correct fix, but i used JavaScript to hide the elements
HTML:
<td><button type="button" onclick="saveProd()" id="saveProd">Save</button></td>
<td><button type="button" onclick="cancelProd()" id="cancelProd">Cancel</button></td>
JavaScript
$(document).ready(function () {
$('#saveProd').hide();
$('#cancelProd').hide();
$('#newProd').click(function () {
$(this).hide();
$('#saveProd').show();
$('#cancelProd').show();
});
});

Categories