I am trying to build a form for creating a list for image deployment.
I am able to create a dynamic table on form load and also collect the data for each value, but can seem to get the Add and Delete working.
My Question:
What must I do(or change) in my code to get the ADD and Delete options working and to export the table data in CSV format.
Please could someone help and/or guide me as I am getting so lost and really would like a working example .. there is so much on the net it's over-whelming
Newest place I visited is Mozilla DOM help pages what's confusing is how to load your own variables into the table
For reference I used stackoverflow and plenty google and finally this site
Here is my code:
<div id="metric_results">
Enter Target Name:
<input type="text" name="textbox1" id="textbox1" VALUE="win2k8"/>
<br>
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
<input type="button" id="create" value="Add Row" onclick="Javascript:addRow()">
<input type="button" id="create" value="Delete Row" onclick="Javascript:deleteRow()">
</div>
<SCRIPT LANGUAGE="JavaScript">
window.onload =addTable;//loads table on window loading
function addTable() {
var myTableDiv = document.getElementById("metric_results")
var table = document.createElement('TABLE')
var tableBody = document.createElement('TBODY')
var imageName = textbox1.value
table.border = '1'
table.appendChild(tableBody);
var heading = new Array();
heading[0] = "imageName"
heading[1] = "acceptAllEula"
heading[2] = "noSSLverify"
heading[3] = "noVerification"
heading[4] = "TargetImagelocation"
heading[5] = "Username"
heading[6] = "Password"
heading[7] = "Target IP"
var imageInfo = new Array()
imageInfo[0] = new Array(imageName, "acceptAllEula", "noSSLverify", "noVerification", "testLocation", "user", "pass", "192.168.1.151")
imageInfo[1] = new Array("win2008", "acceptAllEula", "noSSLverify", "noVerification", "testLocation", "user", "pass", "192.168.1.151")
//TABLE COLUMNS
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (i = 0; i < heading.length; i++) {
var th = document.createElement('TH')
th.width = '75';
th.appendChild(document.createTextNode(heading[i]));
tr.appendChild(th);
}
//TABLE ROWS
for (i = 0; i < imageInfo.length; i++) {
var tr = document.createElement('TR');
for (j = 0; j < imageInfo[i].length; j++) {
var td = document.createElement('TD')
td.appendChild(document.createTextNode(imageInfo[i][j]));
tr.appendChild(td)
}
tableBody.appendChild(tr);
}
myTableDiv.appendChild(table)
}
function addRow() {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
</SCRIPT>
You're not setting any id to the table you're creating onload - so when you later come to call getElementById() inside addRow it cannot be found (and you're using a variable which does not exist - tableID!)
My suggestion is to take an id as a parameter to addTable, and set that as the id of the dynamically generated table:
function addTable(id) {
var myTableDiv = document.getElementById("metric_results")
var table = document.createElement('TABLE')
table.id = id;
....
onload, pass somethig sensible - default perhaps:
window.onload = function(){
addTable("default");
}
And either pass this in when adding a row, or use the default provided above:
function addRow() {
var table = document.getElementById("default");
....
or
function addRow(id) {
var table = document.getElementById(id);
Updated fiddle: https://jsfiddle.net/egtu5kay/5/
Left as an exercise for you: Correctly formatting the new row as you wish.
Related
function addrow() {
debugger;
var person = [];
if (localStorage.person1 != null && localStorage.person1 !=undefined) {
var person = JSON.parse(localStorage.person1);
}
var name = document.getElementById('name').value;
var city = document.getElementById('city').value;
person.push({
pname: name,
pcity: city
});
localStorage.setItem('person1', JSON.stringify(person));
bind();
}
function bind() {
debugger;
var per_list = JSON.parse(localStorage.getItem('person1'));
for (i = 0; i < per_list.length; i++ ) {
var table = document.getElementById('ptable');
var row = table.insertRow(0);
var col1 = row.insertCell(0);
var col2 = row.insertCell(1);
col1.innerHTML = per_list[i].pname;
col2.innerHTML = per_list[i].pcity;
}
}
I have two fields name and city;Now, click on "add row" prints ok for first value, but afterwards it is printing both old and new value.. And, i want only new entry below the old input.. thanks in advance
You need to clear the table since you are showing all the elements in the .bind function.
function bind() {
debugger;
var per_list = JSON.parse(localStorage.getItem('person1'));
// clear the table
var table = document.getElementById('ptable');
for (var i = 0, rows = table.rows.length; i < rows; i++) {
table.deleteRow(0)
}
// fill the table
for (i = 0; i < per_list.length; i++) {
var row = table.insertRow(0);
var col1 = row.insertCell(0);
var col2 = row.insertCell(1);
col1.innerHTML = per_list[i].pname;
col2.innerHTML = per_list[i].pcity;
}
}
guys i jnow it is dummy question but i spent hours in this and cant reach .. i want to add row to an existing table and this row consists of checkbox and 4 textboxes .. when i run it the textboxes appears but the checkbox dont .. here is my code
function addRow() {
var i = 1;
var table = document.getElementById("table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var html = [];
html.push("<table id='table'>\n<body>");
html.push("<tr><td><input type='checkbox' name='chk'/></td>");
var cell = row.insertCell(html);
for ( var propertyNames in grid.data[0]) {
cell = row.insertCell(i);
var element = document.createElement("input");
element.type = "text";
element.size = 10;
element.name = "input"+i;
cell.appendChild(element);
html.push("<td>" + cell + "</td>");
i++;
}
html.push("</tr>");
html.push("</body>\n</table>");
}
The problem is you are creating a array with the markup for the checkbox, but it is never added to the table
function addRow() {
var i = 1;
var table = document.getElementById("table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell();
var element = document.createElement("input");
element.type = "checkbox";
element.name = "chk";
cell.appendChild(element);
for (var propertyNames in grid.data[0]) {
cell = row.insertCell(i);
element = document.createElement("input");
element.type = "text";
element.size = 10;
element.name = "input" + i;
cell.appendChild(element);
i++;
}
}
var grid = {
data: [{
x: 1,
y: 1
}]
};
addRow();
<table id="table"></table>
I have to validate a table column using javascript.But I am not able to get row wise column value.I am generating this table using java script function like add row and add column. I have to submit data to insert into database .Before submission I have to check quantity and perunit price should be numeric value.
But I am not able to apply appropriate javascript API to get particular row wise column value.
please check this image
I am posting the code for what i did
<script language="javascript">
// Add row to the HTML table
function addRow() {
var table = document.getElementById('my_table'); //html table
var rowCount = table.rows.length; //no. of rows in table
var columnCount = table.rows[0].cells.length; //no. of columns in table
var row = table.insertRow(rowCount); //insert a row
var cell1 = row.insertCell(0); //create a new cell
var element1 = document.createElement("input"); //create a new element
element1.type = "checkbox"; //set the element type
element1.setAttribute('id', 'newCheckbox'); //set the id attribute
element1.setAttribute('checked',true); //set the id attribute
cell1.appendChild(element1); //append element to cell
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.setAttribute('id', 'newInput'); //set the id attribute
element2.setAttribute('name', 'sl'+rowCount);
element2.setAttribute('style', 'width: 50px');
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "textarea";
element3.setAttribute('rows', '4');
element3.setAttribute('cols','40');
element3.setAttribute('id', 'newInput'); //set the id attribute
element3.setAttribute('name', 'discription'+rowCount);
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.setAttribute('id', 'newInput'); //set the id attribute
element4.setAttribute('name', 'quantity'+rowCount);
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.setAttribute('id', 'newInput'); //set the id attribute
element5.setAttribute('name', 'price'+rowCount);
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.setAttribute('id', 'newInput'); //set the id attribute
element6.setAttribute('name', 'CST'+rowCount);
element6.setAttribute('style', 'width: 50px');
cell6.appendChild(element6);
var cell7 = row.insertCell(6); //create a new cell
var element7 = document.createElement("input"); //create a new element
element7.type = "checkbox"; //set the element type
element7.setAttribute('id', 'vat5'); //set the id attribute
element7.setAttribute('name','tax'+rowCount);
element7.setAttribute('value','vat5');
cell7.appendChild(element7);
var cell8 = row.insertCell(7); //create a new cell
var element8 = document.createElement("input"); //create a new element
element8.type = "checkbox"; //set the element type
element8.setAttribute('id', 'vat14'); //set the id attribute
element8.setAttribute('name','tax'+rowCount);
element8.setAttribute('value','vat14') ;
cell8.appendChild(element8);
var cell9 = row.insertCell(8); //create a new cell
var element9 = document.createElement("input"); //create a new element
element9.type = "checkbox"; //set the element type
element9.setAttribute('id', 'serviceTax'); //set the id attribute
element9.setAttribute('name','tax'+rowCount);
element9.setAttribute('value','serviceTax');
cell9.appendChild(element9);
}
//Alert
// delete the selected rows from table
function deleteSelectedRows() {
var table = document.getElementById('my_table'); //html table
var rowCount = table.rows.length; //no. of rows in table
for(var i=0; i< rowCount; i++) { //loops for all row in table
var row = table.rows[i]; //return a particular row
var chkbox = row.cells[0].childNodes[0]; //get check box object
if(null != chkbox && true == chkbox.checked) { //wheather check box is selected
table.deleteRow(i); //delete the selected row
rowCount--; //decrease rowcount by 1
i--;
}
}
}
// append column to the HTML table
function addColumn() {
var tblHeadObj = document.getElementById('my_table').tHead; //table head
for (var h=0; h< tblHeadObj.rows.length; h++) {
var newTH = document.createElement('th');
tblHeadObj.rows[h].appendChild(newTH); //append ne th to table
newTH.innerHTML = 'Column '+ (tblHeadObj.rows[h].cells.length); //append th content to th
}
var tblBodyObj = document.getElementById('my_table').tBodies[0]; //table body
for (var i=0; i< tblBodyObj.rows.length; i++) {
var newCell = tblBodyObj.rows[i].insertCell(-1); //create new cell
newCell.innerHTML = 'cell '+ (tblBodyObj.rows[i].cells.length); //append data to cell
}
}
// delete table rows with index greater then 0
function deleteAllRows() {
var tbl = document.getElementById('my_table'); // table reference
lastRow = tbl.rows.length - 1; // set the last row index
// delete rows with index greater then 0
for (i = lastRow; i > 0; i--) {
tbl.deleteRow(i); //delete the row
}
}
// delete last table column
function deleteColumn() {
var allRows = document.getElementById('my_table').rows;
for (var i=0; i< allRows.length; i++) {
if (allRows[i].cells.length > 3) {
allRows[i].deleteCell(-1); //delete the cell
} else {
alert("You can't delete more columns.");
return;
}
}
}
function generate(){
var table = document.getElementById('my_table');
var rowCount = table.rows.length;
var f = document.form;
f.target = "_blank";
f.method="post";
f.action='ViewPO.jsp?rowCount='+rowCount;
f.submit();
}
function generate1(){
var table = document.getElementById('my_table');
var rowCount = table.rows.length;
document.write(rowCount)
var a;
var b=document.myform.punitprice.value;
var c=document.myform.ptax.value;
var regexLetter = /[a-zA-z]/;
for(var j=1;i<=rowcount;i++){
var oCells = table.rows.item(j).cells;
a=oCells[3].firstChild.data;
}
if(regexLetter.test(a)){
alert('Enter Only Numeric Values For ');
return false;
}
var f = document.form;
f.target = "";
f.method="post";
f.action='purchaseAction.jsp?rowCount='+rowCount;
// f.submit();
}
</script>
<table id="my_table" align="center" border="2" cellpadding="0" cellspacing="0">
<thead><tr>
<th>Select</th>
<th>Sl.no</th>
<th>Description of Services/Goods</th>
<th>Quantity</th>
<th>Price/Unit</th>
<th>CST %</th>
<th>VAT5.5%</th>
<th>VAT14.5%</th>
<th>ServiceTax%</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br>
</center>
<center>
<hr/>
<bgcolor ="red"/>
<input type="button" value="Add row" name="add" onClick="addRow()"/>
<input type="button" value="Delete selected rows" name="delete_all" onClick="deleteSelectedRows()" />
<input type="button" value="Delete all rows" name="delete" onClick="deleteAllRows()" /><br/>
<hr/>
<p>
<input type="submit" value="Save" onclick="generate1()" />
<input type="submit" value="View PO" onclick="generate()"/>
</center>
<hr/>
</form>
</div>
Help me as soon as possible.
I have two functions for adding and deleting rows in a table using Javascript:
function addRow() {
//document.getElementById("div_dea").style.display = "none";
document.getElementById("div_orderlist").style.display = "block";
var table = document.getElementById("ordertable");
var rowcount = document.getElementById("ordertable").rows.length;
var row = table.insertRow(rowcount);
row.id="row_"+rowcount;
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Add some text to the new cells:
var sel = document.getElementById("select_product_name");
var optiontext = sel.options[sel.selectedIndex].text;
cell1.innerHTML = rowcount;
cell2.innerHTML = optiontext;
cell3.innerHTML = "abc";
}
Delete Row as follows:
function deleteRow(){
var table = document.getElementById("ordertable");
var rowcount = document.getElementById("ordertable").rows.length;
alert("first"+rowcount);
for(var i=1;i<rowcount;i++){
row = table.rows[i];
if(document.getElementById(row.id).style.backgroundColor =="red"){
table.deleteRow(row.rowIndex);
}
}
alert("second"+rowcount);
}
While addRow() I am adding serial numbers as: cell1.innerHTML = rowcount;
I need correct the serial numbers after deletion:
The rows get deleted But alert("second"+rowcount); not even working in deletion. How can correct the serial numbers of row after deletion.
Note: Use JavaScript only
Use this code
function updateRowCount(){
var table = document.getElementById("ordertable");
var rowcountAfterDelete = document.getElementById("ordertable").rows.length;
for(var i=1;i<rowcountAfterDelete;i++){
table.rows[i].cells[0].innerHTML=i;
}}
I want to delete a row from a table, I am using Javascript.
I am dynamically creating table rows and in the last cell I have delete button so how to make it delete the row?
var newData4 = document.createElement('td');
var delButton = document.createElement('input');
delButton.setAttribute('type', 'button');
delButton.setAttribute('name', 'deleteButton');
delButton.setAttribute('value', 'Delete');
newData4.appendChild(delButton);
newRow.appendChild(newData4);
this is the function for creating my table rows
function addItem()
{
document.getElementById('add').onclick=function()
{
var myTable = document.getElementById('tbody');
var newRow = document.createElement('tr');
//var element1 = document.createElement("input");
//element1.type = "checkbox";
//newRow.appendChild(element1);
var newData1 = document.createElement('td');
newData1.innerHTML = document.getElementById('desc').value;
var newData2 = document.createElement('td');
newData2.innerHTML = document.getElementById('taskPriority').value;
var newData3 = document.createElement('td');
newData3.innerHTML = document.getElementById('taskDue').value;
myTable.appendChild(newRow);
newRow.appendChild(newData1);
newRow.appendChild(newData2);
newRow.appendChild(newData3);
var newData4 = document.createElement('td');
var delButton = document.createElement('input');
delButton.setAttribute('type', 'button');
delButton.setAttribute('name', 'deleteButton');
delButton.setAttribute('value', 'Delete');
newData4.appendChild(delButton);
newRow.appendChild(newData4);
}
}
function SomeDeleteRowFunction(btndel) {
if (typeof(btndel) == "object") {
$(btndel).closest("tr").remove();
} else {
return false;
}
}
try this code here is fiddle
alternatively try
//delete the table row
$(document).on('click', '#del', function(){
$(this).parents('tr').remove();
});
}); //del is the id of the delete block
one pure javascript approach
function deleteRowUI(btndel) {
var table=document.getElementById('filterTableBody');
if (typeof(btndel) == "object") {
p=btndel.parentNode.parentNode;
p.parentNode.removeChild(p);
var oTable = document.getElementById('filterTableBody');
//gets rows of table
var rowLength = oTable.rows.length;
for (var i = 1; i < rowLength; i++){
var oCells = oTable.rows.item(i).cells;
//gets cells of current row
var cellLength = oCells.length-1;
for(var j = 0; j < cellLength; j++){
oCells.item(j).innerHTML = "";
break;
}
break;
}
} else {
return false;
}
}
if you want to temporary hidden it you can do:
this.parentNode.style.display='none';
in mind that the exclusion button is in a td.
But if you want to really delete it from the html and the database:
you need to make the same as above and a extra call to a function of php/plsqlwathever to delete from de db, i recommend using ajax to call it.
http://www.w3schools.com/ajax/default.asp
uses jQuery remove method to do it.
By the id attribute :
$("#id here").remove();
By the class attribute :
$(".class name here").remove();
I hope I've helped a little...