We Keep Coding

remove the option selected in one dropdown list field and don't show in other dropdown list present in that row not working- jquery

I have a html table with multiple columns, in two columns i'm displaying the dropdown list. When user selects the value from one dropdown list(Select Product1
or Select Product2 dropdown list), i want to remove the option selected in one dropdown and dont show that option in the other dropdown list...
Below sample code works when the class name is same for all the dropdown list available in the table(Select Product1,Select Product2), but in my case
the class name for the dropdown list is same for each colum in the table which breaks the below code.
var $combo = $(".combo");
$combo.on("change", function () {
var select = this,
selected = $("option:selected", this).text();
$combo.each(function (_, el) {
if (el !== select) {
$("option", el).each(function (_, el) {
var $el = $(el);
if ($(el).text() === selected) {
$el.remove();
}
});
}
});
});
Sample Demo : http://plnkr.co/edit/VSdhVfhyIfI0rV6efrZv?p=preview
In the above demo, when user selects product "laptop" from one dropdown list for one row, the option "laptop" should not be shown in the other dropdown list present in that row...

Look in same row instead of looping over all the selects in the table. ALso would be simpler to match values
$combo.on("change", function() {
var $sel = $(this),
val = $sel.val();
$sel.parent().siblings().find('.combo option[value=' + val + ']').remove()
});
Note however that you have a different issue also whereby if user changes one that was previously selected you don't have the ability to re-insert one.
Should consider keeping a clone of all the options stored in a variable so you can look for the missing one during subsequent changes

Calculating cumulative price on checkbox checked event and changing on select option

I have a set of check boxes that each and every one is related to a specific row which contains a two drop-downs and a quantity spinner. The first drop-down is for selecting an item and second one for selecting a size of that item based on price. The spinner is for selecting the quantity of the item needed.
I need to count the total price of selected items when a check-box is checked, and on change of the drop-down boxes. Finally, the accumulative price should be displayed in a label for each click.
What I have tried so far is here..
function priceCounting(prcField, qtyField) {
var sum = 0;
var qty = parseInt(qtyField);
$(".chkbxPkgCat:checked").each(function(){
var untPrc = parseFloat(prcField.pop());
sum = sum+ (qty * untPrc);
$(".lblAccumPrice1").text(sum);
});
}
On change of check-box, I am calling the function as follows..
$(".chkbxPkgCat").change(function(){
var itm = $(this).parent().parent().next().next().find(".form-control").val();
var qty = $(this).parent().parent().next().next().next().find(".form-control").text();
priceCounting(itm,qty);
});
Also, this is for item drop down on change event..
$("#itemSlct").change(function () {
priceCounting($("#itemSlct option:selected").text(), $("#itmQty").val());
});
Same way, I am calling this on-change of spinner and the price dropdown.
But I am not getting the correct accumulative price generated and also I need to deduct the price if it is unchecked a check-box which is checked previously. Anyone can be helpful with this please?

add text input on certain column table when clicked

I'm quite new in jquery table . I have a code that will add text input in certain column that I clicked . In my case ,the column is number 9th .Below is my code :
$('#PtptnFileTblId_1').on( 'click', 'tbody td:not(:first-child)', function (e) {
var id = $(this).attr('id');
var file_id = $(this).attr('name');
var code = $(this).text();
var textrowId = $(this).children("td:nth-child(9)");
textrowId.html("<input type='text' id='callerid' name='callerid' style='width:100px;' value=''/>");
} );
After click on certain row ,I want its column number 9th will add some text fields that enable me to edit its text but the problem is my code seem not working. Before this I use the same code but different ways and it worked.Please help me with my code above .Any help will greatly appreciate

In your event handler, $(this) refers to the cell that was clicked. You can use closest('TR') to retrieve the table row:
$('#PtptnFileTblId_1').on('click', 'tbody td:not(:first-child)', function (e) {
...
var cell = $(this).closest('TR').children('td:nth-child(9)');
cell.html("<input type='text' id='callerid' name='callerid' style='width:100px;' value='' />");
});

How to get TD from next row with same index as current TD

I have a large HTML table where all rows of the body have the same structure.
Within this table there are editable TDs (which have the class "editable" and contain a contenteditable div) and non-editable TDs (which dont't have the class "editable" and do not contain a div).
Now I am trying to get the TD from the next row that has the same index as the current (closest) TD.
The below code gives me the correct index of my current TD within its row (and looking only at editable TDs).
Can someone tell me how I can get the equivalent TD of the next row ?
My jQuery:
$(document).keydown(function(e) {
var current = $(e.target);
var editables = $(current).closest('tr').find('td.editable');
var count = editables.length;
alert( editables.index($(current).closest('td')) ); // for testing
// ...
});
Instead of the alert I am looking for something like the following:
$(current).closest('tr').next('tr').find( /* the td with class editable AND the index matching the above */ );
Example:
If I am currently on the 4th editable TD in a row I would then need the 4th editable TD in the next row.

Try using :eq() like
$(document).keydown(function(e){
var current = $(e.target);
var editables = current.closest('tr').find('td.editable');
var count = editables.length;
var index = editables.index(current.closest('td'));
current.closest('tr').next('tr').find('td:eq('+index+')');
});
As commented above, you can use current instead of $(current)

How to remove row based on clicking on a separate div in Jquery/Javascript?

I want to know the best way to accomplish the following.
I have a table:
<table>
<tr><td>1</td><td>Some1</td></tr>
<tr><td>2</td><td>Some2</td></tr>
<tr><td>3</td><td>Some3</td></tr>
</table>
When I click on a TD (1,2,or 3), then a div is visible with id "#removediv" that has some basic text like "Remove". I click on the div, and the row that I had originally clicked on to get the div to show, is removed.
I imagine I would have to pass some information about the row or index to the "#removediv" object so that #removediv event handler would know which row to remove. Not sure how to best go about doing this.

var remove = null;
var caller = null;
$(function() {
remove = $('#removediv');
$('td').click(function() {
caller = $(this).parent('tr');
remove.show();
});
remove.click(function() {
caller.remove();
$(this).hide();
});
});