Develop Reference

How to get any column of any row of a Table in HTML?

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

Conditional jQuery Toggle Function

I want to hide and show list items based on their attributed class.
The problem is that certain list items have multiple classes. So if I toggle one class then toggle another, any items with both selected classes will be removed.
I created a demo of my problem: http://jsfiddle.net/a4NkN/2/
Here's the JS CODE:
$('#easy').click(function(){
$(this).toggleClass( "checked" );
$('.easy').toggle();
});
$('#fun').click(function(){
$(this).toggleClass( "checked" );
$('.fun').toggle();
});
$('#silly').click(function(){
$(this).toggleClass( "checked" );
$('.silly').toggle();
});
If you select the "Easy" and "Fun" buttons, Boating will disappear.
How can I get Boating to stay?

This might be a good point to start from. Although you can do this cheaper and cleaner, that gives the idea:
Use an array to save the status of your selection buttons and one corresponding to hold the class names. Whenever your select buttons get clicked, you set all your elements invisible and reset those visible again, that are already selected by other buttons or the currently clicked, which is all saved in the switcher array.
//saves whether button is active
var switcher = [false, false, false];
//holds your classes selectable
var classes = ['easy', 'fun', 'silly'];
$('.toggler').click(function () {
// toogle the select button and save status
var x = $(this).hasClass('checked');
switcher[$(this).data('switch')] = !x;
$(this).toggleClass("checked", !x);
// iterate through your elements to set them active if needed
$('li').each(function () {
var cur = $(this);
cur.addClass('hidden');
$.each(switcher, function (index, data) {
if (data && cur.hasClass(classes[index])) {
cur.removeClass('hidden');
}
});
});
});
Whole solution in this fiddle: http://jsfiddle.net/BMT4x/

You cannot unconditionally toggle elements based on a click on one of the button filters if it is possible for an element to satisfy multiple filters at once. The correct approach is a little more involved.
Since your checked class means that only items corresponding to that button should be shown, do exactly this: toggle them based on the current status of the button. The items should be shown if and only if the corresponding button is checked as a result of clicking it.
$('#easy').click(function(){
$(this).toggleClass( "checked" );
$('.easy').toggle($(this).is(".checked"));
});
This code uses the last version of .toggle, the one accepting a boolean argument.
It can also be done more succintly:
$('.easy').toggle($(this).toggleClass( "checked" ).is(".checked"));

swap radios if selected using jquery

On clicking a radio button in radiogroup2, the selected radio should swap positions with the radio with the id='selectedradio'. fiddle http://jsfiddle.net/DCC66/6/ --- updated --- clear view of radio rows and code is swapping but cancelling out http://jsfiddle.net/DCC66/14/
tried this to sort the id issue: http://jsfiddle.net/DCC66/18/
$(".radiogroup2 input[type='radio']").on('click', function () {
$('#radioselected').closest('label').before($(this).closest('label'));
$(this).closest('label').after($('#radioselected').closest('label'));
$(this).attr('domaintype', 'radioselected');
$('radioselected').attr('radioselected', 'domaintype');
});
and now this:// swaps once then stops and then just makes the clicked radio disapear. think it needs to add the id="radioselected" to the newly swapped radio. also still not swapping though only replacing radio.
$(".radiogroup2 input[type='radio']").on('click', function ()
{
$('#radioselected').closest('label').replaceWith($(this).closest('label'));
});
trying using clone still no luck:
$("div.radiogroup2 input[name='domain_ext']").click(function ()
{
$(this).clone('#radioselected').after(this);
});
Original
$("div.radiogroup2 input[name='domain_ext']").click(function()
{
//only if a the radio in radiogroup to are clicked take radio and swap with id='radioselected'
if ($(this).prop('checked'))
{
$(this).after('#radioselected').add(this);
$('#radioselected').after(this);
}
});
so any radio clicked in the "swap" row should switch positions with the radio in the first row with the id 'selectedradio'

Use a delegate instead of binding the event on the radio buttons directly. That way the radio buttons that are swapped into the div will also work.
Use the closest method to get the label around the radio buttons.
Remove the id from the radio button that you swap with, and add it to the selected radio button.
Use the after method to move the label into the second list next to the selected one, then use prependTo to move the label with the selected radio button into the first list.
You have some invalid HTML code that makes the rows swap place. Change <td><tr> to <tr><td>.
$("div.radiogroup2").on("click", ":radio", function () {
var l = $(this).closest('label');
var r = $('#radioselected');
r.removeAttr('id');
l.after(r.closest('label'));
$(this).attr('id', 'radioselected');
l.prependTo('.radiogroup1');
});
Demo: http://jsfiddle.net/DCC66/16/

adding rows dynamically using onclick function in javascript

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.

jQuery: How to reset multiple dropdowns after they have been cloned?

At the moment my code clones 3 dropdowns everytime you click the add button.
I managed to get it to copy the row exactly because before, the first dropdown would reset by itself but the other two would not so I was just wondering how to reset all 3 dropdowns?
It is easiest to see in this JSFiddle:
http://jsfiddle.net/jydqK/7/
So, if you change the first dropdown to agent and then click the + you will see the second row appears duplicated whereas I would like it to reset to tags, operands and values.
Any help greatly appreciated.

You can use removeAttr to remove selected attribute and then fire a change() event.
In your case:
dropdownclone.find('select.tags option:selected').removeAttr('selected');
dropdownclone.find('select.tags option:first').attr('selected','selected');
dropdownclone.find('select.tags').trigger('change');
Modified example: http://jsfiddle.net/ZF3mc/2/

If I understood your question, you want the duplicated row of selects to reset their values.
In this case you can just remove this:
dropdownclone.find('select').each(function(index, item) {
//set new select to value of old select
$(item).val( $dropdownSelects.eq(index).val() );
});
and replace it with:
dropdownclone.find('option').attr('selected', false);

Find all dropdowns in your clone. For each dropdown, check every option tags for a selected attribute and remove it. Something like this:
clone.find('select').each(function() {
$(this).find('option').each(function() {
$(this).removeAttr('selected');
});
});
Or better yet, find only the selected option tags using :selected filter before removing.