Dynamically Add and Remove Table Rows - javascript

I am both adding and removing table rows with jQuery. I can add rows easily, but am having trouble removing ones that were created.
You can view the page in action here: http://freshbaby.com/v20/wic/request_quote.cfm, with the relevant code pasted below.
HTML
<table style="width:600px;" id="product-list" summary="Lists details about products users wish to purchase">
<thead valign="top" align="left">
<tr>
<th>Products</th>
<th>Language</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody valign="top" align="left">
<tr>
<td>
<cfselect query="getProductListing" name="product" size="1" display="name" value="name" queryPosition="below">
<option value=""></option>
</cfselect>
</td>
<td>
<select name="language" size="1">
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
</td>
<td>
<cfinput name="quantity" required="yes" message="Enter your desired quantity" size="10" maxlength="3" mask="999">
</td>
<td valign="bottom">Add Another Product</td>
</tr>
</tbody>
</table>
JavaScript:
<script>
$(function() {
var i = 1;
$(".addrow").click(function() {
$("table#product-list tbody > tr:first").clone().find("input").each(function() {
$(this).attr({
'id': function(_, id) { return id + i },
'value': ''
});
}).end().find("a.addrow").removeClass('addrow').addClass('removerow').text('< Remove This Product')
.end().appendTo("table#product-list tbody");
i++;
return false;
});
$("a.removerow").click(function() {
//This should traverse up to the parent TR
$(this).parent().parent().remove();
return false;
});
});
</script>
When I click the link to remove the row that said link is contained in, nothing happens. No script error, so it has to be logic.

Try this instead
$("#product-list").on('click','a.removerow',function(e) {
e.preventDefault();
//This should traverse up to the parent TR
$(this).closest('tr').remove();
return false;
});
This will ensure that newly created elements can be removed. When you use the $("a.removerow").click(.. it only affects the elements in existence (none) and not the ones that will be dynamically created.

Related

How to delete a table row by id except specific id

I have atable where I want to delete all its rows except some rows with specific ids.
I did the follwoing:
for(var y=0; y<table.rows.length; y++)
{
console.log("deleting row "+ y);
var initialRow=document.getElementById("initial-row");
if (table.rows[y].id!=initialRow)
{
table.deleteRow(y);
console.log("row deleted");
}
else continue;
}
But this did not work. Any suggestions?
EDIT:
Here is the HTML table:
<table align='center' cellspacing=1 cellpadding=1 id="data-table" border=1>
<tr id="head">
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>
<tr id="initial-row">
<td><input type="text" id="text-field"></td>
<td>
<select name="levels-list" id="levels-list">
<option value="A" id="option-1">A</option>
<option value="B" id="option-2">B</option>
<option value="C" id="option-3">C</option>
</select>
</td>
<td><input type="button" class="add" id="add-button" value="Add"></td>
</tr>
</table>
I am adding rows dynamically int the javascript. Then, I need to delete a row, and refresh the whole table as the added rows ids are dynamic. In order to refresh the table, I want to delete all the old rows except the header and the initial row that was in the HTML page originally. Could not do this correctly.
You're comparing an element id (a string) to a DOM element object. You can remove the getElementById call and simply do:
if (table.rows[y].id!="initial-row")

Disable a select box based on the input of another select box

I'm wanting to disable one select box when the other select box == 1 and visa versa. I know how to do this with IDs, but where this gets tricky is that the IDs and names of the select boxes that I'm trying to target are getting dynamically generated by php. So I need to be able to target the select elements without using the unique, numeric number inside of it. I've tried a few things before this such as the ":contains" or ":input" selector to narrow it down by tr but to no avail so I resulted to using wildcards but I'm still not able to get it working. I'm fairly new to jQuery so it's probably just a simple syntax error.
var update_tickets = function() {
if ($("select[id$='Online']").selectedIndex == "1") {
$("select[id$='On-site']").prop('disabled', true);
} else if ($("select[id$='On-site']").selectedIndex == "1") {
$("select[id$='Online']").prop('disabled', true);
} else {
$("select[id$='Online']").prop('disabled', false);
$("select[id$='On-site']").prop('disabled', false);
}
};
$(update_tickets);
$("select[id$='On-site']").change(update_tickets);
$("select[id$='Online']").change(update_tickets);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="em-tickets fusion-table table-1 table" cellspacing="0" cellpadding="0">
<tr>
<th class="em-bookings-ticket-table-type">Location</th>
<th class="em-bookings-ticket-table-price">Price</th>
<th class="em-bookings-ticket-table-spaces">Spaces</th>
</tr>
<tr class="em-ticket" id="em-ticket-14">
<td class="em-bookings-ticket-table-type">On-site Enrollment</td>
<td class="em-bookings-ticket-table-price">$50.00</td>
<td class="em-bookings-ticket-table-spaces boyyyyyyy">
<select name="em_tickets[14][spaces]" class="em-ticket-selection" id="em-ticket-spaces-14-On-site">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>
<tr class="em-ticket" id="em-ticket-16">
<td class="em-bookings-ticket-table-type">Online registration</td>
<td class="em-bookings-ticket-table-price">$50.00</td>
<td class="em-bookings-ticket-table-spaces boyyyyyyy">
<select name="em_tickets[16][spaces]" class="em-ticket-selection" id="em-ticket-spaces-16-Online">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>
</table>
You were trying to use selectedIndex to get the value of your select elements, but that's vanilla JS which works on DOM nodes, not jQuery selectors, and doesn't return a string (just the index). (The proper way to access that would be $('select')[0].selectedIndex.)
Instead, use .val() to return the string value of an input/select element using jQuery.
Here's a fixed demo:
var update_tickets = function() {
if ($("select[id$='Online']").val() == "1") {
$("select[id$='On-site']").prop('disabled', true);
} else if ($("select[id$='On-site']").val() == "1") {
$("select[id$='Online']").prop('disabled', true);
} else {
$("select[id$='Online']").prop('disabled', false);
$("select[id$='On-site']").prop('disabled', false);
}
};
$(update_tickets);
$("select[id$='On-site']").change(update_tickets);
$("select[id$='Online']").change(update_tickets);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="em-tickets fusion-table table-1 table" cellspacing="0" cellpadding="0">
<tr>
<th class="em-bookings-ticket-table-type">Location</th>
<th class="em-bookings-ticket-table-price">Price</th>
<th class="em-bookings-ticket-table-spaces">Spaces</th>
</tr>
<tr class="em-ticket" id="em-ticket-14">
<td class="em-bookings-ticket-table-type">On-site Enrollment</td>
<td class="em-bookings-ticket-table-price">$50.00</td>
<td class="em-bookings-ticket-table-spaces boyyyyyyy">
<select name="em_tickets[14][spaces]" class="em-ticket-selection" id="em-ticket-spaces-14-On-site">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>
<tr class="em-ticket" id="em-ticket-16">
<td class="em-bookings-ticket-table-type">Online registration</td>
<td class="em-bookings-ticket-table-price">$50.00</td>
<td class="em-bookings-ticket-table-spaces boyyyyyyy">
<select name="em_tickets[16][spaces]" class="em-ticket-selection" id="em-ticket-spaces-16-Online">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>
</table>
Try this:
$('body').on('change', 'select[id$="On-site"]', update_tickets);
$('body').on('change', 'select[id$="Online"]', update_tickets);

jQuery/javascript add and remove classes on change

I am trying to create an change event so when a user selects an option from a dropdown, the corresponding row in the table is highlighted (via adding a class).
I have tried two things.. jQuery and javascript.
Here is my jQuery:
$("#phoneType").change(function() {
if (document.getElementById("optionSelect").value == 2) {
var selectedStatus = parseInt(document.getElementById("optionSelect").value);
$('.clickable-row').removeClass("cra-children-item-selected");
$(this).addClass('cra-children-item-selected');
}
});
Note that I am using javascript for the first two lines because I kept getting "val() is not a function" errors.
I tried using javascript to simply add/remove classes, but it doesn't seem to like my syntax...
document.getElementsByClassName("clickable-row").className = "clickable-row";
document.getElementById(selectedStatus).className = "clickable-row item-selected");
What I don't understand is why the jQuery isn't working... I have another function that works perfectly:
$(".clickable-row").click(function(event) {
console.log($(this).attr('id'));
$('.clickable-row').removeClass("item-selected");
$(this).addClass('item-selected');
});
Why is the code above (on click) working, but not my on change function?
Here is HTML:
<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>
<tr id="6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>
</select>
Check this, it's actually working.
$("#phoneType").change(function() {
var val = $(this).val();
$("tr").removeClass("selected");
$("#tr" + val).addClass("selected");
})
.selected {border: solid 1px #000; background-color:blue;};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="tr1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>
<tr id="tr6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>
</select>
Based on the HTML you presented, it seems the conditional is never true:
if (document.getElementById("optionSelect").value == 2) {
and should be rewritten referring to the select element for an option value that actually exists
$("#phoneType").change(function() {
var t = $(this),
tVal = t.val();
if (tVal === '3') {
console.log(tVal);
}
});
I would highly recommend you don't try to use id="1" as your row IDs. Use HTML5 data attributes instead:
<tr class="clickable-row" data-id="6">
Then simple jQuery which will select the row:
$("#phoneType").change(function() {
var id = parseInt($(this).val());
var $row = $('.clickable-row[data-id="' + id + '"]');
$('.clickable-row').removeClass("cra-children-item-selected");
if (id > 0) {
$row.addClass('cra-children-item-selected');
}
});

Using html select to make ajax refresh to filter table

As mentioned in the title, I want to know how to make an HTML select box to make an ajax request and use that to filter table. I have searched a lot and was not able to find a good solution.
How can i get it to filter??
My source code on jsfiddle.net:
<select>
<option value="all">All</option>
<option value="tim">Tim</option>
<option value="cook">Cook</option>
</select>
<br>
<br>
<br>
<table border="1">
<tr>
<th>Name</th>
<th>Year</th>
</tr>
<tr>
<td>Tim</td>
<td>2015</td>
</tr>
<tr>
<td>Cook</td>
<td>2015</td>
</tr>
</table>
Your example is a little odd because you are filtering down to only one row, but here is how you can make it work.
First, give your <select> and <table> each an id. I chose something generic:
<select id='column-select'>
<option value="all">All</option>
<option value="tim">Tim</option>
<option value="cook">Cook</option>
</select>
<br>
<br>
<br>
<table id='data' border="1">
<tr>
<th>Name</th>
<th>Year</th>
</tr>
<tr>
<td>Tim</td>
<td>2015</td>
</tr>
<tr>
<td>Cook</td>
<td>2015</td>
</tr>
</table>
Now, just use some Jquery to filter out the rows you don't want when the column changes
$(document).ready(function() { // Do nothing until document is ready
$("#column-select").change(function() { // On <select> change...
var selection = $("#column-select").val();
if (selection == "all")
{
$("#data tr").show(); // Show all rows
} else
{
$("#data tr").each(function() { // For each row
if ($(this).find("th").length == 0) // If this is not a heading row
{
if ($(this).find("td").eq(0).text().toLowerCase() == selection)
{
// Show rows where the first column matches
$(this).show();
} else
}
// Hide rows where the first column does not match
$(this).hide();
}
}
});
}
});
});
Here is a jsfiddle to demonstrate.

Jquery clone event handling not working

I am trying to retrieve the index of the row when the user has clicked on the check box. It works for the codes that I have written for the first two rows when the check box are ticked. However when I tried to insert more rows, the index that I retrieve after the check box is tick gave me a false result, i.e -1.
Can anyone help me with this? I have research for a long time and I still can't get it to work. I tried setting the clone argument to true but it still failed.
//Insert a new row after the last row in the table
$("#add").click(function() {
clickCount++;
var numRows = $('#getnumRows').val();
var index = $('#mytable tbody>tr:last td:nth-child(2)').text();
var i=Number(index);
var intNumRow=Number(numRows)+i;
for (; i < intNumRow; i++)
{
$('#mytable tbody>tr:last').clone(true,true).insertAfter('#mytable tbody>tr:last');
//$("#mytable tbody>tr>td:last td:nth-child(1)").children('input').addClass('chkbox');
$('#mytable tbody>tr:last td:nth-child(2)').text(i+1);
var input= $('#mytable tbody>tr:last').find('td').children('input');
input.val('');
input.attr("checked", false);
}
});//end click tag
var chkBox=$("#mytable tbody>tr>td ").children('.chkbox');
chkBox.on('click',null,function ()
{
var isChecked=$('.chkbox');
if (isChecked.is(':checked')) {
var index=chkBox.index(this);
alert(index); //added alert to intentional check the index retrieve from the checked checkbox of the row![enter image description here][1]
var insertNewRow=ajaxNewRowInfo(partNo,serviceName);
insertNewRow.success(function(data)
{
var row=$('#mytable tbody>tr').eq(index);
for(i=2;i<data.length;i++)
{
$(row.children(' td:nth-child('+(i+3)+')')).children('input').val(data[i]);
}
});//insertNewRow end tag
}//if end tag
else{
alert('You Un-Checked it');
}
});//chckbox end tag
<!--Add rows -->
<div class="form-group">
<label class="col-sm-1 control-label" style='margin-top:0.6%;'>Rows</label>
<input class="form-control" style='width:100px;' type='text' id='getnumRows' placeholder='No.of Rows'>
<button type="submit" id="add" class="btn btn-success" style="margin-left:200px; margin-top:-35px; ">Add rows</button>
</div>
<!------------->
<tbody>
<tr id='tableRow1'>
<td><input type="checkbox" class='chkbox'/></td>
<td> 1</td>
<td>
<select class="form-control" class="serviceDropdown">
<option></option>
<option value='1'>Oil Change Service</option>
<option value='2'> Tyre Service</option>
<option value='3'>Vehicle Service</option>
<option value='4'>Battery Service</option>
<option value='5'>Clutch Brake Service</option>
<option value='6'>Suspension Service</option>
<option value='7'>Brake Service</option>
<option value='8'>Tuning and Diagnostic Service</option>
</select>
</td>
</tbody>
[The first image shows the alert box which the index of the check box row is able to retrieved. The second image shows when new rows are added through cloning, the index of the alert box shows -1.]
http://postimg.org/image/913o3lyuv/
http://postimg.org/image/fg2p0a5kn/
Consider Element Indexing w/ jQuery Index()
Ex. http://codepen.io/anon/pen/XJRJEg
If .index() is called on a collection of elements and a DOM element or
jQuery object is passed in, .index() returns an integer indicating the
position of the passed element relative to the original collection.
HTML
<table id="hi">
<thead>
<tr>
<th>Heading</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
jQuery
$( "table#hi tbody tr" ).click(function() {
var index = $( "table#hi tbody tr" ).index( this );
alert(index);
});
DOCUMENTATION

Categories