Show/Hide div with Dropdown Option - javascript

Relatively new to JS, need some help in getting a div to hide/show properly based on a dropdown choice.
If dropdown='no', div should be hidden. If dropdown='yes', div should show. I got the JS to work correctly at first, but once the form saves and I reopen it, the div disappears. I believe I've written the JS wrong by telling the div to show only on change. But I'm too new to know - help!
$('.analysisPub').on('change', function() {
if (this.value === "Yes") {
$("#analysis").show();
} else {
$("#analysis").hide();
}
});
.analysis {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Does this publication include analysis in any form?</td>
<td class="analysisPub" id="analysisPub" name="analysisPub">
<select>
<option value>Yes</option>
<option value>No</option>
</select>
</td>
</tr>
</table>
<div id="analysis" class="analysis">
<table>
<tr>
<td>Test Name</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>
</table>
</div>


There were two main mistakes in your code. They are as follows -
1st - you were targetting the <td> rather than the <select>
2nd - your dropdown options were not having values
I've fixed them now. It works as u mentioned in the description.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#dropdownAnalysis').on('change', function() {
if (this.value == 'Yes')
{
$("#analysis").show();
}
else
{
$("#analysis").hide();
}
});
});
</script>
<table>
<tr>
<td>Does this publication include analysis in any form?</td>
<td class="analysisPub" id="analysisPub" name="analysisPub">
<select id="dropdownAnalysis">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
</table>
<div id="analysis" class="analysis">
<table>
<tr>
<td>Test Name</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>
</table>
</div>

Related

Populate html table with selected options

please help me learn. I'd like to learn how to populate the first column of a table with selected options as seen in the following code. Please feel free to use an example of your own if that's easier
<html>
<label for="foods">What do you want to eat?</label><br>
<select id="foods" name="foods" size="7" multiple>
<option value="1">Burrito</option>
<option value="2">Cheeseburger</option>
<option value="3">Double Bacon Burger Supreme</option>
<option value="4">Pepperoni Pizza</option>
<option value="5">Taco</option>
</select>
<table id="myTable" border="1">
<tr>
<td>First row</td>
<td>First row 2nd cell</td>
</tr>
<tr>
<td>Second row</td>
<td>more stuff</td>
</tr>
</table>
<br>
<button name="order" id="order" onclick="doTheInsert()">
Order Now
</button>
<p id="output">
</p>
</html>
<script>
let itemList = document.getElementById("foods");
let collection = itemList.selectedOptions;
function doTheInsert() {
var newRow=document.getElementById('myTable').insertRow();
newRow.innerHTML="<td>itemList.selectedOptions</td>";
}
</script>

Just a little edit in script tag
Using an itemList.value return a value of selected options
<html>
<label for="foods">What do you want to eat?</label><br>
<select id="foods" name="foods" size="7" multiple>
<option value="Burrito">Burrito</option>
<option value="Cheeseburger">Cheeseburger</option>
<option value="Double Bacon Burger Supreme">Double Bacon Burger Supreme</option>
<option value="Pepperoni Pizza">Pepperoni Pizza</option>
<option value="Taco">Taco</option>
</select>
<table id="myTable" border="1">
<tr>
<td>First row</td>
<td>First row 2nd cell</td>
</tr>
<tr>
<td>Second row</td>
<td>more stuff</td>
</tr>
</table>
<br>
<button name="order" id="order" onclick="doTheInsert()">
Order Now
</button>
<p id="output">
</p>
</html>
<script>
let itemList = document.getElementById("foods");
function doTheInsert() {
var newRow=document.getElementById('myTable').insertRow();
newRow.innerHTML=`<td>${itemList.value}</td>`;
}
</script>

How to append Html in Jquery next method

I have the following HTML.
<td>
<table class="position">
<tbody>
<tr class="position-numbers">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<script>
let cloneTech = jquery('td').closest('select');
findNext.html(`<h1>hello</h1>`);
</script>
When I click on td I need to find very next select and append the html.
The next().html() is not working on this.

closest only works upward in the dom, if you want to find elements that are nested in an element you need to use .find('select')
This returns all elements that are inside an element, in your case you only have one select inside td so this should work for you.
you also shouldn't use .html() here because this sets the innerHTML, if you want to replace the select then use .replace(), if you want to insert it after the select, use .after()
let cloneTech = jquery('td').find('select');
findNext.after(`<h1>hello</h1>`);

if you click td and you are using jquery, you can make the next:
$(".select-technique").on("click", function(){
$(this).children("select").html(`<h1>hello</h1>`);
})
Or
$(".select-technique").on("click", function(){
$(this).find("select").html(`<h1>hello</h1>`);
})

This will put the h1 tag before the next select tag after you click a td.
<script>
$(document).ready(function () {
$('td').click(function () {
$(this).next().find('select').prepend('<h1>hello</h1>');
});
});
</script>
The html result of this <select><h1>hello</h1></select>. If you want the h1 tags outside the select do this instead
<script>
$(document).ready(function () {
$('td').click(function () {
$(this).next().find('select').before('<h1>hello</h1>');
});
});
</script>
The html result of this <h1>hello</h1><select></select>.

You can do something like this below
<table border="1" cellpadding="5">
<tr>
<td>
<table class="position" border="1" cellpadding="5">
<tbody>
<tr class="position-numbers">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
</tr>
</table>
<script>
$('td').on('click', function(){
$(this).next('td.select-technique').find('select').css('background','yellow').html('<option>Options</option>');
})
<script>
See the jsfiddle link https://jsfiddle.net/mgnwvrpj/3/

multiple select filter in javasvript

i am using to multiple select filter, i am trying multi select and filter in my table, but i have an problem, if i select only one value data are filter and show in my table but when i select multiple values data are not filter and show.
function filterText() {
var rex = new RegExp($('#filterText').val());
alert(rex);
if (rex == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" onchange='filterText()' name="filterText[]">
<option disabled selected>Select</option>
<option value='1'>Lower Case</option>
<option value='2'>Upper Case</option>
<option value='all'>All</option>
</select>
<table>
<tr class="content">
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>the Bird</td>
<td>Upper Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Upper Case</td>
</tr>
</table>
I just want if i select Lowercase(value=1) and Uppercase(value=2) show both table.
Thanks.

Here is a fixed code.
$('#filterText').val() returns an array .join('|') makes the regex search either of the text available
function filterText() {
var rex = new RegExp($('#filterText').val().join('|'));
alert(rex);
if (rex == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" onchange='filterText()' name="filterText[]">
<option disabled selected>Select</option>
<option value='Lower Case'>Lower Case</option>
<option value='Upper Case'>Upper Case</option>
<option value='all'>All</option>
</select>
<table>
<tr class="content">
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>the Bird</td>
<td>Upper Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Upper Case</td>
</tr>
</table>

jquery - how to move td to another td

I have a table like this.
<table>
<tr>
<td>A</td>
<td><select id="B" name="B">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td class="sample">F: will hide/show</td>
<td class="sample">G: will hide/show</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td class="id1">J</td>
<td class="id1">K</td>
<td>L</td>
</tr>
<tr>
<td>M</td>
<td class="id2">N</td>
<td class="id2">O</td>
<td>P</td>
</tr>
</table>
Then, whenever I change the value in <td>B select option , <td>F and <td>G will hide..
It will then move up belows <td>...
<td>J & <td>K to <td>F & <td>G ,
<td>N & <td>O to <td>J & <td>K ,
Opposite happens if <td>F and <td>G will be shown.. other <td> will move down
here is the jquery ive started.
$('select#B').change(function(event) {
if (this.value == '2') {
$(".sample").show();
} else {
$(".sample").hide();
}
});
http://jsfiddle.net/rucsh/40/

$('select#B').change(function(event) {
var clone = $('td.id1').clone();
var clone2 = $('td.id2').clone();
if (this.value == '2') {
$(".sample, td.id1, td.id2").show();
$('.clone').remove();
} else {
$(".sample, td.id1, td.id2").hide();
$(clone).insertAfter('.sample:last').addClass('clone');
$(clone2).insertAfter('.id1:last').addClass('clone');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>A</td>
<td><select id="B" name="B">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td class="sample">F: will hide/show</td>
<td class="sample">G: will hide/show</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td class="id1">J</td>
<td class="id1">K</td>
<td>L</td>
</tr>
<tr>
<td>M</td>
<td class="id2">N</td>
<td class="id2">O</td>
<td>P</td>
</tr>
</table>

High-level instructions,
Clone the target element you want to move
Save it variable
Remove the original element
Insert the cloned element (in step 2) to the desired location.
All above steps can be easily competed using jQuery.

How can I identify a specific item in <select> and add a delete button each row in jquery

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

Categories

Resources