JQuery Input Field Magic

I’m working on a form that takes in names of children to be added as visitors to an organization. The form has 20 rows of input fields enclosed in a TBODY, so I know which rows are not header rows. I don’t want to show all 20 rows, since most people have on average three children, but I want to be able to handle a large group of children in a family, in case the Duggars move here or something. So, the following javascript hides all fields except the first and except any that are pre-filled (in the event that form validation fails).


<script type="text/javascript">

var $children = $("#children");
$children.find("tbody tr:not(:first):not(:has(input[value]))").hide();
$children.append("

");
$("#addChild").click(function () {
var nextrow = $children.find("tbody tr:hidden:first")[0];
$(nextrow).show();
nextrow = $children.find("tbody tr:hidden:first")[0];
if (nextrow == null) {
// get rid of add button since there are no more hidden rows to display
$("#addChild").remove();
}
});

</script>


Let’s look at this line:

$children.find("tbody tr:not(:first):not(:has(input[value]))").hide();


I’m basically saying, find all TR (table rows) inside of a TBODY tag, excluding the first and excluding any rows that contain INPUT tags that contain a value.

The next line adds a TFOOT tag to the end of the table, and adds a button inside a row called addChild.

The next code block acts when the button is clicked. It finds the next hidden row, and displays it. It then finds the next hidden row after that, and if one is not found, the button is removed.

Advertisement