I am writing an .html page which is to be used to perform a system checkout and verify functionality of various aspects of that system. The .html page features a table encapsulated in a form with each row of that table being a step to verify an aspect of the system (e.g. Step 1: Do something) while each column is different criteria for that checkout process (e.g. Step #, Step Instruction, Expected Result, Actual Result, and Comments).
For the Actual Result column, I have a selection for blank (Incomplete), Pass, Fail, and N/A. The Comments column features a disabled textarea box with a placeholder reading "No Comments".
HTML:
<form method="post" action="">
<table>
<thead>
<tr>
<th align="center"><strong>Step</strong></th>
<th align="left"><strong>Instruction</strong></th>
<th align="left"><strong>Expected Result</strong></th>
<th align="left"><strong>Actual Result</strong></th>
<th align="left"><strong>Comments</strong></th>
</tr>
</thead>
<tr>
<td align="center" valign="top">1.</td>
<td align="left" valign="top">Do something.</td>
<td align="left" valign="top">Something happens.</td>
<td align="center" valign="top"><select id="testResult" name="testResult">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
<tr>
<td align="center" valign="top">2.</td>
<td align="left" valign="top">Do something else.</td>
<td align="left" valign="top">Something else happens.</td>
<td align="center" valign="top"><select id="testResult" name="testResult">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>
Through JavaScript, I would like to set the textarea box in the "Comments" column to enabled and to be required should a "Fail" or "N/A" be selected in the preceding "Actual Results" column.
How would I scale this to support numerous rows each featuring a selection and textarea with similar functionality?
this code can help you.
let trc = document.getElementsByClassName("testResultClass")
for(let i = 0;i < trc.length;i++) {
let elem = trc[i]
elem.onchange = (e) => {
let txbx = elem.parentElement.parentElement.getElementsByClassName("testResultBoxClass")[0]
if(elem.value == "Fail" || elem.value == "N/A"){
txbx.disabled = false
txbx.required = true
} else
txbx.disabled = true
txbx.required = false
}
}
<form method="post" action="">
<table>
<thead>
<tr>
<th align="center"><strong>Step</strong></th>
<th align="left"><strong>Instruction</strong></th>
<th align="left"><strong>Expected Result</strong></th>
<th align="left"><strong>Actual Result</strong></th>
<th align="left"><strong>Comments</strong></th>
</tr>
</thead>
<tr>
<td align="center" valign="top">1.</td>
<td align="left" valign="top">Do something.</td>
<td align="left" valign="top">Something happens.</td>
<td align="center" valign="top"><select id="testResult" name="testResult" class="testResultClass">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" class="testResultBoxClass" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
<tr>
<td align="center" valign="top">2.</td>
<td align="left" valign="top">Do something else.</td>
<td align="left" valign="top">Something else happens.</td>
<td align="center" valign="top"><select id="testResult" name="testResult" class="testResultClass">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" class="testResultBoxClass" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>
You can follow this code.
function checkComment()
{
var select = document.getElementById('testResult').options[document.getElementById('testResult').selectedIndex].text
var comment = document.getElementById("userComments");
if(select === "Fail" || select === "N/A")
{
comment.disabled = false;
} else {
comment.value = "";
comment.disabled = true;
}
}
<form method="post" action="">
<table>
<thead>
<tr>
<th align="center"><strong>Step</strong></th>
<th align="left"><strong>Instruction</strong></th>
<th align="left"><strong>Expected Result</strong></th>
<th align="left"><strong>Actual Result</strong></th>
<th align="left"><strong>Comments</strong></th>
</tr>
</thead>
<tr>
<td align="center" valign="top">1.</td>
<td align="left" valign="top">Do something.</td>
<td align="left" valign="top">Something happens.</td>
<td align="center" valign="top">
<select id="testResult" name="testResult" onChange="checkComment()">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>
I have a javascript function which will filter table rows based on a select box option value which is already working, Now i am trying to achieve a function which will filter rows based on the select box value + anytext after that value. Btw i am a novice with javascript.
my selectbox code:
<select name="filterdivision" id="filterdivision">
<option selected="selected" value="">Select Division</option>
<option value="Metals and Minerals">Metals and Minerals</option>
<option value="Industrial">Industrial</option>
<option value="Rail">Rail</option>
<option value="Corporate">Corporate</option>
<option value="GSC">GSC</option>
</select>
My table html
<table class="winner-data" width="100%">
<thead>
<tr>
<th class="sort" data-sort="name">Heading 1</th>
<th class="sort" data-sort="category">Heading 2</th>
<th class="sort" data-sort="division">Division/Region</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="name">IKG Mexico Management Team</td>
<td class="category">Customer</td>
<td class="division">Industrial</td>
</tr>
<tr>
<td class="name">Tubarão Brazil Site</td>
<td class="category">Customer</td>
<td class="division">Metals and Minerals</td>
</tr>
<tr>
<td class="name">Euridice Mason</td>
<td class="category">Customer</td>
<td class="division">Metals and Minerals</td>
</tr>
<tr>
<td class="name">Brazil Tax Team</td>
<td class="category">Customer</td>
<td class="division">Metals and Minerals Brazil</td>
</tr>
<tr>
<td class="name">M&M Bid and Contract Team</td>
<td class="category">Customer</td>
<td class="division">Metals and Minerals Central</td>
</tr>
</table>
My Javascript:
$('#filtercategory').change(function () {
var selection = this.value;
if($(this).val()!==""){
// filter items in the list
userList.filter(function (item) {
return (item.values().category == selection);
});
}else{
userList.filter();
return false;
}
});
The current function is filtering division: for example it will filter "Metals and Minerals" so i want it to filter "Metals and Minerals + anything"
It's currently filtering such that the category (loosely) equals the selection:
return (item.values().category == selection);
If you want to filter by if the division includes the selection, then use the .includes string method:
return item.values().division.toLowerCase().includes(selection.toLowerCase());
Or if you don't want to test for toLowerCase:
return item.values().division.includes(selection);
You may need a polyfill if you want to support old browsers.
I have a list of users from a web api which i've supplied the user with a search box to filter to make searching easy.
On the top side of the table too i've provided the total number of users returned by the api.
What i have to do is when the user starts typing and results are being filtered, the total number of displayed should also be updated
<div class="col-sm-9">
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="table">
<tr>
<td width="6%"><strong>Filter By</strong></td>
<td width="94%"> <select ng-model="queryBy">
<option value="$"></option>
<option value="Customer_Name">Name</option>
<option value="Address">Adddress</option>
<option value="Region">Region</option>
<option value="District">District</option>
</select> </td>
</tr>
<tr>
<td><strong>Search</strong></td>
<td> <div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search Customers" ng-model="query[queryBy]"/>
</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<img src="img/loader.gif" width="100" height="13" border="0" />
</div>
<table class="table table-striped table-hover">
<tr>
<td> </td>
<td> </td>
<td>Total Customers: {{users_list.length}}</td>
</tr>
<tr class="success">
<td><strong><a style="color: black; text-decoration: none" href="#/home" ng-click="clikme('Customer_Name')">Customer Name</a></strong></td>
<td><strong>Phone Number</strong></td>
<td><strong>Address</strong></td>
</tr>
<tr ng-repeat="item in users_list | filter: query ">
<td>{{item.Customer_Name}}</td>
<td>{{item.Phone_Number}}</td>
<td>{{item.Address}}</td>
</tr>
</table>
</div>
JS
.controller('app_users_ctrl',function($scope,$http,$location){
$scope.query = {};
$scope.queryBy = '$';
$http.post('http://websource.com/calls/app_users.php').success(function(data){
$scope.users_list=data
//console.log(JSON.stringify(data));
$scope.loading=false;
})
$scope.clikme= function(field){
$scope.myvar= order ? '-' + field : '+' + field;
order=!order;
}
})
Yo need to use lenght for the filtered result so try this.
change {{users_list.length}} for {{ (users_list | filter: query).length }}
I currently have two tables that is on top of each other. the front table only shows it's header and the body is hidden using the css "visibility:hidden". this table is using "position:absolute" to make it freeze in place, the table is a complete clone of the 2nd table.
As i was testing on IE, the dropdown and link on the tbody of the 2nd table is working fine but when i tested it on chrome, the 2nd table cannot be clicked as it was blocked by the hidden table body in-front of it.
Are there any alternatives that i can use to implement the freezing of headers on chrome?
Note: The data that will be loaded is dynamically with different sizes. the width of each column will be adjusted accordingly.
Here is a sample code but this works fine on fiddle but won't be working when used as html file and run on chrome: https://fiddle.jshell.net/3poz4o4q/3/
Added the whole HTML file that i tested with.
Got the jquery from here http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js
and saved it on the file name "jquery-1.9.1.min.js" and referenced it.
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script>
function onLoad() {
var cloneData = $('#actualData tr').clone(false);
$("#sampleData").append(cloneData);
var cloneHeader = $('#behindHeader tr').clone();
$("#showingHeader").append(cloneHeader);
$("#sampleData").css("visibility", "collapse");
$("#behindHeader").css("visibility", "collapse");
$("#tableHeader").css("position", "absolute");
}
</script>
<body onload="onLoad()">
<div class="table-header" id="tableHeader">
<table class="editableTable" id="editTable" border="1">
<thead id="showingHeader"/>
<tbody id="sampleData"/>
</table>
</div>
<div class="table-body" id="tableBody">
<table class="editableTable" id="bodytable" border="1">
<thead id="behindHeader">
<tr id="entity-header">
<th colspan="13">
<a id="Create Something">Create Something</a>
<a id="Create another thing">Create another thing</a>
Save
</th>
</tr>
<tr id="column-headers">
<th id="data link">data link</th>
<th id="data 1">data 1</th>
<th id="data 2">data 2</th>
<th id="data 3">data 3</th>
<th id="data 4">data 4</th>
<th id="data 5">data 5</th>
<th id="data 6">data 6</th>
<th id="drop down 1">drop down 1</th>
<th><span id="checkbox 1">checkbox 1</span></th>
<th id="drop down 2">drop down 2</th>
<th><span id="checkbox 2">checkbox 2</span></th>
<th id="drop down 3">drop down 3</th>
<th><span id="checkbox 3">checkbox 3</span></th>
</tr>
</thead>
<tbody id="actualData">
<tr id="actual id" class="modified">
<td ><a href="#" >Data ID</a></td>
<td >Data Description 1</td>
<td >Data Description 2</td>
<td >Data Description 3</td>
<td >Data Description 4</td>
<td >Data Description 6</td>
<td >Data Description 7</td>
<td >
<select>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
<td >
<div class="checkbox">
<input id="1" type="checkbox"><label for="1"></label>
</div>
</td>
<td >
<select>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select></td>
<td >
<div class="checkbox">
<input id="2" type="checkbox"><label for="2"></label>
</div>
</td>
<td >
<select disabled="disabled">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
<td >
<div class="checkbox" disabled="disabled">
<input id="3" type="checkbox" disabled="disabled"><label for="3" disabled="disabled"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
Please try 'div class="table-header" id="tableHeader" style="z-index:-1" ';
Put the header div to back;
1.) I have created a nested table, then what I want to do is when I click the 'Delete' button inside the child table, its row will be deleted.
2.) I have <select> tag. The problem is how can I put a validation which checks if the item type has been already selected by one customer, but this selected item can be also selected at the next Customer.
For example, Customer1 selects Iron. Now the Customer1 cannot choose the Iron type of item on the next item. Customer1 may also select Copper or Wood but not Iron. Then if I have Customer2 the Iron type of Item can be selectable.
Here's my code:
$(".addItem").on('click', function(e) {
$(this).closest('table').find(".item:last").after('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id=""><option value="">Iron</option><option value="">Copper</option><option value="">Wood</option></select></td></tr>');
});
$(".addCustomer").on('click', function(e) {
var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
var newCart = $('.cart:first').clone(true, true).wrap('td');
newCart.find('tbody').html("").html('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id=""><option value="">Iron</option><option value="">Copper</option><option value="">Wood</option></select></td></tr>');
$('.customer:last').append(newCart);
e.preventDefault();
});
$('.itemType').on('change', function() {
var selected = $(this)find('option:selected').val();
if ($(this).find('option:selected').val() === selected) {
alert("Item already selected.");
}
});
table,
td,
th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>PO</title>
<header>
<form id="panel">
</form>
</header>
<section id="I">
<table id='PO1' class="purchaseOrder">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table class='cart'>
<thead>
<tr>
<th>Delete</th>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr id='item1' class='item'>
<td><button>Delete</button></td>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
<td>
<select name="" class="itemType">
<option value="i">Iron</option>
<option value="c">Copper</option>
<option value="w">Wood</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='5'></td>
<td>
<button class="addItem">Add Item</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addCustomer">Add Customer</button>
</td>
</tr>
</tfoot>
</table>
</section>
<footer> </footer>
I have fixed the Delete issue. In terms of validation, answer my below question and I will fix the same.
Okay, I handled it now properly with an empty item and disabling the selected value on other item.
$(".addItem").on('click', function(e) {
var parent = $(this).closest('table');
var lastItem = parent.find(".item:last");
var newItem = $('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id="" class="itemType"><option value="-1"></option><option value="i">Iron</option><option value="c">Copper</option><option value="w">Wood</option></select></td></tr>');
if(lastItem && lastItem.length > 0) {
parent.find(".item:last").after(newItem);
} else {
parent.append(newItem);
}
fixNewSelectOption(newItem);
handleDeleteAction();
});
$(".addCustomer").on('click', function(e) {
var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
var newCart = $('.cart:first').clone(true, true).wrap('td');
newCart.find('tbody').html("").html('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id="" class="itemType"><option value="-1"></option><option value="i">Iron</option><option value="c">Copper</option><option value="w">Wood</option></select></td></tr>');
$('.customer:last').append(newCart);
handleDeleteAction();
e.preventDefault();
});
$(document).on('click', '.item button', function(){
if($(this).closest('table').find('.item button').length > 1) {
$(this).closest('tr').remove();
}
handleDeleteAction();
});
$(document).on('change', '.itemType', function(){
fixSelectOption($(this));
});
function handleDeleteAction() {
$('table.cart').each(function(){
var cart = $(this);
var deleteButtons = cart.find('.item button');
deleteButtons.prop('disabled', deleteButtons.length <= 1);
});
}
function fixSelectOption(elm) {
var selected = elm.val();
var options = elm.find('option[value!="' + selected + '"]');
var elms = elm.closest('table').find('.itemType').not(elm);
elms.each(function(){
var current = $(this);
if(current.val() === selected){
current.val('-1');
}
options.each(function(){
var optValue = $(this).val();
if(optValue !== '-1' && !$(this).prop('disabled')){
current.find('option[value="' + optValue + '"]').prop('disabled', false);
}
});
if(selected !== '-1'){
current.find('option[value="' + selected + '"]').prop('disabled', true);
}
});
}
function fixNewSelectOption(elm) {
var elms = elm.closest('table').find('.itemType').not(elm);
elms.each(function(){
var current = $(this);
if(current.val() !== '-1'){
elm.find('option[value="' + current.val() + '"]').prop('disabled', true);
}
});
}
table,
td,
th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>PO</title>
<header>
<form id="panel">
</form>
</header>
<section id="I">
<table id='PO1' class="purchaseOrder">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table class='cart'>
<thead>
<tr>
<th>Delete</th>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr id='item1' class='item'>
<td><button disabled>Delete</button></td>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
<td>
<select id="select" class="itemType">
<option value="i">Iron</option>
<option value="c">Copper</option>
<option value="w">Wood</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='5'></td>
<td>
<button class="addItem">Add Item</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addCustomer">Add Customer</button>
</td>
</tr>
</tfoot>
</table>
</section>
<footer> </footer>
To delete that respective row on click of any "Delete" button, could you try using this
$(document).on('click', '.item button', function(){
$(this).parent().parent().remove();
});
Here is a Codepen
Another thing I noticed, what are you trying to do in your $('.itemType').on('change', function() ? Because as of now all you are doing is literally checking the value of the selected option to ITSELF which always obviously will be true.
you have to pass an element id which will be deleted from both customer's cart and selected row like this;
<tr class="item"><td><button data-id="1">Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id=""><option value="">Iron</option><option value="">Copper</option><option value="">Wood</option></select></td>
jquery part:
$("tr.item button").click(function(){
var item_to_remove = $(this).attr("data-id");
var row = $(this).parent().parent();
$.ajax({
url: "url to cart handler for delete item",
data: "id="+item_to_remove,
type: "post",
success: function(data){
row.remove();
},
error: function(){
console.log("ajax req for delete failed");
}
});
});
For the deletion of rows I added checboxes.
PLUNKER
SNIPPET
table {
table-layout: fixed;
}
table,
td,
th {
border: 1px solid black;
}
.name,
.brand,
.color {
width: 10%;
}
.age,
.address,
.pay,
.qty,
.size {
width: 5%;
}
.cart th:first-of-type {
width: 2.5%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>PO</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<section id="I">
<table id='PO1' class="purchaseOrder">
<thead>
<tr>
<th class='name'>Name</th>
<th class='age'>Age</th>
<th class='address'>Address</th>
<th class='pay'>Pay</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td>Jon Doe</td>
<td>30</td>
<td>Earth</td>
<td>Credit</td>
<td>
<table class='cart'>
<thead>
<tr>
<th> </th>
<th class='brand'>Brand</th>
<th class='qty'>Qty</th>
<th class='size'>Size</th>
<th class='color'>Color</th>
</tr>
</thead>
<tbody>
<tr id='item1' class='item'>
<td>
<input class="chx" name="chx" type="checkbox">
</td>
<td>New Item</td>
<td></td>
<td></td>
<td>
<select name='color'>
<option value='black'>Black</option>
<option value='white'>White</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="remItem" onclick='remItem(this)'>-</button>
</td>
<td colspan='3'></td>
<td>
<button class="addItem" onclick='addItem("itemTemplate", this)'>+</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addCustomer">Add Customer</button>
</td>
</tr>
</tfoot>
</table>
</section>
<footer>
<template id="cartTemplate">
<table class='cart'>
<thead>
<tr>
<th> </th>
<th class='brand'>Brand</th>
<th class='qty'>Qty</th>
<th class='size'>Size</th>
<th class='color'>Color</th>
</tr>
</thead>
<tbody>
<tr class='item'>
<td>
<input class="chx" name="chx" type="checkbox">
</td>
<td>New Item</td>
<td></td>
<td></td>
<td>
<select name='color'>
<option value='black'>Black</option>
<option value='white'>White</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="remItem" onclick='remItem(this)'>-</button>
</td>
<td colspan='3'></td>
<td>
<button class="addItem" onclick='addItem("itemTemplate",this)'>+</button>
</td>
</tr>
</tfoot>
</table>
</template>
<template id='itemTemplate'>
<tr class="item">
<td>
<input class="chx" name="chx" type="checkbox">
</td>
<td>New Item</td>
<td></td>
<td></td>
<td>
<select name="color">
<option value="black">Black</option>
<option value="white">White</option>
</select>
</td>
</tr>
</template>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(".addCustomer").on('click', function(e) {
var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
var newCart = newClone('cartTemplate');
$('.customer:last').append(newCart);
e.preventDefault();
});
function newClone(id) {
var template = document.getElementById(id);
var clone = document.importNode(template.content, true);
return clone;
}
function addItem(id, origin) {
var newItem = newClone(id);
$(origin).closest('table').append(newItem);
}
function toggle(origin) {
var chxList = $(origin).closest('table').find('.chx:checked');
chkList.click(function() {
chkList.prop('checked', origin.checked)
})
}
function remItem(origin) {
var chxList = $(origin).closest('table').find('.chx:checked');
chxList.each(function(idx, obj) {
obj.closest('.item').remove();
});
}
</script>
</body>
</html>
I know that you got answer on your question, but I couldn't notice some bad patterns in your code. You probably heard for best practices phrase and how things needs to be done on right way. By that I want to give one suggestions. Avoid using HTML in Javascript code whenever it is possible because it makes the application less well-structured.
By that I want to introduce you to templates.
Example how can we optimize your code (from accepted answer):
Wrap everything form newItem variable in script tag and put somewhere in your body:
<script id="newItem-template" type="text/x-custom-template">
<tr class="item"><td><button>Delete</button></td>
<td>New item</td><td></td><td></td><td></td><td>
<select name="" id="" class="itemType"><option value="-1"></option>
<option value="i">Iron</option><option value="c">Copper</option>
<option value="w">Wood</option></select></td></tr>
</script>
Browser will simply ignore this, until you call html() method to return that content.
So instead of this:
var newItem = $('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id="" class="itemType"><option value="-1"></option><option value="i">Iron</option><option value="c">Copper</option><option value="w">Wood</option></select></td></tr>');
In your javascript file you will have only this:
var newItem = $('#newItem-template').html();
Here is optimized working code: jsFiddle
This is jQuery way to manage with templates, but there is powerful template engines if your project get bigger:
JavaScript templating engines