Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I wanted swap the element values, on UP/Down button clicks. For example in the below html snippet, I have two sets Guidance and Communication, on UP/Down button click, all the values of Guidance set(checkbox, textbox values) has to swapped with Communication values. I am planning to write up a simple javascript swap function, could you help me write it using simple and clean javascript code?
JS:
var from_list = getElementsByClassName("from");
var to_list = getElementsByClassName("to");
for (var i = 0; i < from_list.length; i++) {
//swap logic
}
HTML:
<table>
<tr>
<td></td>
<td>Guidance :</td>
<td>
<table>
<tr>
<td>
<input type="checkbox" class="guidance" name="guidlobs" value="g1">Box1</td>
<td>
<input type="checkbox" class="guidance" name="guidlobs" value="g2">Box2</td>
<td>
<input type="checkbox" class="guidance" name="guidlobs" value="g3">Box3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>Guid Name:</td>
<td>
<input type="text" class="guidance" name="guidance_name" style="width:500px;" value="" />
<br />
</td>
</tr>
<tr>
<td></td>
<td>Guid URL :</td>
<td>
<input type="text" class="guidance" name="guidance_url" style="width:500px;" value="" />
<br />
</td>
</tr>
<tr>
<td>
<input type="button" value="DN" onclick="swap('guidance','communication')" />
</td>
<td>Guid Description:</td>
<td>
<input type="text" class="guidance" name="guidance_desc" style="width:500px;" value="" />
<br />
</td>
</tr>
<tr>
<td></td>
<td>Communication :</td>
<td>
<table>
<tr>
<td>
<input type="checkbox" name="commlobs" value="c1">Box1</td>
<td>
<input type="checkbox" name="commlobs" value="c2">Box2</td>
<td>
<input type="checkbox" name="commlobs" value="c3">Box3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="button" value="UP" onclick="swap('communication','guidance')" />
</td>
<td>Communication Name :</td>
<td>
<input type="text" class="communication" name="communication_name" style="width:500px;" value="" />
<br />
</td>
</tr>
<tr>
<td></td>
<td>Communication URL:</td>
<td>
<input type="text" class="communication" name="communication_url" style="width:500px;" value="" />
<br />
</td>
</tr>
<tr>
<td>
<input type="button" value="DN" onclick="swap('communication','training')" />
</td>
<td>Communication Description :</td>
<td>
<input type="text" class="communication" name="communication_desc" style="width:500px;" value="" />
<br />
</td>
</tr>
</table>
It's not clear to me what you want to achieve. See if that helps you:
window.swap = function(fromClass, toClass) {
var from_list= document.getElementsByClassName(fromClass);
var to_list = document.getElementsByClassName(toClass);
var tmp;
for(var i = 0; i < from_list.length; i++) {
//swap logic
if (from_list[i].type == "checkbox") {
tmp = from_list[i].checked;
from_list[i].checked = to_list[i].checked;
to_list[i].checked = tmp;
} else {
tmp = from_list[i].value;
from_list[i].value = to_list[i].value;
to_list[i].value = tmp;
}
}
}
JSFiddle: http://jsfiddle.net/1cgeyyb0/1/
Related
This question already has answers here:
Disable form auto submit on button click
(6 answers)
Closed 1 year ago.
Project:
create 4 radio buttons
user clicks on an option and submits
answer should appear in a textarea box
Why is it when I click on a specific radio button option, and then the submit button, the value of the radio button appears in the textarea space for a split second and then disappears?
Thanks heaps!
document.getElementById("clickMePlease").onclick=function() {
var theOptionPicked;
var i;
var nameOption;
for (i = 0; i <= 3; i++) {
theOptionPicked = document.myForm.nameQuestion[i];
if (theOptionPicked.checked == true) {
nameOption = theOptionPicked.value;
}
}
document.myForm.txtOutput.value = "You have picked " + theOptionPicked.value;
}
<!DOCTYPE html>
<html>
<form name="myForm">
<table border=1>
<tr>
<td>
<input type="radio" name="nameQuestion" value="fred">fred
</td>
</tr>
<td>
<input type="radio" name="nameQuestion" value="rahul">Rahul
</td>
<tr>
<td>
<input type="radio" name="nameQuestion" value="peter">peter
</td>
</tr>
<tr>
<td>
<input type="radio" name="nameQuestion" value="none">none of the above
</td>
</tr>
<tr>
<td>
<input style="width: 100%" type="submit" value="clickme" id="clickMePlease">
</td>
</tr>
</table>
<textarea name="txtOutput" rows=5 cols=20>
</textarea>
</form>
<script>
</script>
</html>
Use onsubmit="event.preventDefault();" on your form element:
document.getElementById("clickMePlease").onclick=function() {
var theOptionPicked;
var i;
var nameOption;
for (i = 0; i <= 3; i++) {
theOptionPicked = document.myForm.nameQuestion[i];
if (theOptionPicked.checked == true) {
nameOption = theOptionPicked.value;
}
}
document.myForm.txtOutput.value = "You have picked " + theOptionPicked.value;
}
<!DOCTYPE html>
<html>
<form name="myForm" onsubmit="event.preventDefault();">
<table border=1>
<tr>
<td>
<input type="radio" name="nameQuestion" value="fred">fred
</td>
</tr>
<td>
<input type="radio" name="nameQuestion" value="rahul">Rahul
</td>
<tr>
<td>
<input type="radio" name="nameQuestion" value="peter">peter
</td>
</tr>
<tr>
<td>
<input type="radio" name="nameQuestion" value="none">none of the above
</td>
</tr>
<tr>
<td>
<input style="width: 100%" type="submit" value="clickme" id="clickMePlease">
</td>
</tr>
</table>
<textarea name="txtOutput" rows=5 cols=20>
</textarea>
</form>
<script>
</script>
</html>
Edit:
You was asking for prevent reloading website after submitting form, so I was not checking other functionalitty. Now I repaired and simplified your snippet, so it selects correctly:
document.getElementById("clickMePlease").onclick = function() {
var theOptionPicked = document.querySelector('input[name="nameQuestion"]:checked').value;
document.myForm.txtOutput.value = "You have picked " + theOptionPicked;
}
<!DOCTYPE html>
<html>
<form name="myForm" onsubmit="event.preventDefault();">
<table border=1>
<tr>
<td>
<input type="radio" name="nameQuestion" value="fred">fred
</td>
</tr>
<td>
<input type="radio" name="nameQuestion" value="rahul">Rahul
</td>
<tr>
<td>
<input type="radio" name="nameQuestion" value="peter">peter
</td>
</tr>
<tr>
<td>
<input type="radio" name="nameQuestion" value="none">none of the above
</td>
</tr>
<tr>
<td>
<input style="width: 100%" type="submit" value="clickme" id="clickMePlease">
</td>
</tr>
</table>
<textarea name="txtOutput" rows=5 cols=20>
</textarea>
</form>
<script>
</script>
</html>
I'm trying to make a bulk action function.
What I want:
- Bulk selection in multiple tables, but one <form>
- At every table one select box to select all items inside that table
Example of my code
<form method="post">
<table class="list1">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list1, this')" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2810" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2811" />
</td>
</tr>
</tbody>
</table>
<table class="list2">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list2, this')" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2812" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2813" />
</td>
</tr>
</tbody>
</table>
</form>
<script>
function checkAll(table, bx) {
var checkname = document.table.getElementsByClassName("bulkCheckbox");
for (i = checkname.length; i--; ) {
checkname[i].checked = bx.checked;
}
}
</script>
Now I got the php part worked, so when I select multiple select boxes, the $_POST returns my values.
Also the Javascript part worked for me, so select all checkboxes per table.
But Javascript and PHP together won't work for me..
How can I fix this to let the JS and PHP work together?
I've tried multiple scripts but none of them worked for me.
The error I get from JS:
Uncaught TypeError: Cannot read property 'getElementsByName' of undefined
What I try, nothing works..
Try the below code
function checkAll(table, bx) {
var checkname = document.getElementsByClassName("bulkCheckbox");
for (i = checkname.length; i--; ) {
console.log(checkname[i]);
console.log(bx);
checkname[i].checked = bx.checked;
}
}
<form method="post">
<table class="list1">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list1', this)" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2810" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2811" />
</td>
</tr>
</tbody>
</table>
<table class="list2">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list2', this)" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2812" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2813" />
</td>
</tr>
</tbody>
</table>
</form>
'this' the parameter you are passing in checkAll() is passed as a string.
I am trying to create a table that when a user click update, it will get the first and second input value. I am trying to use prev to find the first two DOM element and get the value, but fail, what should I do? Any help is appreciated.
$('.update_button').on("click",function(){
var update_val_1 = $(this).prev().find('input:first').val();
var update_val_2 = $(this).prev().find('input:nth-child(2)').val();
alert(update_val_1);
alert(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="gridtable">
<td><input type="text" value="apple" /></td>
<td><input type="text" value="one" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="banana" /></td>
<td><input type="text" value="three" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="berry" /></td>
<td><input type="text" value="ten" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
The problem is that prev looks for sibling nodes. Your input elements are in different td's so they aren't siblings. Instead, you need to go to the parent row then grab the inputs from there.
Explicit example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var $firstCell = $parentRow.find('td:first-child');
var $secondCell = $parentRow.find('td:nth-child(2)');
var $firstInput = $firstCell.find('input');
var $secondInput = $secondCell.find('input');
var update_val_1 = $firstInput.val();
var update_val_2 = $secondInput.val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
Simplified example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var update_val_1 = $parentRow.find('td:first-child input').val();
var update_val_2 = $parentRow.find('td:nth-child(2) input').val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
I'm a big fan of the .closest(selector) and .find('selector') methods.
The first one goes up the dom until it finds the first match of the given selector.
The second one goes down the dom and finds all matches.
.eq(index) is like array[index] for jQuery. It takes a collection of jQuery elements and returns the one at the given index.
$('.update_button').on("click",function(){
var inputs = $(this).closest('.gridtable').find('input');
var value1 = inputs.eq(0).val();
var value2 = inputs.eq(1).val();
});
I am new to Javascript and trying to create an on-line score tracker for a card game I play called Hand and Foot. The rules are this, 3 teams play 4 games, the team with the most points at the end wins. I have created a calculator for 1 person for 1 game, but when I duplicate it for the 11 more instances I need, the calculations stop working which I believe has to do with the getElementById not registering with the multiple instances in the html. I would be grateful suggestions on a more elegant way to create instances of this calculator on the same page without having to change the IDs of each field for each play and each game. check out my code Fiddle
<div class="P1G1">
<h1>Game 1</h1>
<form id="calcP1G1">
<h2>Neccessary Piles</h2>
<table>
<td>Clean</td>
<td align="center">
<input id="necCleanP1G1" type="checkbox" class="addon" value="500">
</td>
<td>Dirty</td>
<td align="center">
<input id="necDirtyP1G1" type="checkbox" class="addon" value="300">
</td>
<td>Sevens</td>
<td align="center">
<input id="necSevenP1G1" type="checkbox" class="addon" value="5000">
</td>
<td>Fives</td>
<td align="center">
<input id="necFiveP1G1" type="checkbox" class="addon" value="3000">
</td>
<td>Wilds</td>
<td align="center">
<input id="necWildP1G1" type="checkbox" class="addon" value="2500">
</td>
<td id="necTotalP1G1" style="display:none"></td>
</table>
<hr>
<table>
<tr>
<th class="pile-header">Clean Piles</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="cleanP1G1" type="text" value="0" oninput="calculate()" class="form-control" />
</td>
<td class="result-number">
<input id="resultCleanP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Dirty Piles</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="dirtyP1G1" type="text" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultDirtyP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Red 3s</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="redThreeP1G1" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultRedThreeP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Card Count</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="cardsP1G1" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultCardP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<td class="pile-header">Total</td>
<td class="result-number">
<input id="resultTotalP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
</table>
</form>
</div>
Javascript
function updateTotal() {
var add = 0;
var form = document.getElementById("calcP1G1");
var checkboxes = form.getElementsByClassName('addon');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
add += parseInt(checkboxes[i].value, 10);
}
}
var amount = document.getElementById("necTotalP1G1").innerHTML = add;
}
document.getElementById("calcP1G1").addEventListener('change', updateTotal);
// Run it once at startup
updateTotal();
function calculate() {
var topCards = document.getElementById("necTotalP1G1").innerHTML;
var cleanBox = document.getElementById("cleanP1G1").value;
var totalClean = document.getElementById("resultCleanP1G1");
var resultClean = cleanBox * 500;
totalClean.value = resultClean;
//---------------------//
var dirtyBox = document.getElementById("dirtyP1G1").value;
var totalDirty = document.getElementById("resultDirtyP1G1");
var resultDirty = dirtyBox * 300;
totalDirty.value = resultDirty;
//---------------------//
var redThreeBox = document.getElementById("redThreeP1G1").value;
var totalRedThree = document.getElementById("resultRedThreeP1G1");
var resultRedThree = redThreeBox * 100;
totalRedThree.value = resultRedThree;
//---------------------//
var cardBox = document.getElementById("cardsP1G1").value;
var totalCard = cardBox;
document.getElementById("resultCardP1G1").value = totalCard;
//---------------------//
var total = parseInt(resultDirty) + parseInt(resultClean) + parseInt(resultRedThree) + parseInt(totalCard) + parseInt(topCards);
document.getElementById("resultTotalP1G1").value = total;
}
document.getElementById("calcP1G1").addEventListener('change', calculate);
// Run it once at startup
calculate();
I have a page containing:
<div class="my_div">
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th>Title 3</th>
</tr>
<tr>
<td><input type="input" name="set[1][arg1]" value="X"></td>
<td><input type="input" name="set[1][arg2]" value="Y"></td>
<td><input type="input" name="set[1][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[2][arg1]" value="X"></td>
<td><input type="input" name="set[2][arg2]" value="Y"></td>
<td><input type="input" name="set[2][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[3][arg1]" value="X"></td>
<td><input type="input" name="set[3][arg2]" value="Y"></td>
<td><input type="input" name="set[3][arg3]" value="Z"></td>
</tr>
</table>
Add another Set
</div>
<div class="my_div">
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th>Title 3</th>
</tr>
<tr>
<td><input type="input" name="set[4][arg1]" value="X"></td>
<td><input type="input" name="set[4][arg2]" value="Y"></td>
<td><input type="input" name="set[4][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[5][arg1]" value="X"></td>
<td><input type="input" name="set[5][arg2]" value="Y"></td>
<td><input type="input" name="set[5][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[6][arg1]" value="X"></td>
<td><input type="input" name="set[6][arg2]" value="Y"></td>
<td><input type="input" name="set[6][arg3]" value="Z"></td>
</tr>
</table>
Add another Set
</div>
Two (or more) divs, containing a table each, plus n rows, each containing inputs. The inputs you already see are dynamically created from data in the db.
I would like to be able to just add a new <tr> when the link below any table is clicked. The catch being that the table which will recieve the new row is the one immediately above the link clicked.
I did think about giving each table a unique id which matches the id of the link but am unsure how in the jQuery to then recognise that a link with a random id has been clicked.
Then i thought maybe I could use the closest functionality and traverse backwards from the link to the table above it but I don't think that works. (maybe it does?)
Also, when I add the new row, it needs to be blank, which I think I could figure out, once I manage to clone the last (or any for that matter) row and append it to the end of the relevant table. E.g. new row:
<tr>
<td><input type="input" name="newSet[][arg1]" value=""></td>
<td><input type="input" name="newSet[][arg2]" value=""></td>
<td><input type="input" name="newSet[][arg3]" value=""></td>
</tr>
Hope it makes sense what I am asking.
Thanks in advance.
Jon
First, add a class addSet to your links and remove the id or make it unique. Repeated ids is not a valid markup. After doing this, I'd say this should work
$('.addSet').click(function(e) {
e.preventDefault();
var $table = $(this).prev();
var $row = $table.find('tr:last');
var $clonedRow = $row.clone();
$clonedRow.find('input').each(function(index) {
var $this = $(this);
$this.val('');
$this.prop('name','set[][arg' + (index + 1) + ']' );
})
$table.append($clonedRow);
});
DEMO
DEMO
As pointed out in the comments, please change id="addSet" to class="addSet" to get rid of duplicate ID's. Make a clone of the last row .... there should be at least one row in the table, otherwise this part will fail. Then fix the name and value of each input element in the clone. You can either change the current value with .val() or the default/initial value with .attr() or removeAttr('value').
Here is the code you need:
$(function() {
$(document).on('click', 'a.addSet', function(e) {
e.preventDefault();
var tr = $(this).closest('div.my_div').find('tr').last().clone();
tr.find('input').attr('name', function() {
return $(this).attr('name').replace(/set\[\d{1,}\]/g,'newSet[]');
})
.each(function() {
$(this).val('');
});
$(this).closest('div.my_div').find('table tbody').append( tr );
});
});
you can do it by adding a class to the link as id must be unique:
HTML:
<div class="my_div">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>
<input type="input" name="set[1][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[1][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[1][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[2][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[2][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[2][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[3][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[3][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[3][arg3]" value="Z" />
</td>
</tr>
</table> Add another Set
</div>
<div class="my_div">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>
<input type="input" name="set[4][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[4][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[4][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[5][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[5][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[5][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[6][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[6][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[6][arg3]" value="Z" />
</td>
</tr>
</table> Add another Set
</div>
JQUERY:
$(".addSet").click(function () {
$(this).prev("table").append('<tr><td><input type="input" name="newSet[][arg1]" value=""></td><td><input type="input" name="newSet[][arg2]" value=""></td><td><input type="input" name="newSet[][arg3]" value=""></td></tr>');
})
FIDDLE:
http://jsfiddle.net/kbxekrjc/
I am answering my own question because I used a combination of two of the other provided answers (#ClaudioRedi & #user3558931)
$('.addSet').click(function(e) {
e.preventDefault();
var $table = $(this).prev();
var $row = $table.find('tr:last');
var $clonedRow = $row.clone();
$clonedRow.find('input').attr('name', function() {
return $(this).attr('name').replace(/set\[\d{1,}\]/g,'newSet[]');
})
.each(function() {
$(this).val('');
});
$clonedRow.hide();
$table.append($clonedRow);
$clonedRow.show('slow');
});