May the question will be difficult for explaining and understanding too.
I have a table which has some rows and button of add row.
Table rows contain input field, having specific name.
For eg.: I have two rows, the first row has name="qty1" then the second row is having name="qty2". And for adding the third row, there is button add row.
So, now the third row will be added.
The name of input in the third row should be name="qty3", but it is only name="qty".
I tried:
$(document).ready(function(){
$(".add-row").click(function(){
var markup = '<tr><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty" value="" placeholder="Quantity"></td></tr>';
$("table").append(markup);
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form method="post">
<table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
<tr>
<td colspan="3">
<input type="text" name="customer" value="" placeholder="Customer Name">
</td>
</tr>
<tr>
<th>Item</th>
<th>Service</th>
<th>Qty</th>
</tr>
<tr>
<td><input type="text" name="item1" value="" placeholder="Item"></td>
<td><select class="country" name="what1">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty" value="" placeholder="Quantity"></td>
</tr>
<tr>
<td><input type="text" name="item2" value="" placeholder="Item"></td>
<td><select class="country" name="what2">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
</tr>
<tr>
<td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</td>
</tr>
</table>
<input type="button" class="add-row" value="Add Row">
</form>
So, my question is how to increase the numbers as per rows?
Use a counter as name and increment it in each click:
Update: Use insertBefore() method to add the rows before the submit button.
I reccomend you take a look on DOM insertion outside and DOM insertion inside methods.
$(document).ready(function() {
var cont = 3
$(".add-row").click(function() {
var markup = '<tr><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty' + cont + '" value="" placeholder="Quantity"></td></tr>';
$(markup).insertBefore($('button[type="submit"]').closest("tr"));
cont++;
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form method="post">
<table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
<tr>
<td colspan="3">
<input type="text" name="customer" value="" placeholder="Customer Name">
</td>
</tr>
<tr>
<th>Item</th>
<th>Service</th>
<th>Qty</th>
</tr>
<tr>
<td><input type="text" name="item1" value="" placeholder="Item"></td>
<td><select class="country" name="what1">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty" value="" placeholder="Quantity"></td>
</tr>
<tr>
<td><input type="text" name="item2" value="" placeholder="Item"></td>
<td><select class="country" name="what2">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
</tr>
<tr>
<td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</td>
</tr>
</table>
<input type="button" class="add-row" value="Add Row">
</form>
Count children of table tbody with .children().length() to get the next number
var nextNumber = $("#chiru_inv tbody").children().length - 2;
Working jsfiddle
You can also consider learning technologies that are superior to jquery in these kinds of tasks, such as React.js, Angular, Vue.js
When the page loads, get the number of inputs that already exist. Then when you add new input, always increase that number and add it to the input's name qty + the number of existing inputs.
$(document).ready(function(){
var elCount = $("form table input[name^='qty']").length;
$(".add-row").click(function(){
elCount++;
var markup = '<tr><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty' + elCount + '" value="" placeholder="Quantity"></td></tr>';
$("table").append(markup);
});
});
Ok so I would suggest you flag your rows in the table by adding a class in your markup (in my example qtyRow):
var markup = '<tr class="qtyRow"><td><input type="text" name="item"
value="" placeholder="Item"></td><td><select class="country"
name="what"><option value="Select Part">Select Part</option><option
value="1">Part 1</option><option value="2">Part 2</option><option
value="3">Part 3</option><option value="4">Part 4</option><option
value="5">Part 5</option></select></td><td><input type="text"
name="qty" value="" placeholder="Quantity"></td></tr>';
In your example there are two rows by default. These should also have the qtyRow class.
You can get the amoutn of rows by this and add 1 for the new qtyRow:
var number = $("tr.qtyRow").length + 1;
Now you need to change name="qty" to name="qtyn" where is the new number from the codeline above. Inside your $(".add-row").click() listener you need to add after the declaration of markup:
var number = $("tr.qtyRow").length + 1;
markup = markup.peplace('name="qty"', 'name="qty' + number + '"');
Please let me know if this works for you :)
It would be better to have a specified CSS class for input row and using that following could be one of the solution:
// Get all rows
// Note: expecting input row having class 'inputRow'
var allRows = $('table tr.inputRow');
// Set proper value to 'name' attribute
allRows.last().find('input[name=item]').attr('name', 'item' + allRows.length);
HTML table tag also requires a fix:
<table>
<tbody>
<!-- data rows goes here -->
</tbody>
<tfoot>
<!-- save button row goes here-->
</tfoot>
</table>
$(document).ready(function() {
$(".add-row").click(function() {
var markup = '<tr class="inputRow"><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty" value="" placeholder="Quantity"></td></tr>';
$("table > tbody").append(markup);
// Get all rows
// Note: expecting input row having class 'inputRow'
var allRows = $('table tr.inputRow');
// Set proper value to 'name' attribute
allRows.last().find('input[name=item]').attr('name', 'item' + allRows.length);
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form method="post">
<table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
<tbody>
<tr>
<td colspan="3">
<input type="text" name="customer" value="" placeholder="Customer Name">
</td>
</tr>
<tr>
<th>Item</th>
<th>Service</th>
<th>Qty</th>
</tr>
<tr class="inputRow">
<td><input type="text" name="item1" value="" placeholder="Item"></td>
<td><select class="country" name="what1">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty" value="" placeholder="Quantity"></td>
</tr>
<tr class="inputRow">
<td><input type="text" name="item2" value="" placeholder="Item"></td>
<td><select class="country" name="what2">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</td>
</tr>
</tfoot>
</table>
<input type="button" class="add-row" value="Add Row">
</form>
Related
I'm trying to show a set of select option base on what is selected on another select option. I have some issue to understand the logic with the js script.
Example:
Any advice how to hide the other options which are not used
if TV show only value device, tsignal, blackscreen, other
If Radio show only the value: device, rsignal, other
$('#new').find('option').not('[value="device"]').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>
I guess that you meant to use .change so when #test dropdown changed you check what its value and based on that show / hide options, right?
$('#test').change(function() {
const options = $('#new').find('option').show();
if ($(this).val() === 'tv') {
options.not('[value="device"]').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>
Notice Hide option is not cross browser
In a table, I have two columns and many rows. One column have drop down and other have input field of type number. When I change the value of drop down I want to assign that selected value to the input field which is present in next td. I hope I explained my problem okay.
Here is what I have tried,
$(document).ready(function() {
$('select.nameSelect').change(function() {
var id = $(this).children("option:selected").val();
$(this).closest('.tr').find('.StudentId').val(id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
</table>
Firstly, your HTML is invalid due to having multiple elements with the same id (id="StudentName").
But the reason your code isn't working is because you're doing closest('.tr') when it should be closest('tr') because it's an element, not a class.
Also, there is no need to find the selected value... just use this.value
$(document).ready(function() {
$('select.nameSelect').change(function() {
$(this).closest('tr').find('.StudentId').val(this.value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
</table>
Here create a dynamic table row when clicking on + button add a new row and click on - button remove row design like this,
Here subject drop-down display and also instructor drop-down display but the problem is when select subject maths instructor drop-down show and when select a science instructor drop-down hide but it's changing in all drop-down.
$('body').on('change', '.course_topic', function() {
var topic_name = $(this).val();
var names = ['Registration', 'Lunch Break', 'Tea Break'];
if (jQuery.inArray(topic_name, names) != '-1') {
$(this).closest('table').find('tbody#schedule_table').find('td:last').parent().find('td').hide();
} else {
$(this).closest('table').find('tbody#schedule_table').find('td:last').parent('td').find('td').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th>From Time</th>
<th>To Time</th>
<th>Subject</th>
<th>Instructor</th>
<th></th>
</tr>
</tbody>
<tbody id="schedule_table">
<tr id="ScheduleTable1">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic" id="CourseScheduleScheduleSubject">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" id="CourseScheduleScheduleInstructor" style="display: none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
</select>
</td>
<td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
</tr>
<tr id="ScheduleTable0">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic" id="CourseScheduleScheduleSubject">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule]
[schedule_instructor][]" default="" class="form-control select2me
instructor_name" id="CourseScheduleScheduleInstructor" style="display:
none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant
</option>
</select>
</td>
<td><input type="button" class="btn btn-
primary btn-style" id="AddScheduleRow1" name="Add" value="+">
</td>
</tr>
</tbody>
</table>
That happens because of duplicate identifiers, the id attribute must be unique in the same document.
That will be fixed by replacing the duplicate ones with common classes.
Then your selector could be simply :
$(this).closest('tr').find('.instructor_name');
$('body').on('change', '.course_topic', function() {
var topic_name = $(this).val();
var names = ['Registration', 'Lunch Break', 'Tea Break'];
var instructor_name = $(this).closest('tr').find('.instructor_name');
if ($.inArray(topic_name, names) != -1) {
instructor_name.hide();
} else {
instructor_name.show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th>From Time</th>
<th>To Time</th>
<th>Subject</th>
<th>Instructor</th>
<th></th>
</tr>
</tbody>
<tbody id="schedule_table">
<tr class="ScheduleTable1">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" style="display: none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
</select>
</td>
<td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
</tr>
<tr class="ScheduleTable0">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule]
[schedule_instructor][]" default="" class="form-control select2me
instructor_name" style="display:
none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant
</option>
</select>
</td>
<td><input type="button" class="btn btn-
primary btn-style" id="AddScheduleRow1" name="Add" value="+">
</td>
</tr>
</tbody>
</table>
I want to create a href and when clicking, it add another <tr> row. Exactly the same row, as the <tr class="new-row"> below. I use php smarty.
How can I achieve that?
CODE:
<div class="control-page-header">
<div class="row">
<div class="container">
{include file="$template/pageheader.tpl" title="DNS-beheer"|cat:' '|cat:$domain}
</div>
</div>
</div>
<div class="row">
<div class="container">
<p>
<form method="post" action="{$smarty.server.PHP_SELF}?action=domaindetails">
<input type="hidden" name="id" value="{$domainid}" />
</form>
</p>
{if $error}
<div class="alert alert-danger">
{$error}
</div>
{/if}
{if $external}
<p>{$code}</p>
{else}
<form class="form-horizontal" method="post" action="{$smarty.server.PHP_SELF}?action=domaindns">
<input type="hidden" name="sub" value="save" />
<input type="hidden" name="domainid" value="{$domainid}" />
<div class="row">
<div class="col-lg-12">
{include file="$template/includes/tablelist.tpl" tableName="DomainsList" startOrderCol="1" filterColumn="0"}
<table class="table table-condensed" id="tableDomainsList">
<thead>
<tr>
<th class="textcenter">Naam</th>
<th class="textcenter">Type</th>
<th class="textcenter">Waarde</th>
<th class="textcenter">{$LANG.domaindnspriority} *</th>
</tr>
</thead>
<tbody>
{foreach from=$dnsrecords item=dnsrecord}
<tr>
<td><input type="hidden" name="dnsrecid[]" value="{$dnsrecord.recid}" /><input type="text" name="dnsrecordhost[]" value="{$dnsrecord.hostname}" class="form-control input-sm" /></td>
<td><select class="form-control input-sm" name="dnsrecordtype[]">
<option value="A"{if $dnsrecord.type eq "A"} selected="selected"{/if}>A (Address)</option>
<option value="AAAA"{if $dnsrecord.type eq "AAAA"} selected="selected"{/if}>AAAA (Address)</option>
<option value="MXE"{if $dnsrecord.type eq "MXE"} selected="selected"{/if}>MXE (Mail Easy)</option>
<option value="MX"{if $dnsrecord.type eq "MX"} selected="selected"{/if}>MX (Mail)</option>
<option value="CNAME"{if $dnsrecord.type eq "CNAME"} selected="selected"{/if}>CNAME (Alias)</option>
<option value="TXT"{if $dnsrecord.type eq "TXT"} selected="selected"{/if}>SPF (txt)</option>
<option value="URL"{if $dnsrecord.type eq "URL"} selected="selected"{/if}>URL Redirect</option>
<option value="FRAME"{if $dnsrecord.type eq "FRAME"} selected="selected"{/if}>URL Frame</option>
</select></td>
<td><input type="text" name="dnsrecordaddress[]" value="{$dnsrecord.address}" class="form-control input-sm" /></td>
<td>{if $dnsrecord.type eq "MX"}<input type="text" name="dnsrecordpriority[]" value="{$dnsrecord.priority}" class="form-control input-sm" />{else}<input type="hidden" name="dnsrecordpriority[]" value="N/A" />{/if}</td>
<td><a class="remove" id="removeRow" href=''>X</td>
</tr>
{/foreach}
<tr>
<td><input type="text" name="dnsrecordhost[]" class="form-control input-sm" /></td>
<td><select name="dnsrecordtype[]" class="form-control input-sm">
<option value="A">A (Address)</option>
<option value="AAAA">AAAA (Address)</option>
<option value="MXE">MXE (Mail Easy)</option>
<option value="MX">MX (Mail)</option>
<option value="CNAME">CNAME (Alias)</option>
<option value="TXT">SPF (txt)</option>
<option value="URL">URL Redirect</option>
<option value="FRAME">URL Frame</option>
</select></td>
<td><input type="text" name="dnsrecordaddress[]" class="form-control input-sm" /></td>
<td><input type="text" name="dnsrecordpriority[]" class="form-control input-sm" /></td>
<td><a class="addrow" id="addRow" href='' onclick='return false;'>+</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="button-row-domains-dns right">
<div class="text-right">
<input type="submit" value="{$LANG.clientareasavechanges}" class="btn btn-primary" />
</div>
</div>
</form>
{/if}
<div class="button-row-domains-dns">
<div class="text-left">
<form method="post" action="{$smarty.server.PHP_SELF}?action=domaindetails">
<input type="hidden" name="id" value="{$domainid}" />
<input type="submit" value="Terug naar domein" class="btn btn-default" />
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
//when document is ready
$(function(){
$('a#addRow').on('click',function(){
var newTr=$('table#tableDomainsList tr:last').clone();//create clone
newTr.addClass("new-row");//add class new-tr as You wanted
$('table#tableDomainsList tbody').append(newTr);//append clone
});
//remove row
$('a#removeRow').on("click",function(){
if ($('table#tableDomainsList tbody tr').length>1)//be sure that is more then one
$('table#tableDomainsList tbody').find("tr:last").remove();//remove last tr
});
});
</script>
</div>
</div>
Use the code below :
$('.addRow').click(function(){
$('table tbody tr:last-child').after($('table tbody tr:first-child').clone())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="row">
<td><input type="text" name="dnsrecordhost[]" class="form-control input-sm" /></td>
<td><select name="dnsrecordtype[]" class="form-control input-sm">
<option value="A">A (Address)</option>
<option value="AAAA">AAAA (Address)</option>
<option value="MXE">MXE (Mail Easy)</option>
<option value="MX">MX (Mail)</option>
<option value="CNAME">CNAME (Alias)</option>
<option value="TXT">SPF (txt)</option>
<option value="URL">URL Redirect</option>
<option value="FRAME">URL Frame</option>
</select></td>
<td><input type="text" name="dnsrecordaddress[]" class="form-control input-sm" /></td>
<td><input type="text" name="dnsrecordpriority[]" class="form-control input-sm" /></td>
</tr>
</tbody>
</table>
<a href='' class='addRow' onclick='return false;'>Add Row</a>
//when document is ready
$(function(){
//add row
$('a#addRow').on('click',function(){
var newTr=$('table#rows tr:last').clone();//create clone
newTr.addClass("new-row");//add class new-tr as You wanted
$('table#rows tbody').append(newTr);//append clone
});
//remove last row button
$('a#removeRow').on("click",function(){
if ($('table#rows tbody tr').length>1)//be sure that is more then one
$('table#rows tbody').find("tr:last").remove();//remove last tr
});
//remove current row ( X in row )
$('table#rows tbody').on("click",function(e){
if ($(e.target).hasClass('removeCurrentRow') && $('table#rows tbody tr').length>1)//if this is a element and we have more then 1 rows
$(e.target).parent().parent().remove();//go to parent - parent (tr) and remove
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rows">
<tbody>
<tr>
<td><input type="text" name="dnsrecordhost[]" class="form-control input-sm" /></td>
<td><select name="dnsrecordtype[]" class="form-control input-sm">
<option value="A">A (Address)</option>
<option value="AAAA">AAAA (Address)</option>
<option value="MXE">MXE (Mail Easy)</option>
<option value="MX">MX (Mail)</option>
<option value="CNAME">CNAME (Alias)</option>
<option value="TXT">SPF (txt)</option>
<option value="URL">URL Redirect</option>
<option value="FRAME">URL Frame</option>
</select></td>
<td><input type="text" name="dnsrecordaddress[]" class="form-control input-sm" /></td>
<td><input type="text" name="dnsrecordpriority[]" class="form-control input-sm" /></td>
<td><a class="removeCurrentRow" href='' onclick="return false">X</a></td>
</tr>
</tbody>
</table>
<a id="addRow" href='' onclick='return false;'>Add Row</a>
<a id="removeRow" href='' onclick='return false;'>Remove Row</a>
Explanation to code:
$('a#addRow') - selector for link, add some attributes as class or id, this selector is only example
$('table#rows tbody') - selector for element where we are adding - I propose add some attribute like class or id to be sure that it is that table not different
append - appends element as last child
$('table#rows tr:last').clone() - clone last tr element, again add some attributes and change selector to be more accurate that it will be desirable table element
$(function(){
var $newRow=$('tr#newRow');//reference to last row with adding
var $tBody=$("table#tableDomainsList tbody");
$('a#addRow').on('click',function(){
var newRow=$newRow.clone();//clone new row
newRow.removeAttr("id");//clean id
newRow.find('td:last').html("<a class='removerow'>X</a");//change last row to removing link
$newRow.before(newRow);
//clear inputs
$newRow.find('input').val("");
});
$tBody.on("click",function(e){
e.preventDefault();
if ($(e.target).hasClass("removerow")){
$(e.target).parent().parent().remove();//remove tr
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed" id="tableDomainsList">
<thead>
<tr>
<th class="textcenter">Naam</th>
<th class="textcenter">Type</th>
<th class="textcenter">Waarde</th>
<th class="textcenter">PRIORYTY*</th>
</tr>
</thead>
<tbody>
<!-- this are rows generated from php -->
<tr>
<td><input type="text" name="dnsrecordhost[]" class="form-control input-sm" /></td>
<td><select name="dnsrecordtype[]" class="form-control input-sm">
<option value="A">A (Address)</option>
<option value="AAAA">AAAA (Address)</option>
<option value="MXE">MXE (Mail Easy)</option>
<option value="MX">MX (Mail)</option>
<option value="CNAME">CNAME (Alias)</option>
<option value="TXT">SPF (txt)</option>
<option value="URL">URL Redirect</option>
<option value="FRAME">URL Frame</option>
</select></td>
<td><input type="text" name="dnsrecordaddress[]" class="form-control input-sm" /></td>
<td><input type="text" name="dnsrecordpriority[]" class="form-control input-sm" /></td>
<td><a class="removerow">X</a></td>
</tr>
<!-- this is new row -->
<tr id="newRow">
<td><input type="text" name="dnsrecordhost[]" class="form-control input-sm" /></td>
<td><select name="dnsrecordtype[]" class="form-control input-sm">
<option value="A">A (Address)</option>
<option value="AAAA">AAAA (Address)</option>
<option value="MXE">MXE (Mail Easy)</option>
<option value="MX">MX (Mail)</option>
<option value="CNAME">CNAME (Alias)</option>
<option value="TXT">SPF (txt)</option>
<option value="URL">URL Redirect</option>
<option value="FRAME">URL Frame</option>
</select></td>
<td><input type="text" name="dnsrecordaddress[]" class="form-control input-sm" /></td>
<td><input type="text" name="dnsrecordpriority[]" class="form-control input-sm" /></td>
<td><a class="addrow" id="addRow" href='' onclick='return false;'>+</a></td>
</tr>
</tbody>
</table>
i already duplicate my html elements by this javascript code but i cannot copy the events of the code.Will you gyups please prove me the possible solution.
<script type = "text/javascript" language = "javascript">
function func_addmore(){
$(document).ready(function() {
$("div").click(function () {
$(this).clone().insertAfter(this);
});
});
}
</script>
<body id="show" onload="func_load()">
<form method="POST" action="get_value.php" >
<table class="table table-condensed">
<tr>
<td width="1%"><span> Level of Education:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">Masters</option>
<option id="2">Bachelors</option>
<option id="3">HSC</option>
<option id="4">SSC</option>
</select>
</td>
</tr>
<tr>
<td ><span>Exam/Degee Title:</span></td>
<td ><input name="degreetitle" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<tr>
<td><span>Concentration/Major:</span></td>
<td><input name="major" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td><span>Institutions:</span></td>
<td>
<select id="institutions" name="institutions" onchange="func_ins()">
<option value="none" selected >----Select ----</option>
<option id="1">A</option>
<option id="2">Others</option>
</select>
</td>
</tr>
<tr id ="trins">
<td><span>Others</span></td>
<td><input type="text" id="others_ins" /></td>
</tr>
<tr>
<td><span>Result:</span></td>
<td>
<select id="result" name="result" onchange="func_res()">
<option value="none" selected >----Select ----</option>
<option id="1">Grade</option>
<option id="2" >Division</option>
</select>
</td>
</tr>
<tr id ="trgrade">
<td><span>Grade</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id ="trscale">
<td><span>Scale:</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id="trdiv" onload="func_hid()" >
<td><span>Division:</span></td>
<td>
<select id="division" name="division">
<option value="none" selected >----Select ----</option>
<option id="1">1st Division</option>
<option id="2">2nd Division</option>
</select>
</td>
</tr>
<tr>
<td width="1%"><span> Year of Passing:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">2016</option>
<option id="2">2015</option>
<option id="3">2014</option>
<option id="4">2013</option>
<option id="5">2012</option>
<option id="6">2011</option>
<option id="7">2010</option>
<option id="1">2009</option>
<option id="2">2008</option>
<option id="3">2007</option>
<option id="4">2006</option>
<option id="5">2005</option>
<option id="6">2004</option>
<option id="7">2003</option>
<option id="1">2002</option>
<option id="2">2001</option>
<option id="3">2000</option>
<option id="4">1999</option>
<option id="5">1998</option>
<option id="6">1997</option>
<option id="7">1996</option>
<option id="1">1995</option>
<option id="2">1994</option>
<option id="3">1993</option>
<option id="4">1992</option>
<option id="5">1991</option>
<option id="6">1990</option>
<option id="7">1989</option>
<option id="2">1988</option>
<option id="3">1987</option>
<option id="4">1986</option>
<option id="5">1985</option>
<option id="6">1984</option>
<option id="7">1983</option>
<option id="5">1982</option>
<option id="6">1981</option>
<option id="7">1980</option>
</select>
</td>
</tr>
<tr>
<td ><span>Duration:</span></td>
<td ><input name="duration" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td ><span>Achievement:</span></td>
<td ><input name="achievement" type="text" id="name" size="19" class=""/></td>
</tr>
<tr><td> <input type="submit" name="submit" value="submit" />
</td></tr>
<tr><td> <input type="button" name="addmore" value="Add more" onclick="func_addmore()" />
</td></tr>
</table>
</div>
</form>
</body>
Is there any way to do that? Thanks in advance.I hope i will find out my answer through you guys.Thank you.
The jQuery .clone() method offers the option to also clone events. Please note that by default this option is not used. In order to clone events you need to use:
$(this).clone(true).insertAfter(this);
More detail at jQuery.clone()
I want to note that the .clone() method in jQuery only clones DOM elements. In order to clone JavaScript objects, you would do:
// Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);
More information can be found in the jQuery documentation.
I also want to note that the deep copy is actually much smarter than what is shown above – it's able to avoid many traps (trying to deep extend a DOM element, for example). It's used frequently in jQuery core and in plugins to great effect.