Am having a task in some onclick functions.I had a table in which each column contains a dropdown list or text box. one of the column contains a button.If i click that button the row with dropdownlist,textboxes including add button have to dynamically add as the next row.how can i do this?which will be better javascript or jquery..plz help me out..
You can try the following
in onclick of the row add the following function
function cloneRow(event){
var tar_ele;
if ($.browser.msie) {
// IE takes SRCELEMENT for event source.
// may the force shred IE.
tar_ele = $(event.srcElement);
} else {
tar_ele = $(event.target);
}
// Now take the parent of the clicked item as the item is a button in a row
var row = tar_ele.parent();
// Now clone the row and add it to the parent.
row.clone().appendTo(row.parent());
}
Hope this helps.
You can try this:
$('button-id').click(function() {
$('container-id').after('<input /><select />');
});
Something like that, will have you added a new line with input and select boxes to the end of the container or your table.
Related
Suppose there is Table with variable number of rows of fixed number of columns, and suppose each row has a button too, now I want to select for example a column's value(let's say this selected column is textarea, so I select it's content) when that row's button is clicked.
For example in above image I want that if submit is pressed than all data of 'textarea' of corresponding row should be stored in a variable.
You can use the jQuery closest() function to find an element near the clicked button. Add click handlers to the buttons and then traverse up to find the textarea.
$('.button').on("click",function(){
var thisRowsTA = $(this).closest("textarea");
console.log($(thisRowsTA).val());
});
A simply way is to:
Put an ID pattern to your textareas, like: txt_area_1, txt_area_2, txt_area_3.
Then, on the Click Event of your buttons, make them catch the corresponding textarea in their row. Use the ID patterns to do this.
Post your code for further help.
You will need to ad an event handler for each button. Inside of that you can write something like this.
function eventHandler(e){
var row = this; // start at the button
while(row.nodeName != 'TR' && row.parent){
// go up till we find the row
row = row.parent;
}
var textArea = row.querySelector('textarea');
var value = textArea.value;
// do something with supplied feedback.
}
In order to attach the handlers, you would do something like this.
function attachTableEvents(){
var table = document.querySelector('table'); // or more specific selector if needed
var buttons = table.querySelectorAll('button');
for (var i = buttons.length; i--;){
buttons[i].addEventListener(eventHandler);
}
}
Counting on the DOM structure is really BAD.
I would put an attribute in my controls that holds the line number. Then when clicking an element you can easily query the DOM by element type and the property value to get any elements in this line.
Later if you change to DIVs or change structure your will still run correctly
How to get row value of a table on mouse click? Data in this table is populated from the data returned using AJAX.
Below is the code which is not working:
$('table#tblBdy tbody tr').click(function() {
$('tr').click(function () {
var tableData = $(this).closest("tr").children("td").map(function() {
return $(this).text();
}).get();
$('#bx1txt').val($.trim(tableData[0]));
$('#bx2txt').val($.trim(tableData[1]));
$('#oldqty').val($.trim(tableData[1]));
});
I'm not sure I completely follow your question, your title and descriptions seem to conflict. Are you looking to get the value you a specific cell on click? Your question says you want the value of a row...
If I understand it correctly, you either want the value of a specific cell when it is clicked, or you want to highlight the row of that cell that you are clicking.
I have setup a codepen http://codepen.io/anon/pen/oXNeMx with a simple solution.
Depending on how the table is generated, you can put that javascript code into it's own function and call that function whenever you have new AJAX data so that the click handler gets bound to the table and elements.
//handles table cell click events
$('td').click(function(){
//updates the value
var cellValue = $(this).html();
//find the row of table where cell was clicked
var tr = $(this).closest('tr');
//removes select class from all rows
$(tr).siblings().removeClass('highlight');
//adds class to highlight selected row
tr.addClass('highlight');
});
The reason your code is not working is because you attach an event handler to some elements, but then you replace those elements with new ones from the AJAX call.
You need to set an event handler on an element that will not change, for example, the table (if you table gets replaced in its entirely, you need to find a higher ancestor that never changes).
// ancestor event real selector
$('#tblBdy').on('click', 'tbody td', function() {
// Same code as yours in the handlers
});
I have a problem... I tried to remove the selected items from dijit.form.MultiSelect when I click on button, but don't work...
Here is the code:
btnRemove = dijit.byId("btnRemove"); // button ID
List= dijit.byId("List"); // ID List of items which I want
// to remove when click on someone item
on(btnRemove , "click", function(evt){ // onClick event
alert(dijit.byId("List").attr("value")); // returns a label of element
// here must be a code to remove a selected item from MultiSelect - but don't work...
List.containerNode.removeChild(dijit.byId("List").attr("value"));
});
all code is in Javascript..
thanks
I solved this problem... if any will need this:
because I didn't find that dijit.form.MultiSelect has a removeChild option, I used a another hidden dijit.form.MultiSelect in which move items from the first MultiSelect...
Code for this is:
btnRemove = dijit.byId("btnRemove");
on(btnRemove, "click", function(evt){
dijit.byId("Removed").addSelected(dijit.byId("List"));
});
where Removed is the ID of hidden MultiSelect and the List is ID of a visible dijit.form.MultiSelect
you can use below code for remove all elements
while (btnRemove.hasChildNodes()) {
btnRemove.removeChild(btnRemove.lastChild);
}
I have a table in which any time a user clicks on one of the rows it highlights the row. However as of if I have multiple rows highlighted i have to click each individual highlighted row to get rid of the highlight. I want to make it so when an individual is not clicking on the table it will get rid of the highlight on all the rows. This is the code that I am using.
//this highlights the table that has been clicked on
$('.tr_highlight').live('click',(function () {
$(this).parent().toggleClass("tr_highlight_ed");
}));
How do I get it to unhighlight(if thats a word) when clicking anywhere but the table?
You really need to post an example of the rendered markup. You don't want to do a toggleClass, you would do a removeClass selecting the parent nodes...
Assuming the following markup...
<body>
...
<table id="myTable">...</table>
...
</body>
You could bind the following..
$('body').click(function(evt){
//evt.target is what was clicked on, which bubbles up to body
//if it's anything inside #myTable, you will get the #myTable
var el = $(evt.target).closest('#myTable');
//if you didn't get #myTable, you clicked outside the table
//remove the given class from all the tr's
if (!el.length) $('#myTable .tr_highlight_ed').removeClass('tr_highlight_ed');
});
$(document).bind('click.table', function (e) {
if ( $("#my-table").has(e.target).length === 0 ) {
$("#my-table").find("tr").removeClass('tr_highlight_ed');
}
});
Everytime a user clicks anywhere on the page, it will check if the element that was clicked is inside the table; if not, we unhighlight all the rows.
I am having table which contain some data. This table is generating using a component.
All td's has the same class name. Each row begins with a check-box with a specific value to that row. When click on a td on that row I want to get check-box value. When I click on a label JavaScript function is triggered. Cannot use jQuery click function.
sample: http://jsfiddle.net/gCGVJ/
$('td').click(function() {
alert($(this).closest('tr').find('input[type=checkbox]').val());
});
$('td').click(function(){
var val = $(this).closest('tr').find('#checkbox').val();
});