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
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 have this javascript which will allow a user to hit the edit button on a table and edit the content. They can then press save to save the new input. I want to do 4 things which I don't know how to do.
I want to remove the border from the input box after the edit button has been pressed and then the save button is pressed.
Once the save button is pressed I want the Edit, Save, and Delete Button to go back to the same format they were at before pressing Edit.
I want the select picker to be read only when the edit button has not been clicked.
Instead of Having the words "Edit","Save" and "Delete" I want to use font awesome icons.
I have uploaded the JS, CSS, and HTML code here.
function edit_row(no) {
document.getElementById("edit_button" + no).style.display = "none";
document.getElementById("save_button" + no).style.display = "block";
var chore = document.getElementById("chore_row" + no);
var duration = document.getElementById("duration_row" + no);
var chore_data = chore.innerHTML;
var duration_data = duration.innerHTML;
chore.innerHTML = "<input type='text' id='chore_text" + no + "' value='" + chore_data + "'>";
duration.innerHTML = "<input type='text' id='duration_text" + no + "' value='" + duration_data + "'>";
}
function save_row(no) {
var chore_val = document.getElementById("chore_text" + no).value;
var duration_val = document.getElementById("duration_text" + no).value;
var rotation_val = document.getElementById("rotation_text" + no).value;
document.getElementById("chore_row" + no).innerHTML = chore_val;
document.getElementById("duration_row" + no).innerHTML = duration_val;
document.getElementById("rotation_row" + no).innerHTML = rotation_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_chore = document.getElementById("new_chore").value;
var new_duration = document.getElementById("new_duration").value;
var table = document.getElementById("ChoreTbl");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "" +
"<tr id='row" + table_len + "'>" +
" <td id='chore_row" + table_len + "'>" + new_chore + "</td>" +
" <td id='duration_row" + table_len + "'>" + new_duration + "</td>" +
" <td id='rotation_row'" + table_len + "'>" +
"<select class='selectpicker1'>" +
"<option>Daily</option>" +
"<option>Weekly</option>" +
"<option>Monthly</option>" +
"</select>" +
"</td>" +
" <td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit pageButton' onclick='edit_row(" + table_len + ")'> " +
" <input type='button' id='save_button" + table_len + "' value='Save' class='save pageButton' onclick='save_row(" + table_len + ")'> " +
" <input type='button' value='Delete' class='delete pageButton' onclick='delete_row(" + table_len + ")'>" +
" </td>" +
"</tr>";
document.getElementById("new_chore").value = "";
document.getElementById("new_duration").value = "";
document.getElementById("new_rotation").value = "";
}
input {
background-color: #fff1d9;
border: solid;
border-color: #fea680;
}
.pageButton {
border: none;
}
<section class="Chores">
<table id="ChoreTbl" class="choreHead">
<h1><b>Chore Setting</b></h1>
<thead>
<tr class="header" style="color:#008f95;">
<td id="name_row2"><b>Chore</b></td>
<td id="country_row2"><b>Time Frame to Complete</b></td>
<td id="age_row2"><b>Rotation Cycle</b></td>
<td></td>
</thead>
<tbody>
<tr id="row1">
<td id="chore_row1">Wash Floor</td>
<td id="duration_row1">3 days</td>
<td id="rotation_row1">
<select class="selectpicker1">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit pageButton" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save pageButton" onclick="save_row('1')">
<input type="button" value="Delete" class="delete pageButton" onclick="delete_row('1')">
</td>
</tr>
<tr>
<td><input type="text" id="new_chore"></td>
<td><input type="text" id="new_duration"></td>
<td>
<select class="selectpicker1">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</td>
<td><input type="button" class="add pageButton" onclick="add_row();" value="Add Chore"></td>
</tr>
</tbody>
</table>
Here you go you can use the following.
$(document).ready(function() {
$("select").attr('disabled', true);
});
function edit_row(no) {
$("select").attr("disabled", false);
$("edit_button" + no).show();
$("save_button" + no).show();
//document.getElementById("edit_button"+no).style.display="none";
//document.getElementById("save_button"+no).style.display="block";
var chore = document.getElementById("chore_row" + no);
var duration = document.getElementById("duration_row" + no);
var chore_data = chore.innerHTML;
var duration_data = duration.innerHTML;
chore.innerHTML = "<input type='text' id='chore_text" + no + "' value='" + chore_data + "'>";
duration.innerHTML = "<input type='text' id='duration_text" + no + "' value='" + duration_data + "'>";
}
function save_row(no) {
$("input[type='text']").css({
border: 0
});
$("#edit_button" + no).show();
var chore_val = $("chore_text" + no).value;
var duration_val = $("#duration_text" + no).val();
var rotation_val = $("#rotation_text" + no).val();
$("#chore_row" + no).html(chore_val);
$("#duration_row" + no).html(duration_val);
$("#rotation_row" + no).html(rotation_val);
$("#edit_button" + no).show();
$("#save_button" + no).show();
}
function delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_chore = document.getElementById("new_chore").value;
var new_duration = document.getElementById("new_duration").value;
var table = document.getElementById("ChoreTbl");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "" +
"<tr id='row" + table_len + "'>" +
" <td id='chore_row" + table_len + "'>" + new_chore + "</td>" +
" <td id='duration_row" + table_len + "'>" + new_duration + "</td>" +
" <td id='rotation_row'" + table_len + "'>" +
"<select class='selectpicker1'>" +
"<option>Daily</option>" +
"<option>Weekly</option>" +
"<option>Monthly</option>" +
"</select>" +
"</td>" +
" <td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit pageButton' onclick='edit_row(" + table_len + ")'> " +
" <input type='button' id='save_button" + table_len + "' value='Save' class='save pageButton' onclick='save_row(" + table_len + ")'> " +
" <input type='button' value='Delete' class='delete pageButton' onclick='delete_row(" + table_len + ")'>" +
" </td>" +
"</tr>";
document.getElementById("new_chore").value = "";
document.getElementById("new_duration").value = "";
document.getElementById("new_rotation").value = "";
}
There are several errors in your code, so i revised it but the chore_text name input is not defined and i cant figure out why are you using it so i commented out the lines involved with that input, but the things you addressed are here you can see, just one thing I could not get your 2nd point the buttons that you want to switch back to the previous layout. They never change or maybe I am not getting what you said, I have commented out the portions for you to fix that are buggy, but the problem you are concerned I have added the solution.
$(document).ready(function() {
$("select").attr('disabled', true);
});
function edit_row(no) {
$("#selectpicker" + no).attr("disabled", false);
$("#save_button" + no).show();
var chore = $("#chore_row" + no);
var duration = $("#duration_row" + no);
var chore_data = chore.html();
var duration_data = duration.html();
chore.html("<input type='text' id='chore_text" + no + "' value='" + chore_data + "'>");
duration.html("<input type='text' id='duration_text" + no + "' value='" + duration_data + "'>");
$("input[type='text']").css({
border: 0
});
}
function save_row(no) {
var chore_val = $("#chore_text" + no).val();
var duration_val = $("#duration_text" + no).val();
var rotation_val = $("#rotation_text" + no).val();
$("#chore_row" + no).html(chore_val);
$("#duration_row" + no).html(duration_val);
$("#rotation_row" + no).html(rotation_val);
$("#edit_button" + no).show();
//$("#save_button" + no).hide();
$("#selectpicker" + no).attr("disabled", true);
}
function delete_row(no) {
// $("#row" + no + "").clone().wrap('<p>').parent().html('');
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_chore = $("#new_chore").val();
var new_duration = $("#new_duration").val();
var table = document.getElementById("ChoreTbl");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "" +
"<tr id='row" + table_len + "'>" +
" <td id='chore_row" + table_len + "'>" + new_chore + "</td>" +
" <td id='duration_row" + table_len + "'>" + new_duration + "</td>" +
" <td id='rotation_row" + table_len + "'>" +
"<select disabled class='selectpicker1' id='selectpicker" + table_len + "'>" +
"<option>Daily</option>" +
"<option>Weekly</option>" +
"<option>Monthly</option>" +
"</select>" +
"</td>" +
" <td><i id='edit_button" + table_len + "' class='fa fa-pencil' onclick='edit_row(" + table_len + ")'></i> " +
" <i id='save_button" + table_len + "' class='fa fa-floppy-o' onclick='save_row(" + table_len + ")'></i> " +
" <i class='fa fa-trash' onclick='delete_row(" + table_len + ")'></i>" +
" </td>" +
"</tr>";
$("#new_chore").val();
$("#new_duration").val();
//document.getElementById("new_rotation").value = "";
}
input {
background-color: #fff1d9;
border: solid;
border-color: #fea680;
}
.pageButton {
border: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="Chores">
<table id="ChoreTbl" class="choreHead">
<h1><b>Chore Setting</b></h1>
<thead>
<tr class="header" style="color:#008f95;">
<td id="name_row2"><b>Chore</b></td>
<td id="country_row2"><b>Time Frame to Complete</b></td>
<td id="age_row2"><b>Rotation Cycle</b></td>
<td></td>
</thead>
<tbody>
<tr id="row1">
<td id="chore_row1">Wash Floor</td>
<td id="duration_row1">3 days</td>
<td id="rotation_row1">
<select class="selectpicker1" id="selectpicker1">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</td>
<td>
<i id="edit_button1" class="fa fa-pencil" onclick="edit_row('1')"></i>
<i id="save_button1" class="fa fa-floppy-o" onclick="save_row('1')"></i>
<i class="fa fa-trash" onclick="delete_row('1')"></i>
</td>
</tr>
<tr>
<td><input type="text" id="new_chore"></td>
<td><input type="text" id="new_duration"></td>
<td>
<select class="selectpicker1">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</td>
<td><input type="button" class="add pageButton" onclick="add_row();" value="Add Chore"></td>
</tr>
</tbody>
</table>
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>
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>