I have a two datatables and have this function to move rows from one to the other, it works perfectly as is, but I want to trigger the action not by clicking the row but by clicking a button, tried changing it but won't work.
...
stockTable.on('click', 'tr' ,function() { //'#toggle' selector instead 'tr'
var $row = $(this); // $(this).closest('tr'); instead $(this);
var addRow = stockTable.fnGetData(this); //$(this).closest('tr'); instead
catalogTable.fnAddData(addRow);
stockTable.fnDeleteRow($row.index());
});
...
<td><button class="toggle">C</button></td>
....
Sorry if the question may seem dumb but I'm ne to javascript.
Thanks in advance.
Replace tr with .toggle and it should work. You were trying with the ID # selector, you need a class . selector.
stockTable.on('click', '.toggle' ,function() {
You then have to re-assign this to the closest tr:
var $row = $(this).closest("tr");
Related
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='' />");
});
I want to highlight row and column in a table but not all of them, just until end of selected one td. I'll put a link here to prove what i want, go down and where is size table (size chart) hover on it and you will see:
http://www.nike.com/ro/en_gb/c/size-fit-guide/mens-shoe-sizing-chart
How can I highlight with limit like that?
Here is my table: https://jsfiddle.net/pkkbf9k2/
I think that's it:
https://jsfiddle.net/8odoros/pkkbf9k2/4/
$( "td" ).hover(
function() {
var myCol = $(this).index();
var $tr = $(this).closest('tr');
var myRow = $tr.index()+1;
$('tr:nth-child('+myRow+') td:lt('+myCol+')').addClass( "hover" );
myCol++; myRow--;
$('table tbody td:nth-child('+myCol+')').each(function (index) {
if(index<myRow) $(this).addClass( "hover" );
});
$(this).addClass('hoverBold');
}, function() {
$( '*' ).removeClass( "hover" );
$(this).removeClass('hoverBold');
}
);
Here is a similar CSS tutorial. It will give you a more better idea.
https://css-tricks.com/simple-css-row-column-highlighting/
Hope this helps you.
Here sample link for highlighting row using jquery
http://www.mkyong.com/jquery/how-to-highlight-table-row-record-on-hover-with-jquery/
You can give the bgcolor to the tag which you wanted to highlight.
<td bgcolor="#FF0000">Content</td>
Or You can give class also to the tag which you want to highlight.
example
<td class="highlight">Content</td>
and give the background color to the style.css file.
So I have problem which I can't solve for hours now..
When I press on button "Pridėti prekę" then one row is dynamically added to the table and when I write numbers in "Kiekis" and "Kaina" columns nothing happens in "Suma" column (It only happens to dynamically added row).
Piece of jQuery:
$(document).on('keyup', '#quantity, #price', function() {
$('#total').val(($('#quantity').val() * $('#price').val()).toFixed(2));
});
Please look at JSFiddle how is "working" my code:
https://jsfiddle.net/w5qz5exe/7/
Thanks for help in advance!
P.S I tried to change from div ID total, to div class total, then it works, but it applies to all rows instead to relevant.
You were referencing everything with id's.
$(document).on('keyup', '.quantity, .price', function() {
var row = $(this).closest('tr');
var rowPrice = $(row).find('.price').val();
var rowQuantity = $(row).find('.quantity').val();
$(row).find('.total').val( (rowPrice * rowQuantity).toFixed(2) )
});
https://jsfiddle.net/w5qz5exe/12/
Your problem is the fact that the inputs are using id's instead of something else. When looking for the item in question the search stops on the first Id found.
This updated fiddle https://jsfiddle.net/w5qz5exe/11/ shows how it could be done with classes.
$(document).on('keyup', '.quantity, .price', function(e) {
var $parent = $(e.target).parents('tr'),
$total = $parent.find('.total'),
$quantity = $parent.find('.quantity'),
$price = $parent.find('.price');
$total.val(($quantity.val() * $price.val()).toFixed(2));
});
In addition to the above remove all Id's from the inputs and change them to classes instead.
I'm trying to dynamically add an event listener to a select box.
With this code I just don't get any response, so no alert box:
var table = $('<table></table>');
var row = $('<tr><td></td></tr>').html('<select id="sel1"><option>test</option><option>test2</option></select>');
$("sel1").on('change', function() {
alert(this.val());
});
table.append(row);
$('#mydiv').append(table);
Also, how can I add the select box between the td?
Currently, it's added between the tr, td simply isn't there.
Here is a fiddle
Updated Fiddle
You should use event delegation on() when you deal with fresh DOM added dynamically :
$("#mydiv").on('change', '#sel1', function() {
alert($(this).val());
});
NOTES :
You should add id selector before sel1 it should be #sel1.
.val() is a jquery method you can't call it on javascript object like this.val() it should be $(this).val().
The current code will not add select inside td it will add it directely inside tr tag so you could replace :
var row = $('<tr><td></td></tr>').html('<select id="sel1"><option>test</option>
<option>test2</option></select>');
By :
var row = $('<tr></tr>').html('<td><select id="sel1"><option>test</option><option>
test2</option></select></td>');
Hope this helps.
Working Snippet
var table = $('<table></table>');
var row = $('<tr></tr>').html('<td><select id="sel1"><option>test</option><option>test2</option></select></td>');
$("#mydiv").on('change', '#sel1', function() {
alert($(this).val());
});
table.append(row);
$('#mydiv').append(table);
td{
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>
Couple of points to note in your code
1) Wrong Selector $("sel1")
The problem in your code is $("sel1") you need to select by id using # so it should be $("#sel1"). So your code would be like
$("#sel1").on('change', function() {
alert(this.val());
});
2) Bind event after appending the HTML to DOM or Use Event Delegation
Your code should be places in this order Working Fiddle
var table = $('<table></table>');
var row = $('<tr><td></td></tr>').html('<select id="sel1"><option>test</option><option>test2</option></select>');
table.append(row);
$('#mydiv').append(table);// now the element is added to DOM so bind event
$("#sel1").on('change', function() {
alert($(this).val()); // note here I changes this.val() to $(this).val()
});
Or another option is using event delegation Working Fiddle
To add event's to dynamic elements use the event delegation
$('body').on('change',"#sel1", function() {
alert($(this).val());
});
3) To place the select tag inside td use the below syntax
var row = $('<tr></tr>').html('<td><select id="sel1"><option>test</option><option>test2</option></select></td>');
Wrap the td along with the select tag and not inside the tr Working Fiddle
You need to bind the change event after appending to the page:
var table = $('<table></table>');
var row = $('<tr><td></td></tr>').html('<select id="sel1"><option>test</option><option>test2</option></select>');
table.append(row);
$('#mydiv').append(table);
$("#sel1").on('change', function() {
alert(this.val());
});
And also you have forgotten the # id selector for "sel1"
There are three major issues in your code
1.The id selector must start with #
$("#sel1").on('change', function() {
2.You should bind the change listener only after you appended the element, because it just doesn't exist in the DOM before
3.With
$('<tr><td></td></tr>')
you'll get a jquery reference to the row (the <tr> element). Then with .html() you are replacing the content of the row (including the <td> of course)
I have two tables and with same tr ids and content (for some reason)!
When I click a check a box in table1 I should be able to delete that row in both table1 and table2 etc. How can I achieve this?
I can delete from table1 using
table1.on('click','tr .lowBox:checked',function(){
$(this).closest('tr').remove();
}
How do I delete row from table2.
thanks!
table1.on('click','tr .lowBox:checked',function(){
$(this).closest('tr').remove(); //send to var to perform as below
$("table2").closest('tr').remove(); //If you're traversing UP
$("table2").find('tr').remove(); //If you're traversing DOWN
//Inside your "click" event, you can traverse any part of the DOM
//regardless of where you entered the document with your click event
//slightly more robust, you could do this..
/*or as fed variables...e
var $item1 = $(this).closest('tr');
var $item2 = $("table2").closest('tr');
var $rmTwo = function(item1,item2){
$(item1).remove();
$(item2).remove();
}
//Then execute your repeatable function, using the two tr's
$rmTwo($item1,$item2);
// should remove both, and you can play
//with your jQuery to get the correct elements
//or alter them if you change your code structure.
}
This would be the closest I can get you without seeing any of your HTML, and under the assumption that you're using jQuery on your page.
As others have commented, you shouldn't have duplicate IDs. Instead you could use classes, or generate IDs that are unique (for example, by prefixing with the table id). However, if you must do it this way, here's what you could do:
table1.on('click','tr .lowBox:checked',function(){
var row = $(this).closest('tr');
table2.children("#" + row[0].id).remove();
row.remove();
}
If you switch to table-unique classes for each row:
table1.on('click','tr .lowBox:checked',function(){
var row = $(this).closest('tr');
table2.children("." + row[0].className).remove();
row.remove();
}
This solution makes a few assumptions about the structure of your HTML. I can update it if you post a more detailed sample of your HTML.
I solved this with:
table1DT=var $('#table1').dataTable({});
table2DT=var $('#table2').dataTable({});
table1DT.on('click','tr .lowBox:checked',function(){
var row= $(this).closest('tr');
//do some thing with row variable
var d=row.attr('id');
var nRow = $('#table2 tbody tr[id='+d+']')[0];
table2DT.fnDeleteRow(nRow);
table1DT.fnDeleteRow(row);
}
so checking the table1 check box would delete that particular row in table1 and table2 etc.