Problem with adding rows using javascript - 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>

Related

Append text box and button

how to create textbox/text field and button
JavaScript
<script type="text/javascript">
function addItemTodo(){
var value = document.getElementById('item1').value;
var value2 = document.getElementById('item2').value;
var my_table = document.getElementById('todo');
var rows = my_table.getElementsByTagName("tr").length;
row = my_table.insertRow(rows);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell1.innerHTML = value;
cell2.innerHTML = value2;
}
</script>
HTML Code
<input type="text" id="item1" placeholder="item1" size="12">
<input type="text" id="item2" placeholder="item2" size="14">
<button id="add" onclick="addItemTodo()">Add</button>
<table border="1" style="width:50%" id="todo">
<tr>
<th>Input from 'item1'</th>
<th>Input from 'item2'</th>
<th>Text Box</th>
<th>Button</th>
</tr>
</table>
How to append the text box and button, when clicked the add button
You could create your new elements within your Javascript as strings, and then add them to two new cells (insertCell(2) and insertCell(3)) using .innerHTML like so:
function addItemTodo() {
var value = document.getElementById('item1').value;
var value2 = document.getElementById('item2').value;
var my_table = document.getElementById('todo');
var rows = my_table.getElementsByTagName("tr").length;
var row = my_table.insertRow(rows);
row.insertCell(0).innerHTML = value;
row.insertCell(1).innerHTML = value2;
row.insertCell(2).innerHTML = "<input type='text' placeholder='xxx' class='text-box' />";
row.insertCell(3).innerHTML = "<button>Text</button>";
}
.text-box {
width: 50px;
}
<input type="text" id="item1" placeholder="item1" size="12">
<input type="text" id="item2" placeholder="item2" size="14">
<button id="add" onclick="addItemTodo()">Add</button>
<table border="1" style="width:50%" id="todo">
<tr>
<th>Input from 'item1'</th>
<th>Input from 'item2'</th>
<th>Text Box</th>
<th>Button</th>
</tr>
</table>

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);

how can i use delete buttons to delete row?

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>';

Limit maximum no. of table rows using Javascript

I have created a table. On every button click a new row is added in the table. Now I want to limit the maximum number of rows (10) that can be created. I want to do this using Javascript. Help is appreciated.
Here is my code till now:
<div id="div1" class="container input-group">
<input type="text" name="textbox1" id="textbox1" class="form-control" placeholder="Input Box" align="center">
<button class="btn btn-primary" name="btn1" id="btn1" onclick="myFunction()">Add</button>
<input type="submit" name="sub1" id="sub1" class="btn btn-success">
<table border="1" id="tb1" class="table table-bordered">
<tr>
<td>Sr. No.</td>
<td>Value</td>
<td id="td3">Action</td>
</tr>
</table>
</div>
<script type="text/javascript">
function myFunction() {
var table = document.getElementById("tb1");
var text1 = document.getElementById("textbox1").value;
var x = document.getElementById("tb1").rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell2.innerHTML = text1;
for (var i = 0; i < x; i++) {
cell1.innerHTML = i;
}
cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';
}
</script>
Now I just want to limit the no. of rows which can be created by button click.
You are already getting your row count with this part of your code:
var x = document.getElementById("tb1").rows.length;
So just check x to see if that count is less than 10 if so add another row, if not then just return without adding another.
if(x > 9){
return;
}
Note though that rows.length when accessed from your table element will return the number of all rows, this includes those that might be in a thead,tfoot and any tbody.
So if you end up wanting to make sure thead,tfoot, or a certain tbody has a certain number of rows then you have to access rows.length from that particular element
//For thead
var num_rows = document.querySelector("#tb1").tHead.rows.length;
//For tbody, [0] swap 0 with the whichever tbody index you want to check
var num_rows = document.querySelector("#tb1").tBodies[0].rows.length;
//For tFoot
var num_rows = document.querySelector("#tb1").tFoot.rows.length;
Demo
var mainBody = document.querySelector("#tb1").tBodies[0];
document.querySelector("button").addEventListener("click", function() {
var num_rows = mainBody.rows.length;
if (num_rows > 9) return;
var row = mainBody.insertRow();
row.insertCell(0).textContent = "Row "+(num_rows+1);
row.insertCell(1).textContent = "Col 2";
row.insertCell(2).textContent = "Col 3";
});
<table id="tb1">
<tbody>
<tr>
<td>Row 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
</table>
<button>Add Row</button>
Just add 3 lines to your script part, rest will be same. Jsfiddle here
1 - var totalRows = 0;
2 - if(totalRows <= 10)
3 - totalRows = totalRows + 1;
Updated script part is :
var totalRows = 0;
function myFunction() {
if(totalRows <= 10){
var table = document.getElementById("tb1");
var text1 = document.getElementById("textbox1").value;
var x = document.getElementById("tb1").rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell2.innerHTML = text1;
for (var i = 0; i < x; i++) {
cell1.innerHTML = i;
}
cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';
}
totalRows = totalRows + 1;
}
Create a variable and update it with each addition of row, Once the variable reach 10, stop adding new row
var countRow = 0; // variable to track the row count
function myFunction() {
if(countRow<=10){
var table = document.getElementById("tb1");
var text1 = document.getElementById("textbox1").value;
var x = document.getElementById("tb1").rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell2.innerHTML = text1;
for (var i = 0; i < x; i++) {
cell1.innerHTML = i;
}
cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';
}
countRow++; // increase variable by 1
}
DEMO
Try This -
var indx = 0;
function myFunction() {
indx++;
if(indx<=10){
var table = document.getElementById("tb1");
var text1 = document.getElementById("textbox1").value;
var x = document.getElementById("tb1").rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell2.innerHTML = text1;
for (var i = 0; i < x; i++) {
cell1.innerHTML = i;
}
cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';
}
}
<div id="div1" class="container input-group">
<input type="text" name="textbox1" id="textbox1" class="form-control" placeholder="Input Box" align="center">
<button class="btn btn-primary" name="btn1" id="btn1" onclick="myFunction()">Add</button>
<input type="submit" name="sub1" id="sub1" class="btn btn-success">
<table border="1" id="tb1" class="table table-bordered">
<tr>
<td>Sr. No.</td>
<td>Value</td>
<td id="td3">Action</td>
</tr>
</table>
</div>
Try adding a variable to count. Make a global variable 'count' and increment it every time when 'myFunction()' is called. use an if else in 'myFunction()' to control or limit the rows.
<input type="text" name="textbox1" id="textbox1" class="form-control" placeholder="Input Box" align="center">
<button class="btn btn-primary" name="btn1" id="btn1" onclick="myFunction()">Add</button>
<input type="submit" name="sub1" id="sub1" class="btn btn-success">
<table border="1" id="tb1" class="table table-bordered">
<tr>
<td>Sr. No.</td>
<td>Value</td>
<td id="td3">Action</td>
</tr>
</table>
</div>
<script type="text/javascript">
var count=0;
function myFunction() {
count++;
if(count<11)
{
var table = document.getElementById("tb1");
var text1 = document.getElementById("textbox1").value;
var x = document.getElementById("tb1").rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell2.innerHTML = text1;
for (var i = 0; i < x; i++) {
cell1.innerHTML = i;
}
cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';
} }
</script>
Use your function as below,
<script>
var totalCount = 0;
function myFunction() {
if(totalCount >= 10)
{
alert("You can add only 10 records");
return false;
}
else
{
totalCount++;
//your function for Adding Data
return true;
}
}
//Also Manage your funDel() function if you want like below
function funDel()
{
//Your code for deletion
totalCount--;
}
</script>

javascript create del row function button or chkbox

I was trying to make a delete button to delete rows or using chkbox and button to delete rows. When I use the deleteRow function, it will delete all rows in the table. Also, I have assigned an element id to do other functions, so I cannot change the addrow function about assign element id.
When i use delete button, it can do i wanted. I want to delete the row when the checkbox checked How can i use checkbox to delete row ?
Here's my code:
HTML:
<form>
<table>
<tr>
<td align="center" colspan="3"></td>
</tr>
</table>
<table id="dataTable" class='table table-striped table-hover table-bordered'>
<tr>
<td align="center"><b>Product ID:</b></td>
<td><input type="text" name="productid" id="productid" class="form-control" /></td>
<td align="center"><b>QTY:</b></td>
<td><input type="text" name="poqty" id="poqty" class="form- control"></td>
</tr>
<tr>
<input type="button" value="Add Item" onclick="addRow('dataTable')" class="form-control" />
<input type="button" value="del Item" onclick="deleteRow('dataTable')" class="btn btn-default" />
</tr>
<tr>
<td>
<input type="submit" value="confirm">
</td>
</tr>
<div id="txtHint"></div>
<div id="qty123"></div>
</td>
</tr>
</table>
</form>
Javascript:
<script language="javascript">
var y = 0;
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";
element1.id = "chkone" + y;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox1[]";
element2.id = "txtone" + y;
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox2[]";
element3.id = "txtre" + y;
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox3[]";
element4.id = "qtyone" + y;
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox4[]";
element5.id = "txtra" + y;
cell5.appendChild(element5);
y++;
}
</script>
<script>
function deleteRow(dataTable) {
var table = document.getElementById(dataTable);
var row = document.getElementById(dataTable);
row.parentNode.removeChild(row);
}
</script>
I want to delete the row when the checkbox checked , How can i use checkbox to delete row ?
There's probably more than one problem here, but what sticks out to me is this:
<input type="button" value="Add Item" onclick="addRow(tableID)" class="form-control" />
It doesn't look like you're correctly passing tableID to this function, whereas you're correctly passing a parameter to the deleteRow() function. Where is tableID in your code?
Given the code you've posted, nothing happens when you invoke addRow() because the function is never fired - tableID is undefined.

Categories