I have an HTML table that adds a new row below where the button in current row is located. Currently when the row is created it generates a clone of the row above including the data. I would like this to be a row that has no entry for the input values rather than a clone of the values above.
Javascript
function addRow(row)
{
var i = row.parentNode.parentNode.rowIndex;
var tr = document.getElementById('Table').insertRow(i+1);
tr.innerHTML = row.parentNode.parentNode.innerHTML;
tr.children[0].innerHTML = tr.parentNode.querySelectorALL("tr").length-1;
}
<table id="Table" border="1">
<tr>
<td><b>Measured Depth</b></td>
<td><b>Inclination</b></td>
<td><b>Azimuth</b></td>
<td><b>Delete?</b></td>
<td><b>Add Row?</b></td>
</tr>
<tr>
<td><input size=25 type="text" id="Measured Depth0[]" contenteditable="true" value='339'></td>
<td><input size=25 type="text" id="Inclination0[]" contenteditable='true' value='0.540000021'></td>
<td><input size=25 type="text" id="Azimuth0[]" contenteditable='true' value='310.7200012'></td>
<td><input type="button" id="delbutton0" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorebutton0" value="Add Row Below" onclick="addRow(this)"/></td>
</tr>
</table>
after you add a row, you can just set the values of all inputs in that row to "". get all the inputs of type text using tr.querySelectorAll("input[type='text']") and using a loop set values of all to ""
function addRow(row)
{
var i = row.parentNode.parentNode.rowIndex;
var tr = document.getElementById('Table').insertRow(i+1);
tr.innerHTML = row.parentNode.parentNode.innerHTML;
var inputs = tr.querySelectorAll("input[type='text']");
for(var i=0; i<inputs.length; i++)
inputs[i].value = "";
}
<table id="Table" border="1">
<tr>
<td><b>Measured Depth</b></td>
<td><b>Inclination</b></td>
<td><b>Azimuth</b></td>
<td><b>Delete?</b></td>
<td><b>Add Row?</b></td>
</tr>
<tr>
<td><input size=25 type="text" id="Measured Depth0[]" contenteditable="true" value='339'></td>
<td><input size=25 type="text" id="Inclination0[]" contenteditable='true' value='0.540000021'></td>
<td><input size=25 type="text" id="Azimuth0[]" contenteditable='true' value='310.7200012'></td>
<td><input type="button" id="delbutton0" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorebutton0" value="Add Row Below" onclick="addRow(this)"/></td>
</tr>
</table>
You can do this very easily with jQuery:
var $lastRow = $("table#Table tr:last-child");
var $newRow = $lastRow.clone()
$newRow.find("input[type=text]").val(''); //empty all the values in text inputs
$("table#Table").append( $newRow );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Table" border="1">
<tr>
<td><b>Measured Depth</b></td>
<td><b>Inclination</b></td>
<td><b>Azimuth</b></td>
<td><b>Delete?</b></td>
<td><b>Add Row?</b></td>
</tr>
<tr>
<td><input size=25 type="text" id="Measured Depth0[]" contenteditable="true" value='339'></td>
<td><input size=25 type="text" id="Inclination0[]" contenteditable='true' value='0.540000021'></td>
<td><input size=25 type="text" id="Azimuth0[]" contenteditable='true' value='310.7200012'></td>
<td><input type="button" id="delbutton0" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorebutton0" value="Add Row Below" onclick="addRow(this)"/></td>
</tr>
</table>
Add this line of code to your function to empty values in HTML code:
function addRow(row)
{
var i = row.parentNode.parentNode.rowIndex;
var tr = document.getElementById('Table').insertRow(i+1);
tr.innerHTML = row.parentNode.parentNode.innerHTML;
tr.innerHTML = tr.innerHTML.replace(/value='.*'/, "value=''"); //this will remove all values from your html
tr.children[0].innerHTML = tr.parentNode.querySelectorALL("tr").length-1;
}
Using JQuery:
function addRow(){
var t = $("#Table tr").last().clone();
t.find("input").each(function(i,element) {
$(element).val("");
});
t.appendTo("#Table");
}
I can suggest you do this - define table rows in javascript and add those directly. Also, use th for table headers
function edit_row(no) {
document.getElementById("edit_button" + no).style.display = "none";
document.getElementById("save_button" + no).style.display = "block";
// get elements
var measured = document.getElementById("measured_row" + no);
var inclination = document.getElementById("inclination_row" + no);
var azimuth = document.getElementById("azimuth_row" + no);
// get their values
var measured_data = measured.innerHTML;
var inclination_data = inclination.innerHTML;
var azimuth_data = azimuth.innerHTML;
// replace by editable input tags
measured.innerHTML = "<input type='text' id='measured_text" + no + "' value='" + measured_data + "'>";
inclination.innerHTML = "<input type='text' id='inclination_text" + no + "' value='" + inclination_data + "'>";
azimuth.innerHTML = "<input type='text' id='azimuth_text" + no + "' value='" + azimuth_data + "'>";
}
function save_row(no) {
// same as in edit function
var measured_val = document.getElementById("measured_text" + no).value;
var inclination_val = document.getElementById("inclination_text" + no).value;
var azimuth_val = document.getElementById("azimuth_text" + no).value;
document.getElementById("measured_row" + no).innerHTML = measured_val;
document.getElementById("inclination_row" + no).innerHTML = inclination_val;
document.getElementById("azimuth_row" + no).innerHTML = azimuth_val;
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
}
function delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_measured = document.getElementById("new_measured").value;
var new_inclination = document.getElementById("new_inclination").value;
var new_azimuth = document.getElementById("new_azimuth").value;
var table = document.getElementById("data_table");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='measured_row" + table_len + "'>" + new_measured + "</td><td id='inclination_row" + table_len + "'>" + new_inclination + "</td><td id='azimuth_row" + table_len + "'>" + new_azimuth + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_measured").value = "";
document.getElementById("new_inclination").value = "";
document.getElementById("new_azimuth").value = "";
}
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Measured Depth</th>
<th>Inclination</th>
<th>Azimuth</th>
</tr>
<tr id="row1">
<td id="measured_row1">339</td>
<td id="inclination_row1">0.540000021</td>
<td id="azimuth_row1">310.7200012</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr>
<td><input type="text" id="new_measured"></td>
<td><input type="text" id="new_inclination"></td>
<td><input type="text" id="new_azimuth"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
Related
In my Vue CLI component, I'm populating a row table dynamically
i.e. inside my methods:
add_row() {
var new_name = document.getElementById("new_name").value;
var new_country = document.getElementById("new_country").value;
var new_age = document.getElementById("new_age").value;
var table = document.getElementById("data_table");
var table_len = table.rows.length - 1;
table.insertRow(table_len).outerHTML =
"<tr id='row" +
table_len +
"'><td id='name_row" +
table_len +
"'>" +
new_name +
"</td><td id='country_row" +
table_len +
"'>" +
new_country +
"</td><td id='age_row" +
table_len +
"'>" +
new_age +
"</td><td><input type='button' value='Delete' class='delete' #click=\"delete_row(" +
table_len +
')"></td></tr>';
document.getElementById("new_name").value = "";
document.getElementById("new_country").value = "";
document.getElementById("new_age").value = "";
}
This is the HTML part of the component:
<table
align="center"
cellspacing="2"
cellpadding="5"
id="data_table"
border="1"
>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
<tr id="row1">
<td id="name_row1">Ankit</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input
type="button"
value="Delete"
class="delete"
#click="delete_row('1')"
/>
</td>
</tr>
<tr>
<td><input type="text" id="new_name" /></td>
<td><input type="text" id="new_country" /></td>
<td><input type="text" id="new_age" /></td>
<td>
<input
type="button"
class="add"
#click="add_row()"
value="Add Row"
/>
</td>
</tr>
</table>
Notice in my add_row function, when populating the row, I append a delete button tag and in it, pass the method delete_row. Clicking on this delete button should fire the method as shown below:
in my methods:
delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
},
But the method is not being triggered from the delete_row function. I've confirmed that the rows are working well since my button for adding that row the add_row function fires. So my thinking is since I call the delete_row function from a dynamically created, there's perhaps something extra that I need to pass to my code to trigger this method?
<html>
<body>
<h1>RECEIPT</h1>
<datalist id="codes">
<?php
require_once('../../../mysqli_connect.php');
$query = "SELECT DISTINCT itemcode FROM itemcost";
$response = #mysqli_query($dbc,$query);
while($row = mysqli_fetch_array($response)){
echo '<option value="' . $row['itemcode'] . '">';
}
?>
</datalist>
<form action="receipt.php" method="POST">
<table cellspacing="10" id="tbl">
<thead>
<td>ITEM CODE:</td>
<td>ITEM NAME: </td>
<td>QUANTITY OF ITEM:</td>
</thead>
<tbody>
<tr>
<td><input type="text" list="codes" name="Item_Code1" id="setter" size="5" /></td>
<td><input type="text" name="Item_Name1" id="receiver" size="10" /></td>
<td><input type="text" name="Quantity_In1" size="5" /></td>
</tr>
</tbody>
</table>
<br>
<br>
<input type="number" name="rows" id="addrows" />
<button type="button" id="btn">Add More</button>
<input type="submit" name="submitted" value="Enter" />
<input type="text" name="sendtotalrows" id="totalrows" style="visibility:hidden"/>
</form>
<script src="jquery.js"></script>
<script>
$(function(){
window.rowcompare = 2;
window.previousrownumber = 1;
$('#setter').change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
var selectedItemCode = $('#setter').val();
$('#receiver').val(itemcodename[selectedItemCode]);});});
$('#btn').on('click', function(){
var rownumber = $('#addrows').val();
rownumber = parseInt(rownumber) + window.previousrownumber;
while( rownumber >= rowcompare){
$('#tbl').find('tbody').append("<tr><td><input type=\"text\" list=\"codes\" name=\"Item_Code" + rowcompare +"\" id=\"setter" + rowcompare +"\" size=\"5\" /></td><td><input type=\"text\" name=\"Item_Name" + rowcompare +"\" id=\"receiver" + rowcompare +"\" size=\"10\" /></td><td><input type=\"text\" name=\"Quantity_In" + rowcompare +"\" size=\"5\" /></td></tr>");
$("#setter" + rowcompare).change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
var selectedItemCode = $("#setter" + rowcompare).val();
$("#receiver" + rowcompare).val(itemcodename[selectedItemCode]);});});
rowcompare++;
}
previousrownumber = rownumber;
$('#totalrows').val(previousrownumber);
});
});
</script>
</body>
</html>
My problem lies in this part of the code inside the while loop where I try to concatenate a variable to the Selector.
getitemcode.php just returns a key-value pair
$("#setter" + rowcompare).change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
var selectedItemCode = $("#setter" + rowcompare).val();
$("#receiver" + rowcompare).val(itemcodename[selectedItemCode]);
});
});
As the title says, my event won't trigger. I've seen similar questions asked and below are the answers I've tried:
var IcodeID = 'setter' + toString(rowcompare)
var InameID = 'receiver' + toString(rowcompare)
$("#" + IcodeID ).change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
var selectedItemCode = $("#" + IcodeID ).val();
$("#" + InameID ).val(itemcodename[selectedItemCode]);
});
});
parseInt(rowcompare);
$("#setter" + ${rowcompare}).change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
var selectedItemCode = $("#setter" + ${rowcompare}).val();
$("#receiver" + ${rowcompare}).val(itemcodename[selectedItemCode]);
});
});
parseInt(rowcompare);
$("#setter" + rowcompare).change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
var selectedItemCode = $("#setter" + rowcompare).val();
$("#receiver" + rowcompare).val(itemcodename[selectedItemCode]);
});
});
But the thing is when I try this:
$("#setter" + 2).change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
var selectedItemCode = $("#setter" + 2).val();
$("#receiver" + 2).val(itemcodename[selectedItemCode]);
});
});
It works. Any help would be appreciated.
I got the solution from this link:
Passing variable to :eq jquery selector in a while loop
You need to wrap the Jquery code that uses the incremented variable inside this:
(function(rowcompare){ Jquery Code })(rowcompare);
Like so:
(function(rowcompare){
$(".code-input" + rowcompare).change(function(){ $.getJSON('getitemcodename.php', function(itemcodenamestocks) {
var selectedItemCode = $(".code-input" + rowcompare).val();
$(".code-output" + rowcompare).val(itemcodenamestocks[0][selectedItemCode]);
$(".stocks-output" + rowcompare).val(itemcodenamestocks[1][selectedItemCode]);
});
});
})(rowcompare);
And it works.
I am appending a row on a given "id" after entering the input field but it's not appending.
function myfunction() {
var obj = "<tr><td>" + document.getElementById("name").value + "</td><td>" + document.getElementById("num").value + "</td><td>" + document.getElementById("address").value + "</td></tr>";
document.getElementById("table").innerHTML = obj;
}
<table>
<tr>
<td>Name: <input type="text" id="name"></td>
<td>Age:<input type="number" id="num"></td>
<td>Address:<input type="text" id="address"></td>
<td><input type="button" onclick="myfunction()" value="click on me"></td>
</tr>
<tbody id="table">
</tbody>
</table>
EDIT : you have several typo:
You write "innnnerHtml" (3n) instead of "innerHtml"
By writing innerHtml = obj you replace all html inside the selected div (the table in your case) you must use "+="
You use innerHtmlproperty instead of appendfunction.
function myfunction(){
var obj = "<tr><td>" + document.getElementById("name").value + "</td><td>" + document.getElementById("num").value + "</td><td>" + document.getElementById("address").value + "</td></tr>";
document.getElementById("table").innerHTML += obj;
}
// an other way to do it
function myfunction2() {
var line = document.createElement("tr");
var td1 = document.createElement("td");
td1.append(document.getElementById("name").value);
var td2 = document.createElement("td");
td2.append(document.getElementById("num").value);
var td3 = document.createElement("td");
td3.append(document.getElementById("address").value);
line.append(td1);
line.append(td2);
line.append(td3);
document.getElementById("table").append(line)
}
<table>
<tr>
<td>Name: <input type="text" id="name"></td>
<td>Age:<input type="number" id="num"></td>
<td>Address:<input type="text" id="address"></td>
<td><input type="button" onclick="myfunction()" value="click on me"></td>
<td><input type="button" onclick="myfunction2()" value="other way"></td>
</tr>
<tbody id="table">
</tbody>
</table>
It's better to call appendChild instead of innerHTML.
Using appendChild adds a new DOM element to the end of the parent node, while innerHTML takes the existing DOM content of the parent node, work with it as string, and overwrite the existing elements of the parent node with DOM generated elements from that string.
But, in Javascript we have a couple of functions like insertRow that helps you even more. See the example:
function myfunction() {
var name = document.getElementById("name").value,
num = document.getElementById("num").value,
address = document.getElementById("address").value;
var tbody = document.getElementById("table");
addRow(tbody, name, num, address);
}
function addRow(tbody, name, num, address){
var row = tbody.insertRow();
addCell(row, name, 0);
addCell(row, num, 1);
addCell(row, address, 2);
}
function addCell(row, cellText, index){
var cell = row.insertCell(index);
cell.appendChild(document.createTextNode(cellText));
}
<table>
<tr>
<td>Name: <input type="text" id="name"></td>
<td>Age:<input type="number" id="num"></td>
<td>Address:<input type="text" id="address"></td>
<td><input type="button" onclick="myfunction()" value="click on me"></td>
</tr>
<tbody id="table">
</tbody>
</table>
try this code
html code
<table id="table">
<tr>
<td>Name: <input type="text" id="name"></td>
<td>Age:<input type="number" id="num"></td>
<td>Address:<input type="text" id="address"></td>
<td><input type="button" onclick="myfunction()" value="click on me"></td>
</tr>
<tbody >
</tbody>
</table>
javascript function
function myfunction() {
var obj = "<tr><td>Name:" + document.getElementById("name").value + "</td><td>Age: " + document.getElementById("num").value + "</td><td>Address:" + document.getElementById("address").value + "</td></tr>";
$('#table tbody').append(obj);
// document.getElementById("table").innnerHTML = obj;
}
Try this code . It will helps you.
function myfunction() {
var obj = "<tr><td>" + document.getElementById("name").value + "</td><td>" +
document.getElementById("num").value + "</td><td>" +
document.getElementById("address").value + "</td></tr>";
table.innerHTML = obj;
}
Use this and watch out for the following:
Your table structure.
Typo in innerHTML
Your script was meant to overwrite not append.
function myfunction() {
var obj = "<tr><td>" + document.getElementById("name").value + "</td><td>" + document.getElementById("num").value + "</td><td>" + document.getElementById("address").value + "</td></tr>";
document.getElementById("table").innerHTML += obj;
console.log(obj);
}
<table>
<tbody id="table">
<tr>
<td>Name: <input type="text" id="name"></td>
<td>Age:<input type="number" id="num"></td>
<td>Address:<input type="text" id="address"></td>
<td><input type="button" onclick="myfunction()" value="click on me"></td>
</tr>
</tbody>
</table>
Using JavaScript to dynamically add/dete/edit rows. The script works fine but the save and delete button appear one below the other when edit button is clicked. This only seems to happen in IE/Edge and works fine in Chrome. Not sure why...?
Javascript
function aedit_row(no)
{
document.getElementById("aedit_button"+no).style.display="none";
document.getElementById("asave_button"+no).style.display="table-cell";
var acode=document.getElementById("acode_row"+no);
var aname=document.getElementById("aname_row"+no);
var acode_data=acode.innerHTML;
var aname_data=aname.innerHTML;
acode.innerHTML="<input type='text' id='acode_text"+no+"' value='"+acode_data+"'>";
aname.innerHTML="<input type='text' id='aname_text"+no+"' value='"+aname_data+"'>";
}
function asave_row(no)
{
var acode_val=document.getElementById("acode_text"+no).value;
var aname_val=document.getElementById("aname_text"+no).value;
document.getElementById("acode_row"+no).innerHTML=acode_val;
document.getElementById("aname_row"+no).innerHTML=aname_val;
document.getElementById("aedit_button"+no).style.display="table-cell";
document.getElementById("asave_button"+no).style.display="none";
}
function adelete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function aadd_row()
{
var new_acode=document.getElementById("new_acode").value;
var new_aname=document.getElementById("new_aname").value;
var table=document.getElementById("data_table1");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='acode_row"+table_len+"'>"+new_acode+"</td><td id='aname_row"+table_len+"'>"+new_aname+"</td><td><input type='button' id='aedit_button"+table_len+"' value='Edit' class='edit' onclick='aedit_row("+table_len+")'> <input type='button' id='asave_button"+table_len+"' value='Save' class='save' onclick='asave_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='adelete_row("+table_len+")'></td></tr>";
document.getElementById("new_acode").value="";
document.getElementById("new_aname").value="";
}
HTML code
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>acad_code</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="css/pages.css">
<script type="text/javascript" src="js/acad_code.js"></script>
</head>
<body>
<br>
<div id="wrapper1">
<table id="data_table1" style="margin-left:100px ;border-radius:10px"; border="1" cellspacing= "2" cellpadding="0">
<tbody>
<tr>
<th>Academic Code</th>
<th>Description</th>
</tr>
<tr>
<td><input type="text" id="new_acode"></td>
<td><input type="text" id="new_aname"></td>
<td><input type="button" class="add" onclick="aadd_row();" value="Add Row"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Try setting a specific width for the button td.
function aedit_row(no) {
document.getElementById("aedit_button" + no).style.display = "none";
document.getElementById("asave_button" + no).style.display = "table-cell";
var acode = document.getElementById("acode_row" + no);
var aname = document.getElementById("aname_row" + no);
var acode_data = acode.innerHTML;
var aname_data = aname.innerHTML;
acode.innerHTML = "<input type='text' id='acode_text" + no + "' value='" + acode_data + "'>";
aname.innerHTML = "<input type='text' id='aname_text" + no + "' value='" + aname_data + "'>";
}
function asave_row(no) {
var acode_val = document.getElementById("acode_text" + no).value;
var aname_val = document.getElementById("aname_text" + no).value;
document.getElementById("acode_row" + no).innerHTML = acode_val;
document.getElementById("aname_row" + no).innerHTML = aname_val;
document.getElementById("aedit_button" + no).style.display = "table-cell";
document.getElementById("asave_button" + no).style.display = "none";
}
function adelete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function aadd_row() {
var new_acode = document.getElementById("new_acode").value;
var new_aname = document.getElementById("new_aname").value;
var table = document.getElementById("data_table1");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='acode_row" + table_len + "'>" + new_acode + "</td><td id='aname_row" + table_len + "'>" + new_aname + "</td><td><input type='button' id='aedit_button" + table_len + "' value='Edit' class='edit' onclick='aedit_row(" + table_len + ")'> <input type='button' id='asave_button" + table_len + "' value='Save' class='save' onclick='asave_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='adelete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_acode").value = "";
document.getElementById("new_aname").value = "";
}
<div id="wrapper1">
<table id="data_table1" style="margin-left:100px ;border-radius:10px" ; border="1" cellspacing="2" cellpadding="0">
<tbody>
<tr>
<th>Academic Code</th>
<th>Description</th>
</tr>
<tr>
<td><input type="text" id="new_acode"></td>
<td><input type="text" id="new_aname"></td>
<td style="width: 200px;"><input type="button" class="add" onclick="aadd_row();" value="Add Row"></td>
</tr>
</tbody>
</table>
</div>
I am using JavaScript to add/delete/edit rows. The row includes 4 textbox and one selection box. When I click on edit I am able to change the value of textbox but for selection box as the option dont appear I am not able to do it and also even on clicking Save the value of checkbox is not stored correctly(it stores the value not the description). Can you please help me finding the error in script ?
function edit_row(no) {
document.getElementById("edit_button" + no).style.display = "none";
document.getElementById("save_button" + no).style.display = "block";
var ffcode = document.getElementById("ffcode_row" + no);
var ffname = document.getElementById("ffname_row" + no);
var fftype = document.getElementById("fftype_row" + no);
var ffdate = document.getElementById("ffdate_row" + no);
var ffcode_data = ffcode.innerHTML;
var ffname_data = ffname.innerHTML;
var fftype_data = fftype.innerHTML;
var ffdate_data = ffdate.innerHTML;
ffcode.innerHTML = "<input type='text' id='ffcode_text" + no + "' value='" + ffcode_data + "'>";
ffname.innerHTML = "<input type='text' id='ffname_text" + no + "' value='" + ffname_data + "'>";
fftype.innerHTML = "<input type='select' id='fftype_text" + no + "' value='" + fftype_data + "'>";
ffdate.innerHTML = "<input type='date' id='ffdate_text" + no + "' value='" + ffdate_data + "'>";
}
function save_row(no) {
var ffcode_val = document.getElementById("ffcode_text" + no).value;
var ffname_val = document.getElementById("ffname_text" + no).value;
var fftype_val = document.getElementById("fftype_text" + no).value;
var ffdate_val = document.getElementById("ffdate_text" + no).value;
document.getElementById("ffcode_row" + no).innerHTML = ffcode_val;
document.getElementById("ffname_row" + no).innerHTML = ffname_val;
document.getElementById("fftype_row" + no).innerHTML = fftype_val;
document.getElementById("ffdate_row" + no).innerHTML = ffdate_val;
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
}
function delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_ffcode = document.getElementById("new_ffcode").value;
var new_ffname = document.getElementById("new_ffname").value;
var new_fftype = document.getElementById("new_fftype").value;
var new_ffdate = document.getElementById("new_ffdate").value;
var table = document.getElementById("data_table");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='ffcode_row" + table_len + "'>" + new_ffcode + "</td><td id='ffname_row" + table_len + "'>" + new_ffname + "</td><td id='fftype_row" + table_len + "'>" + new_fftype + "</td><td id='ffdate_row" + table_len + "'>" + new_ffdate + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_ffcode").value = "";
document.getElementById("new_ffname").value = "";
document.getElementById("new_fftype").value = "";
document.getElementById("new_ffdate").value = "";
}
<h2>Fee Code Maintenance</h2>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Fee Type</th>
<th>Due Date</th>
</tr>
<tr id="row1">
<td id="ffcode_row1">AF</td>
<td id="ffname_row1">Annual Fees</td>
<td id="fftype_row1">Fixed Fee</td>
<td id="ffdate_row1">2016-12-21</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="ffcode_row2">MF</td>
<td id="ffname_row2">Medical Fees</td>
<td id="fftype_row2">Fixed Fee</td>
<td id="ffdate_row2">2016-12-11</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="ffcode_row3">TF</td>
<td id="ffname_row3">Tution Fees</td>
<td id="fftype_row3">Fixed Fee</td>
<td id="ffdate_row3">2016-11-11</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr>
<td><input type="text" id="new_ffcode"></td>
<td><input type="text" id="new_ffname"></td>
<td>
<select name="fftype" id="new_fftype">
<option value="">-select-</option>
<option value="FF">Fixed Fee</option>
<option value="RF">Refundable Fee</option>
<option value="PF">Penalty Fee</option>
<option value="DF">Discounts</option>
</select>
</td>
<td><input type="date" id="new_ffdate"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
your function edit_row() does not append the appropriate select dropdown to your table-cell. Try to change these Lines in edit_row:
fftype.innerHTML="<select id='fftype_text"+no+"' value='"+fftype_data+"'>
<option value>-select-</option>
<option value='FF'>Fixed Fee</option>
<option value='RF'>Refundable Fee</option>
<option value='PF'>Penalty Fee</option>
<option value='DF'>Discounts</option>
</select>";
and for the save_row():
var e =document.getElementById("fftype_text"+no);
var fftype_val=e.options[e.selectedIndex].text;
Here is a Code Snipet