I'm trying to design a table in HTML which can add a row when I click "add row" button & the same for deleting an added row if i intend to delete it. I have written a javascript for adding checkbox and text. But I want even combo-boxes in it and I m stuck in the middle. Could you guys just figure it out and let me know how to do that?
This is my JS file.
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";
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";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
//This is where the PROBLEM is!!
var element4 = document.createElement("select");
element4.type = "option";
cell5.appendChild(element4);
}
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);
}
}
// JavaScript Document
NOTE: Please dont suggest SERVER_SIDE SCRIPTING. I'm just doing my homework on Java Script :)
This should do the trick:
var cell5 = row.insertCell(4);
//This is where the SOLUTION is!!
var element4 = document.createElement("select");
var option1 = document.createElement("option");
option1.value="1";
option1.innerHTML="sample1";
element4.appendChild(option1);
var option2 = document.createElement("option");
option2.value="2";
option2.innerHTML="sample2";
element4.appendChild(option2);
cell5.appendChild(element4);
Try to think of the outcome that you wish to get. In this case you wish to have HTML that looks like this:
<select>
<option></option>
<option></option>
</select>
So the question is what elements are there? There are three in my example, a select and two options. So in your JavaScript how do you create elements?
var element4 = document.createElement("select");
This creates a select. So how would you create an option?
var option1 = document.createElement("option");
maybe?
how would you add the option to the select? Same way you add the select to the cell.
element4.appendChild(option1);
then create the other options that you need and add the select to the cell.
why not trying
var sel=document.createElement("select");
// repeat this for each option you have
var opt=document.createElement("option");
opt.value="my option value";
opt.text="my option to be displayed";
sel.appendChild(opt);
// end repeat
cell5.appendChild(sel);
Related
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);
cell2.innerHTML = rowCount;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "item";
element2.size = "40";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "qty";
element3.style ="text-align: right";
cell4.appendChild(element3);
}
I am creating a set of columns using this code and by using a button action I am adding such rows continuously to the page.
Now along with this, I want to simultaneously add these values to SQL database.
Plus whenever i revisit this page I should have the previously entered data.
The setup have 3 buttons Delete Row, Add Row and Save.
I want to get all the rows into Database once I click Save.
I have the following js code in my jsp. Im not able to retain those textbox values below after the page is refreshed. Any idea how to retain the values?
Im calling this js function onclick of a html button so that it dynamically adds the row to the table.
<script>
function addRow(tableID) {
if(validateForm()==true){
document.getElementById('cruisedowntime2').style.display = "block";
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.defaultChecked="true";
cell1.appendChild(element1);*/
var cell0 = row.insertCell(0);
var element0=document.createElement("select");
element0.name="cruiselinedropdown";
var dropdownlist1=document.getElementById("droplist1");
var defaultselected=dropdownlist1.options[dropdownlist1.selectedIndex].value;
//window.location.replace("http://localhost:8085/Bridge_Downtime_Utility/Servlet?var="+defaultselected);
<%Map<String, String> map = new HashMap<String,String>();
for (int i = 0; i < crsenamelist.size(); i++) {
map.put(crsenamelist.get(i),crsecodelist.get(i));
}
%>
element0.options.add( new Option(defaultselected,defaultselected,true,true) );
element0.options.add( new Option("--","") );
<%
for(Map.Entry m:map.entrySet()){ %>
element0.options.add( new Option("<%=m.getValue()%>","<%=m.getValue()%>") );
cell0.appendChild(element0);<%}%>
var textbox3=document.getElementById('starttime');
var textbox7=document.getElementById('startdate');
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.title="Date: YYYY-MM-DD";
element2.type = "text";
element2.name = "starttimetextbox";
element2.value=textbox7.value+" "+textbox3.value;
cell2.appendChild(element2);
var textbox5=document.getElementById('endtime');
var textbox9=document.getElementById('enddate');
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.title="Date: YYYY-MM-DD";
element3.type = "text";
element3.name = "endtimetextbox";
element3.value=textbox9.value+" "+textbox5.value;
cell3.appendChild(element3);
var textbox1=document.getElementById('descrip');
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "descriptextbox";
if(textbox1.value==''){element4.value="-";}
else
element4.value=textbox1.value;
cell4.appendChild(element4);
//cell4.contenteditable=true;
/* var addRowBox = document.createElement("input");
addRowBox.setAttribute("type", "button");
addRowBox.setAttribute("value", "Edit");
var cell5 = row.insertCell(5);
cell5.appendChild(addRowBox);*/
var deleteRowBox = document.createElement("input");
deleteRowBox.setAttribute("type", "button");
deleteRowBox.setAttribute("value", "X");
deleteRowBox.setAttribute("onclick","SomeDeleteRowFunction(this)");
var cell6 = row.insertCell(4);
cell6.appendChild(deleteRowBox);
}}
</script>
You can store data and then load from localStorage if you want it to persist after page refresh.
To keep your data upon page refresh you need to save it somewhere, for future (after page reload) access.
Store it somewhere at your backend, and then access your, for instance, REST service upon page load.
Store it in localStorage\sessionStorage in browser.
There are no other ways to keep data without actually keeping it :)
I have a javascript function where rows are added dynamically.
<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 checkbox by default checked
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);
var element7 = document.createElement("select");
var optarr = ['vat1','vat2','vat3','vat4','vat5','vat6'];
for(var i = 0;i<optarr.length;i++)
{
var opt = document.createElement("option");
opt.text = optarr[i];
opt.value = optarr[i];
opt.className = optarr[i];
element7.appendChild(opt);
}
element7.setAttribute('id', 'vat5'); //set the id attribute
element7.setAttribute('name','tax'+rowCount);
element7.setAttribute('value','vat5');
cell7.appendChild(element7);
}
In the last "cell7" i have drop-down along with options,i am selecting only one option.But i need multiple options to be selected. For example: vat1 and vat3 once,vat3 and vat5 and vat2 once like these.I tried element7.setAttribute("multiple","").But it is turning into a list in which i dont needed it.So i tried "jquery Multiselect" but it is out of reach for me because i really dont know about jquery and ajax that much.Any help in this one will be really appreciated.
Edit:After using "setAttribute('multiple','')
I don't know what should go wrong. I copied your example and added the call to set the multiple attribute and it seems to work.
http://plnkr.co/edit/6yAVtHyVwAWBFd3TBTc7?p=preview
var element7 = document.createElement("select");
element7.setAttribute('multiple', '');
var optarr = ['vat1','vat2','vat3','vat4','vat5','vat6'];
for(var i = 0;i<optarr.length;i++)
{
var opt = document.createElement("option");
opt.text = optarr[i];
opt.value = optarr[i];
opt.className = optarr[i];
element7.appendChild(opt);
}
var container = document.getElementById('container');
container.appendChild(element7);
Perhaps check if you made a typo in your own code, that somehow didn't make it to the example posted here.
EDIT: You feel that the default HTML representation of a multiple select is ugly. I can't say i don't agree. That said, this is standart HTML and the representation do change when you see it on a PC, Mac, iPad, Android Phone, etc.
Sounds like you would get the best visual "upgrade" by using a css framework. There are many of them out there. I can name two of the most popular ones:
Bootstrap and
Foundation
//Button click in each row in a dynamically created table to retrieve a column value of the corresponding row
var rowCount = result.rows.length;// to count numrows coming from database
for(var j=1; j<=rowCount; j++)
{
var row = result.rows.item(j-1); // creating rowindex in the table
exercise =row.Exercise; // value from database
time= row.Time; // value from database
userid = row.UserId // value from database
var table = document.getElementById("check"); // table id
var row1 = table.insertRow(j); // Insert Row To Table
var cell1 = row1.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.value = exercise;
cell1.appendChild(element1);
var cell2 = row1.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.value = time;
cell2.appendChild(element2);
var cell3= row1.insertCell(2);
var element3 = document.createElement("input");
element3.type = "button";
element3.value = "edit";
var cell4= row1.insertCell(3);
var element4= document.createElement("input");
element4.value = userid;
cell4.appendChild(element4);
cell4.style.dispalay="none";
element3.addEventListener('click', function () {
alert('event fired!');
// get the userid value of the clicked button as an alert
});
}
First of all assign each of the elements a unique id. For example:
var cell4= row1.insertCell(3);
var element4= document.createElement("input");
element4.type = "text";
element4.value = userId; // from DB
element4.id = "element4-" + j;
cell4.appendChild(element4);
Assign your edit button id = j.
var cell3= row1.insertCell(2);
var element3 = document.createElement("input");
element3.type = "button";
element3.value = "edit";
element3.id = j;
cell3.appendChild(element3);
Then assign onclick handler to your edit button inside the for loop like this:
element3.onclick=doSomething;
Create a function doSomething()
function doSomething() {
for(var j=1; j<=rowCount; j++)
{
var value = document.getElementById("element" + j + "-" + this.id).value;
alert(value);
}
}
Hope this helps.
Try to give some row id and class to the columns then you can use
jQuery(".your_class").click(function(){
var column_value = jQuery(this).html();
});
did you mean something like this ?
I'm a total javascript noobie. I developed the code bellow following and modifing some random tutorial I found.
It should add and remove rows with input fields at a table, however, it does nothing. It also worth saying that I called the function as a link. I added 'javascript:addRow()' inside the tag and at the header. Did I missed something?
function addRow(){
tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount<7){
var row = table.insertRow(rowCount);
var cel1=row.insertCell(0);
var element1= document.createElement("input");
var element1.type="text";
cell1.appendChild(element1);
var cell2=row.insertCell(1);
var element2.type="text";
cell1.appendChild(element2);
var cell2=row.insertCell(2);
var element3.type="text";
cell1.appendChild(element3);
rowCount++;
}
}
function removeRow(){
tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount>1){
table.deletRow(rowCount);
rowCount--;
}
}
You have several errors, but here is the basic working model. I think you should be able to sort it out from here
http://jsfiddle.net/dBzkX/
function addRow() {
var tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount<7){
//You declared var in front of the same variable twice. Don't do that.
//You were appending cells inside existing cell. Add them to row instead.
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement('input');
element1.type="text";
cell1.appendChild(element1);
row.insertCell(1);
row.insertCell(2);
}
}
function removeRow(){
var tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount>1){
//you had type in deletRow. Also, you can pass in -1 to remove the last row
table.deleteRow(-1);
}
}
The error is here:
var element1= document.createElement("input");
var element1.type="text";
It should be
var element1= document.createElement("input");
element1.type="text";
and similar for the other elements.
You declare the variable with
var element1 = 'something';
and then access it with
element1 = 'something different';
Also there is a typo in
var cel1=row.insertCell(0);
It needs to be
var cell1=row.insertCell(0);
Additionally you did not define element 2 and 3,
used cell2 twice where it should be cell2 and cell3 and only appended to cell1.