editable html table with dynamic data dropdown - javascript

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

Related

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

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.

How to add a select box with the same values using Javascript

I have code to add some select box, but I can't add the same value of select box. This is my HTML code
<input onClick="addRow('dataTable')" type="button" value="Add" class="btn btn-primary">
<input onClick="deleteRow('dataTable')" type="button" value="Delete" class="btn btn-danger">
<div style="padding: 20px 0px 0px 0px;">
<table id="dataTable" border="0">
<tbody>
<tr>
<td width="40px"></td>
<td align="center">Number</td>
</tr>
<tr>
<td><input name="chk" type="checkbox"></td>
<td>
<select id='kap' name='kap'>
<option value=''>-- number --</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="60">60</option>
</select>
</td>
</tr>
</tbody>
</table>
In this case I want to add some values equal to the selectbox id='kap'. This is my javascript code
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 element3 = document.createElement("select");
var element3 = document.getElementById("kap");
element3.type = "select";
element3.name = "selectbox[]"
cell2.appendChild(element3);
}
Try this:
var element3 = document.getElementById("kap").cloneNode(true);
Check it out here: jsFiddle
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 element3 = document.createElement("select");
var elementCopy = document.getElementById("kap");
element3.type = "select";
element3.name = "selectbox[]";
for(var i = 0; i < elementCopy.options.length; i++)
{
var option = document.createElement("option");
option.innerHTML = elementCopy.options[i].innerHTML;
element3.appendChild(elementCopy);
}
cell2.appendChild(element3);
Something like this will loop through the options in the first select and add them to the second (new) select.

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