creating new row on button click

creating new row on button click - javascript

I have an html table with one or more row. I have 4 columns in my table in that one is a checkbox. Two buttons are there "AddRowAbove" and "AddRowBelow". When a particular checkbox is checked and click a button a new row should be added based on the button name. My code looks like this not sure how to achieve the result.
function addNewRowAbove() {
alert("actioned !!!");
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) - 1;
alert(rowNumber + " - " + rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
$('#maintable tbody').append(newRow);
}
function addNewRowBelow() {
alert("actioned !!!");
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1;
alert(rowNumber + " - " + rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
$('#maintable tbody').append(newRow);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr>
<td><input type="checkbox" name="radio" id="radio"></input><input type="hidden" id="rowIndex" value="1" /></td>
<td><input type="text" name="empid"></input>
</td>
<td><input type="text" name="empfname"></input>
</td>
<td><input type="text" name="emplname"></input>
</td>
</tr>
<tr>
<td><input type="checkbox" name="radio1" id="radio1"></input><input type="hidden" id="rowIndex" value="2" /></td>
<td><input type="text" name="empid1"></input>
</td>
<td><input type="text" name="empfname1"></input>
</td>
<td><input type="text" name="emplname1"></input>
</td>
</tr>
<tr>
<td></td>
<td> <input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()"></td>
<td> <input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()"></td>
<td></td>
</tr>
</table>
</form>

I added var selectedRow = $( "input:checked" ).parent().parent(); to both of your functions to find the parent row of the checked element, and then used either $(newRow).insertBefore(selectedRow); or $(newRow).insertAfter(selectedRow); depending on the button clicked.
Hopefully this helps.
UPDATE:
In response to comments requesting that the id's of the rows are kept in order even after adding rows dynamically, I've added a SortRowIDs() function which is called at the end of both addNewRowAbove() and addNewRowBelow().
This function grabs all of the <input type="checkbox"/> tags in the <table id="maintable"></table> and then iterates through them using jQuery's .each() method. Each checkbox's parent row is then assigned an Id based on its order in the table. I also added a few comments in the code so that it is easier to follow.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function SortRowIDs() {
// The code below finds all the <tr> elements in the table WITH checkboxes in them.
// This way, we skip the first row containing column headers and the last row containing buttons
// We use the jQuery .each() method to iterate through jQuery-object arrays
$('#maintable').find('tr > td > input[type="checkbox"]').each(function(index) {
// We assign the parent row of the current checkbox to the variable 'currentRow'
let currentRow = $(this).parent().parent();
// Here we give the current row an id based on its position in the table
$(currentRow).attr('id', 'id_' + (index + 1));
// Prints the id's of each row
console.log('Current row\'s id: ' + $(currentRow).attr('id'));
});
// This prints the id attribute of the selected checkbox's parent row, to show that
// the Id's were successfully assigned by the SortRowIDs() function
console.log('');
console.log('Selected row\'s id: ' + $( "input:checked" ).parent().parent().attr('id'));
}
function addNewRowAbove() {
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) - 1;
var newRow = $('<tr/>');
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '" /><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"/></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
var selectedRow = $( "input:checked" ).parent().parent();
$(newRow).insertBefore(selectedRow);
SortRowIDs();
}
function addNewRowBelow() {
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1;
var newRow = $('<tr/>');
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
var selectedRow = $( "input:checked" ).parent().parent();
$(newRow).insertAfter(selectedRow);
SortRowIDs();
}
</script>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr>
<td>
<input type="checkbox" name="radio" id="radio"/>
<input type="hidden" id="rowIndex" value="1" />
</td>
<td>
<input type="text" name="empid" />
</td>
<td>
<input type="text" name="empfname" />
</td>
<td>
<input type="text" name="emplname" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="radio1" id="radio1" />
<input type="hidden" id="rowIndex" value="2" />
</td>
<td>
<input type="text" name="empid1" />
</td>
<td>
<input type="text" name="empfname1" />
</td>
<td>
<input type="text" name="emplname1" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()">
</td>
<td>
<input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()">
</td>
<td></td>
</tr>
</table>
</form>

You can use insertBefore to append new row above buttons (give id="button" to row content buttons). Try with below solution:
function addNewRowAbove(){
alert("actioned !!!");
var rowNumber=document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber)- 1 ;
alert(rowNumber+" - "+rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio'+rowNumberNew+'"></input><input type="hidden" id="rowIndex'+rowNumberNew+'" value="'+rowNumberNew+'"/></td><td><input type="text" name="empid" id="empid'+rowNumberNew+'"></input></td><td><input type="text" name="empfname" id="empfname'+rowNumberNew+'"></input></td><td><input type="text" name="emplname" id="emplname'+rowNumberNew+'"></input></td>');
newRow.insertBefore('#button');
}
function addNewRowBelow(){
alert("actioned !!!");
var rowNumber=document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1 ;
alert(rowNumber+" - "+rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio'+rowNumberNew+'"></input><input type="hidden" id="rowIndex'+rowNumberNew+'" value="'+rowNumberNew+'"/></td><td><input type="text" name="empid" id="empid'+rowNumberNew+'"></input></td><td><input type="text" name="empfname" id="empfname'+rowNumberNew+'"></input></td><td><input type="text" name="emplname" id="emplname'+rowNumberNew+'"></input></td>');
$('#maintable tbody').append(newRow);
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr><td><input type="checkbox" name="radio" id="radio"></input><input type="hidden" id="rowIndex" value="1"/></td>
<td><input type="text" name="empid"></input></td>
<td><input type="text" name="empfname"></input></td>
<td><input type="text" name="emplname"></input></td>
</tr>
<tr><td><input type="checkbox" name="radio1" id="radio1"></input><input type="hidden" id="rowIndex" value="2"/></td>
<td><input type="text" name="empid1"></input></td>
<td><input type="text" name="empfname1"></input></td>
<td><input type="text" name="emplname1"></input></td>
</tr>
<tr id="button"><td></td><td> <input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()"></td><td> <input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()"></td><td></td></tr>
</table>
</form>
</body>
</html>

Related

how to remove autofocus attrib

i want to get more input field by onfoucus event
function new_option() {
var tot_opt = parseInt($('#tot_opt').val());
$('#otp' + tot_opt).unbind('onfocus', "new_option");
tot_opt++;
$('#tot_opt').val(tot_opt);
var opt = "<br><input onfocus='new_option()' id='otp" + tot_opt + "' placeholder='Options" + tot_opt + "' type='text' name='options' class='form-control'>"
$('#new_opt').append(opt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th colspan="2">Create Voter Pool</th>
</tr>
<tr>
<th>Question</th>
<th><textarea name="question" class="form-control">
</textarea></th>
</tr>
<tr>
<th>Options</th>
<td>
<input type="text" placeholder="Options1" id="opt1" class="form-control" name="options"><br>
<input type="text" onfocus="new_option()" id="opt2" placeholder="Options2" class="form-control" name="options">
<span id="new_opt"></span>
<input type="hidden" id="tot_opt" value="2">
</td>
</tr>
</table>
i want onfocus attribute only on last input and want to remove onfoucs attribute from remain

Before you add the new input you can remove the onfocus attribute form all the other inputs.
The below will query for inputs with the onfocus attribute and loop through each element removing the attribute. Then I append the last input with the onfocus attribute. This ensures only the last input will be able to add another input.
function new_option() {
var tot_opt = parseInt($('#tot_opt').val());
$('#otp' + tot_opt).unbind('onfocus', "new_option");
tot_opt++;
$('#tot_opt').val(tot_opt);
var opt = "<br><input onfocus='new_option()' id='otp" + tot_opt + "' placeholder='Options" + tot_opt + "' type='text' name='options' class='form-control'>"
// remove onfocus from all previous inputs (that have the onfocus attribute)
document.querySelectorAll("input[onfocus]").forEach(function(element, index) {
element.removeAttribute("onfocus");
});
$('#new_opt').append(opt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th colspan="2">Create Voter Pool</th>
</tr>
<tr>
<th>Question</th>
<th><textarea name="question" class="form-control"></textarea></th>
</tr>
<tr>
<th>Options</th>
<td>
<input type="text" placeholder="Options1" id="opt1" class="form-control" name="options"> <br>
<input type="text" onfocus="new_option()" id="opt2" placeholder="Options2" class="form-control" name="options">
<span id="new_opt"></span>
<input type="hidden" id="tot_opt" value="2">
</td>
</tr>
</table>

Add , Update , delete and display data in table with jQuery [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Add Data Dynamically in the table and Edit then checkbox value is not updating this is problem.
Here in jsFiddle
Code Here in JSFiddle

Please review working snippet.
var cnt = 0;
var count = 1;
function BindData(count) {
$("#s_name").val($("#name_" + count).html());
$("#product_names").val($("#pro_" + count).html());
$("#emailid").val($("#email_" + count).html());
$("#mobileno").val($("#mobi_" + count).html());
$('input[name="are"]:checked').val($("#ur_" + count).html());
$("#price").val($("#pric_" + count).html());
$("#t_pro").val($("#totalPro_" + count).html());
$("#total_price").val($("#totalPri_" + count).html());
var checkedHTML = $("#productWith_" + count).html();
var arrCheckedValues = checkedHTML.split(",");
$('.ads_Checkbox').each(function() {
var values = $(this).val();
if (arrCheckedValues.indexOf(values) > -1) {
$(this).prop("checked", true);
}
});
$("#order").attr("value", "Update Order");
$("#order").attr("onclick", "EditData(" + count + ")");
}
function EditData(count) {
$("#name_" + count).html($("#s_name").val());
$("#pro_" + count).html($("#product_names").val());
$("#email_" + count).html($("#emailid").val());
$("#mobi_" + count).html($("#mobileno").val());
$("#ur_" + count).html($('input[name="are"]:checked').val());
$("#pric_" + count).html($("#price").val());
$("#totalPro_" + count).html($("#t_pro").val());
$("#totalPri_" + count).html($("#total_price").val());
var chk = '';
var arrCheckedValues = [];
$('.ads_Checkbox:checked').each(function() {
var values = $(this).val();
arrCheckedValues.push(values);
});
chk = arrCheckedValues.join(",");
$("#productWith_" + count).html(chk);
$("#order").attr("value", "Order");
$("#order").attr("onclick", "AddData()");
//AddData(); /// ADD NEW DATA
$("#s_name").val("");
//$("#product_names").val("");
$("#emailid").val("");
$("#mobileno").val("");
//$('input[name="are"]').prop("");
$("#price").val("");
$("#t_pro").val("");
$("#total_price").val("");
// Clear all CheckBoxes
$('input[type=checkbox]').each(function() {
this.checked = false;
});
}
function AddData() {
var shop_name = $("#s_name").val();
var pro_name = $("#product_names").val();
var email = $("#emailid").val();
var mobi = $("#mobileno").val();
var ur = $('input[name="are"]:checked').val();
var pric = $("#price").val();
var total_pro = $("#t_pro").val();
var total_pri = $("#total_price").val();
var chk = '';
var arrCheckedValues = [];
$('.ads_Checkbox:checked').each(function() {
var values = $(this).val();
arrCheckedValues.push(values);
//chk += values;
});
chk = arrCheckedValues.join(",");
$("#mytab").append('<tr><td id="name_' + count + '">' + shop_name + '</td><td id="pro_' + count + '">' + pro_name +
'</td><td id="email_' + count + '">' + email + '</td><td id="mobi_' + count + '">' + mobi +
'</td><td id="ur_' + count + '">' + ur + '</td><td id="pric_' + count + '">' + pric + '</td><td id="totalPro_' + count + '">' + total_pro + '</td><td id="totalPri_' + count + '">' + total_pri + '</td><td id="productWith_' + count + '">' + chk + '</td><td><button type="button" class="delete">Delete</button></td><td><button type="button" id="edit" onclick="BindData(' + count + ');" >Edit</button></td></tr>');
cnt++;
count++;
$("#s_name").val("");
//$("#product_names").val("");
$("#emailid").val("");
$("#mobileno").val("");
//$('input[name="are"]').val("");
$("#price").val("");
$("#t_pro").val("");
$("#total_price").val("");
// Clear all CheckBoxes
$(".ads_Checkbox").prop("checked", false);
/*$('input[type=checkbox]').each(function()
{
this.checked = false;
});*/
if (cnt > 0) {
$("#dummy").hide();
}
}
$(document).ready(function() {
$("#price,#t_pro").blur(function() {
$('#total_price').val($('#price').val() * $('#t_pro').val());
});
$(document).on('click', '.delete', function() {
//When delete the record then clear all checkboxes
$('input[type=checkbox]').each(function() {
this.checked = false;
});
var par = $(this).parent().parent(); //tr
par.remove();
cnt--;
if (cnt == 0) {
$("#dummy").show();
}
});
});
* {
font-family: arial;
font-size: 13px;
}
.align-center {
text-align: center;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}
form div {
clear: left;
margin: 0;
padding: 0;
padding-top: 0.9em;
}
form div label {
float: left;
width: 20%;
font: bold 0.9em Arial, Helvetica, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table cellpadding="2" width="50%" align="center" cellspacing="2" id="myTable">
<tr>
<td colspan=2>
<center>
<font size=4>
<b>Product Detail Form</b>
</font>
</center>
</td>
</tr>
<tr>
<td>
<label for="s_name">Shop Name</label>
</td>
<td>
<input type="text" id="s_name" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="product_names">Product Name</label>
</td>
<td>
<select id="product_names" class="product_name">
<option value="-1" selected>select..</option>
<option value="pc">PC</option>
<option value="laptop">Laptop</option>
<option value="mobile_phone">Mobile Phone</option>
<option value="plasma_screen">Plasma Screen</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="emailid">EmailId</label>
</td>
<td>
<input type="text" id="emailid" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="mobileno">MobileNo</label>
</td>
<td>
<input type="text" id="mobileno" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="r1">What You Are</td>
<td>
<input type="radio" name="are" value="Buyer" id="r1" size="10" checked>
<label for="r1">Buyer</label>
<input type="radio" name="are" value="Seller" id="r2" size="10">
<label for="r2">Seller</label>
</td>
</tr>
<tr>
<td>
<label for="price">Price</label>
</td>
<td>
<input type="text" id="price" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="t_pro">Total Product</label>
</td>
<td>
<input type="text" id="t_pro" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="total_price">Total Price</label>
</td>
<td>
<input type="text" id="total_price" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="1">Product With:</td>
<td>
<input type="checkbox" name="chk1" id="chk1" class="ads_Checkbox" value="Box">Box
<br>
<input type="checkbox" name="chk2" id="chk2" class="ads_Checkbox" value="Bill">Bill
<br>
<input type="checkbox" name="chk3" id="chk3" class="ads_Checkbox" value="Bill-BOx">Bill-BOx
<br>
<input type="checkbox" name="chk4" id="chk4" class="ads_Checkbox" value="Only Product">Only Product
</td>
</tr>
<tr>
<td colspan="2" class="align-center">
<input type="reset">
<input type="button" id="order" value="Order" onclick="AddData()" />
</td>
</tr>
</table>
</form>
<table cellpadding="4" width="50%" align="center" cellspacing="4" id="mytab" border="1">
<tr>
<th>ShopNmae</th>
<th>Product Name</th>
<th>EmailId</th>
<th>MobileNo</th>
<th>What You Are</th>
<th>Price</th>
<th>Total Product</th>
<th>Total Price</th>
<th>Product With</th>
<th colspan="2">Action</th>
</tr>
<tr id="dummy">
<td colspan="11">No data</td>
</tr>
</table>

HTML, JavaScript - Radio Button Selection Doesn't Display In New Row

I have added add/edit/delete function for my table below. I managed to develop the add_row function in JavaScript. The text inputs seem to work when I click on the Add Row button but not the radio buttons. When I select either Yes/No and click on the Add Row button, the selection does not display at the new row created.
I will really appreciate if I could get some guidance in solving this problem.
function add_row() {
var new_name = document.getElementById("new_name").value;
var new_value = document.getElementById("new_value").value;
var new_yes = document.getElementById("new_yes").value;
var new_no = document.getElementById("new_no").value;
var table = document.getElementById("data_table");
var len = (table.rows.length) - 1;
var table_len = (document.querySelectorAll('.data_row').length) + 1;
var row = table.insertRow(len).outerHTML = '<tr class="data_row" id="row' + table_len + '">' +
'<td id="name_row' + table_len + '">' + new_name + '</td>' +
'<td id="qty' + table_len + '">' + new_value + '</td>' +
'<td><input type="radio" id="yes"' + table_len + '"checked></td>' +
'<td><input type="radio" id="no"' + table_len + '"></td>' +
'<td><input type="button" id="edit_button' + table_len + '" value="Edit" class="edit" onclick="edit_row(' + table_len + ')"> <input type="button" value="Delete" class="delete" onclick="delete_row(' + table_len + ')"></td>' +
"</tr>";
document.getElementById("new_name").value = "";
document.getElementById("new_value").value = "";
document.getElementById("new_yes").value = "";
document.getElementById("new_no").value = "";
}
<table style="width:80% table-layout:fixed" align="center">
<table class="table1" style="width:70%" align="center" id="data_table" cellspacing=2 cellspacing=5>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
<td></td>
</tr>
<tr class="data_row" id="row1">
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td id="name_row1">Initial</td>
<!--The input box in the 'Value' column is set as below-->
<td class="cent"><input type="number" value="<%=initial%>" align="center" name="Initial" id="qty1" maxlength="4" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td class="cent"><input type="radio" name="group1" value="Yes" id="yes('1')"></td>
<td class="cent"><input type="radio" name="group1" value="No" id="no('1')"></td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</label>
</tr>
<tr class="data_row" id="row2">
<label id="group2">
<td id="name_row2">Drop Test</td>
<td class="cent"><input type="number" value="<%=droptest%>" align="center" name="Drop Test" id="qty2" maxlength="4" size="4"/></td>
<td class="cent"><input type="radio" name="group2" value="Yes" id="yes('2')"></td>
<td class="cent"><input type="radio" name="group2" value="No" id="no('2')"></td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</label>
</tr>
<tr class="data_row" id="row3">
<label id="group3">
<td id="name_row3">Power Up</td>
<td class="cent"><input type="number" value="<%=powerup%>" align="center" name="Power Up" id="qty3" maxlength="4" size="4"/></td>
<td class="cent"><input type="radio" name="group3" value="Yes" id="yes('3')"></td>
<td class="cent"><input type="radio" name="group3" value="No" id="no('3')"></td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</label>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td class="cent"><input type="text" id="new_value"></td>
<td class="cent"><input type="radio" name="group28" id="new_yes"></td>
<td class="cent"><input type="radio" name="group28" id="new_no"></td>
<td class="cent"><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</table>

Sorry if you didn't want me to, but I've rewritten your code on my purpose, since it's quite messy and there were some inappropriate ways of coding.
var divButtons = document.querySelector('.buttons');
var divBoard = document.querySelector('.board');
var inputFir = divButtons.children[0];
var inputSec = divButtons.children[1];
var radioYes = divButtons.children[2];
var radioNo = divButtons.children[3];
var submit = divButtons.children[4];
var radioCount = 1;
submit.addEventListener('click', function(e){
e.stopPropagation();
var div = document.createElement('div');
var input1 = document.createElement('input');
var input2 = document.createElement('input');
var radio1 = document.createElement('input');
var radio2 = document.createElement('input');
radio1.type = 'radio';
radio2.type = 'radio';
radio1.name = radioCount;
radio2.name = radioCount;
radioCount++;
input1.value = inputFir.value;
input2.value = inputSec.value;
if(!radioYes.checked && !radioNo.checked){
radio1.checked = true;
}else if(radioYes.checked){
radio1.checked = true;
}else if(radioNo.checked){
radio2.checked = true;
}
div.append(input1, input2, radio1, radio2);
divBoard.append(div);
});
<div class="board">
</div>
<div class="buttons">
<input type="text" id="input1"/>
<input type="text" id="input2"/>
<input type="radio" name="radio0" id="radioY"/>
<input type="radio" name="radio0" id="radioN"/>
<input type="button" id="submit" value="Add Row"/>
</div>
First of all, you better not to approach the DOM element too much, retrieving any DOM elements costs you 'time'. So, the best way to optimize it is to access the DOM just once or as least as you can and save its address to your variable. Even though you might think you should search for the child elements, like
divButtons.children[0]
however, this is lot faster.
Second, creating DOM using innerHTML is not always the best choice. You can also use createElement method, like I did. If you're interested and wondering why, check this link out.
enter link description here
And also, if you use innerHTML, that means you will risk of sql injection attack. Check this out too.
enter link description here
Thrid, you can stop bubbling event by putting e.stopPropagation(), when the listener event has been fired. To know more about what it is, click here.
enter link description here

How to get input value from each td after attribute readonly applied?

I built a script which is clone every child rows from the parent typing on a checkbox checked here.
It was working until now. I want each child input value to be saved by ajax. But only the last child is echoed.
JS
function cloneAllz(clsName) {
var $input1 = $('.prdEdt').find('td.' + clsName + ' input[type="text"]').filter(':visible:first'); //master input
//console.log($input1.attr('id'));//test master input
$input1.on('input', function() {
var $this = $(this);
window.setTimeout(function() {
if ($('input.' + clsName).is(':checked')) {
var $child = $('.prdEdt').find('td.' + clsName + ' input[type="text"]');
$child.val($this.val()).attr('readonly', true).each(function() { //how to loop each input in the column???
console.log($this.attr('id'));
});
$input1.attr('readonly', false);
} else {
$('.prdEdt').find('td.' + clsName + ' input[type="text"]').removeAttr('readonly', ); //remove readonly
}
}, 0);
});
}
HTML
<table class="table table-bordered table-striped prdEdt">
<tr>
<th>ID</th>
<th>Code
<label class="pull-right label label-default">
<input type="checkbox" class="cde" onChange="cloneAllz('cde')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Title
<label class="pull-right label label-default">
<input type="checkbox" class="tt_en" onChange="cloneAllz('tt_en')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Cost</th>
</tr>
<tr>
<td>00067</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER KRABI AIRPORT-AO NANG" />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
</td>
</tr>
<tr>
<td>00068</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER KRABI AIRPORT-AO NANG " />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
</td>
</tr>
</table>
So the question is : How to echo each row input to save them data via ajax???
function cloneAllz(clsName) {
var $input1 = $('.prdEdt').find('td.' + clsName + ' input[type="text"]').filter(':visible:first'); //master input
//console.log($input1.attr('id'));//test master input
$input1.on('input', function() {
var $this = $(this);
window.setTimeout(function() {
if ($('input.' + clsName).is(':checked')) {
var $child = $('.prdEdt').find('td.' + clsName + ' input[type="text"]');
$child.val($this.val()).attr('readonly', true).each(function() { //how to loop each input in the column???
console.log($this.attr('id'));//only first row echoed twice!
});
$input1.attr('readonly', false);
} else {
$('.prdEdt').find('td.' + clsName + ' input[type="text"]').removeAttr('readonly', ); //remove readonly
}
}, 0);
});
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped prdEdt">
<tr>
<th>ID</th>
<th>Code
<label class="pull-right label label-default">
<input type="checkbox" class="cde" onChange="cloneAllz('cde')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Title
<label class="pull-right label label-default">
<input type="checkbox" class="tt_en" onChange="cloneAllz('tt_en')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Cost</th>
</tr>
<tr>
<td>00067</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER" />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
</td>
</tr>
<tr>
<td>00068</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER" />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
</td>
</tr>
</table>

JQuery Button to Show and Button to Hide

I have a list of button from a table (table1) that if I clicked the button, it will append to another table (table2), and the button will be hide. At the table2, there's a button too to remove/delete from this table2 and then the button at table1 will be displayed again. Here's my code so far:
var rowNum = 0;
$('.addrow').on('click', function () {
rowNum++;
var barang = $(this).parent().find("input[name='rfdn']").val();
var barangid = $(this).parent().find("input[name='rfdid']").val();
var price = $(this).parent().find("input[name='rfdp']").val();
var harga = $(this).parent().find("input[name='rfdpx']").val();
var qty = $(this).parent().find("input[name='rfdq']").val();
var row = '<tr id="rowNum' + rowNum + '">';
row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
jQuery('#refunds2').append(row);
$(this).hide();
});
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
rowNum--;
$(this).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list">
<thead>
<tr>
<td>Product</td>
<td>Refund</td>
<td>Model</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Flesh Out</td>
<td class="center">
<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow">Refund</a>
</td>
<td class="left">9786023759774</td>
<td class="right">1</td>
</tr>
<tr>
<td class="left">#About Love</td>
<td class="center">
<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow">Refund</a>
</td>
<td class="left">9786020317786</td>
<td class="right">1</td>
</tr>
</tbody>
</table>
<table id="refunds2" class="list">
<thead>
<tr>
<td class="left">Product</td>
<td>Refund Qty</td>
<td>Price</td>
<td></td>
</tr>
</thead>
</table>
To append new row it's already worked. But when I click delete button, the 'refund' button at table1 isn't coming up again. My data may be various, not only 2. Sometimes can be 5 or 10 or maybe 100

The rowNum you are adding should be related to the addrow button which was hidden. so that after deleting you know which this button correponded to.
See the code below. I have added bootstrap just for styling purposes.
var rowNum = 0;
$('.addrow').on('click', function () {
rowNum = $('.addrow').index(this);
var barang = $(this).parent().find("input[name='rfdn']").val();
var barangid = $(this).parent().find("input[name='rfdid']").val();
var price = $(this).parent().find("input[name='rfdp']").val();
var harga = $(this).parent().find("input[name='rfdpx']").val();
var qty = $(this).parent().find("input[name='rfdq']").val();
var row = '<tr id="rowNum' + rowNum + '">';
row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
jQuery('#refunds2').append(row);
$(this).hide();
});
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
$('.addrow').eq(rnum).show();
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list table">
<thead>
<tr>
<td>Product</td>
<td>Refund</td>
<td>Model</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Flesh Out</td>
<td class="center">
<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow">Refund</a>
</td>
<td class="left">9786023759774</td>
<td class="right">1</td>
</tr>
<tr>
<td class="left">#About Love</td>
<td class="center">
<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow">Refund</a>
</td>
<td class="left">9786020317786</td>
<td class="right">1</td>
</tr>
</tbody>
</table>
<table id="refunds2" class="list table">
<thead>
<tr>
<td class="left">Product</td>
<td>Refund Qty</td>
<td>Price</td>
<td></td>
</tr>
</thead>
</table>

Add two id refund0 <a class="button addrow" id="refund0">Refund</a> and refund1<a class="button addrow" id="refund1">Refund</a> , then show those id at your removeRow
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
rowNum--;
$("#refund0").show();
$("#refund1").show();
}
function.
var rowNum = 0;
$('.addrow').on('click', function () {
rowNum++;
var barang = $(this).parent().find("input[name='rfdn']").val();
var barangid = $(this).parent().find("input[name='rfdid']").val();
var price = $(this).parent().find("input[name='rfdp']").val();
var harga = $(this).parent().find("input[name='rfdpx']").val();
var qty = $(this).parent().find("input[name='rfdq']").val();
var row = '<tr id="rowNum' + rowNum + '">';
row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
jQuery('#refunds2').append(row);
$(this).hide();
});
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
rowNum--;
$("#refund0").show();
$("#refund1").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list">
<thead>
<tr>
<td>Product</td>
<td>Refund</td>
<td>Model</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Flesh Out</td>
<td class="center">
<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow" id="refund0">Refund</a>
</td>
<td class="left">9786023759774</td>
<td class="right">1</td>
</tr>
<tr>
<td class="left">#About Love</td>
<td class="center">
<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow" id="refund1">Refund</a>
</td>
<td class="left">9786020317786</td>
<td class="right">1</td>
</tr>
</tbody>
</table>
<table id="refunds2" class="list">
<thead>
<tr>
<td class="left">Product</td>
<td>Refund Qty</td>
<td>Price</td>
<td></td>
</tr>
</thead>
</table>

Instead of $(this).show() you only need to replace "this" to ".addrow".
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
rowNum--;
$('.addrow').show();
}

$(this).show() refers to removeRow function, not to addrow class . so, the easiest way is to change your html as <a class="button" >Refund</a> and then $(".addrow").show() instead of $(this).show()
like this:
var rowNum = 0;
$('.addrow').on('click', function () {
rowNum++;
var barang = $(this).parent().find("input[name='rfdn']").val();
var barangid = $(this).parent().find("input[name='rfdid']").val();
var price = $(this).parent().find("input[name='rfdp']").val();
var harga = $(this).parent().find("input[name='rfdpx']").val();
var qty = $(this).parent().find("input[name='rfdq']").val();
var row = '<tr id="rowNum' + rowNum + '">';
row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
jQuery('#refunds2').append(row);
$(this).hide();
});
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
rowNum--;
$(".addrow").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list">
<thead>
<tr>
<td>Product</td>
<td>Refund</td>
<td>Model</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Flesh Out</td>
<td class="center">
<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow">Refund</a>
</td>
<td class="left">9786023759774</td>
<td class="right">1</td>
</tr>
<tr>
<td class="left">#About Love</td>
<td class="center">
<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow">Refund</a>
</td>
<td class="left">9786020317786</td>
<td class="right">1</td>
</tr>
</tbody>
</table>
<table id="refunds2" class="list">
<thead>
<tr>
<td class="left">Product</td>
<td>Refund Qty</td>
<td>Price</td>
<td></td>
</tr>
</thead>
</table>

Develop Reference

JavaScript is the programming language of the Web.

creating new row on button click - javascript

Related

how to remove autofocus attrib

Add , Update , delete and display data in table with jQuery [closed]

HTML, JavaScript - Radio Button Selection Doesn't Display In New Row

How to get input value from each td after attribute readonly applied?

JQuery Button to Show and Button to Hide

Categories

Resources