Develop Reference

show multiple selected span values in jquery using comma

I've posted my full code on jsfiddle. I'm trying to show the user selected seats here. If user selected 2 from BS the result should be BS-2. Again if user selected 4 from FC the result should be added with the old one like BS-2, FC-4.
But, I've tried something here. its show the value of span element but if i selected the another one it replaces the previous one. How to add a comma and show the multiple selected span values in jquery?
JsFiddle
jQuery
$(".text").click(function(){
$(this).toggleClass('selected');
var data = $(this).text();
$('.returndata').text(data);
})

Try
var $texts = $(".text").click(function () {
$(this).toggleClass('selected');
var selected = $texts.filter('.selected').map(function () {
return $.trim($(this).text())
}).get()
$('.returndata').text(selected.join());
})
Demo: Fiddle

Change selected tr color back after selecting new tr

Thus far I've figured out most of the code I need to select a radio button inside of a <tr> when the row is clicked & to change the color of the <tr> when it's clicked, but I need to be able to change the color back & change the color of a new <tr> if the user selects a different one. Right now it just keeps changing the color of the rows, but doesn't change them back. Code is below:
<script>
var prevTr;
$('tr').click(
function() {
$('input[type=radio]',this).attr('checked','checked');
$(this).addClass('selectedtr');//css('background-color', 'Green');
prevTr = $(this).id;
$("#"+prevTr).removeClass('selectedtr');
}
);
...

Remove the selectedtr class from all tr elements first, then add it to the current one:
$('tr').click(
function() {
$('input[type=radio]',this).prop('checked','checked');
$(this).siblings().removeClass('selectedtr');
$(this).addClass('selectedtr');
}
);
Edit - I don't think David Thomas's answer is quite what you're looking for, but I do think the siblings() select would be more efficient than selecting all tr elements.
Another Edit
In reference to your comment: prop should be used instead of attr. Here's a fiddle:
http://jsfiddle.net/xQyAV/

I would use css:
binput[type=radio]:hover {
//here edits
//the setting back happens automaticly
}

I'd suggest:
$('input[type=radio]').change(function (){
var self = this,
row = $(self).closest('tr');
row.addClass('trSelected').siblings().removeClass('reselected');
});

I think it only needs to remove the class before remembering the current identifier:
$(function () {
var prevTr = false;
$('tr').click(function () {
if (prevTr) {
$("#" + prevTr).removeClass('selectedtr');
}
prevTr = $(this).id;
$('input[type=radio]', this).attr('checked', 'checked');
$(this).addClass('selectedtr');
});
});

How to automatically generate new input fields by filling previous?

To be as simple as I can:
I have condition where I do not know where I'm going to have 3 or more input elements (type of "text") and I'm looking for solution which will generate 4th input type text when I start to fill 3th input field with characters, and so on.
Something similar Adminer have for adding new columns when creating/altering database:
here you click on + to add new input and x to remove it. This would also be good to me.
How to achieve that/what library should I use?

You can clone full row, and append it to parent table. Have a look at jQuery clone() and append().
Sample code:
$('#yourtableid').on('click', '.add', function() {
// clone first row
var row = $('#yourtableid tbody tr:first').clone();
// reset inputs
row.find('input[type!=button]').val('');
// append cloned row
$('#yourtableid tbody').append(row);
});
Live DEMO.
EDIT: To add row automatically when filled some text in last row, you can go with:
$('#tbl').on('change', 'input', function() {
// check that some input was entered and that it is in the last tr
if($(this).val() != '' &&
$(this).closest('tr').is(':last-child')) {
addRow();
}
});

It's difficult to tell what you're trying to get without a code sample, but do you want something like this?
HTML:
<input type='text' />
JS:
$('input').on( 'change', function() {
$(this).after( '<input type="text" />' );
$('input').off( 'change' );
});
jsFiddle is down and jsBin can't handle the extra load, but here's a demo.

Getting the last element of class x using jquery 'each'

There are two .js-type's classes in every row in the table of class table and there are many rows.
I am using the following to populate the array with all the .js-type objects:
$('.js-type').each(function(){
myArray.push($(this).text());
});
My question is, is there a way for me to populate the same array with the last element found in every row in the .table class only?
This is what I tried:
Attempt1:
$('.js-type:last-child').each(function(){
myArray.push($(this).text());
});
Attempt2:
$('.js-type:last').each(function(){
myArray.push($(this).text());
});
Attempt3:
$('.js-type').eq(1).each(function(){
myArray.push($(this).text());
});
I appreciate any advice about this.
Many thanks in advance!

This will get you the last element of each row:
$('.table tr>*:last-child').each(function(){
myArray.push($(this).text());
});
This will get you the last .js-type element
$('.table tr').find('td.js-type:last-of-type').each(function(){
myArray.push($(this).text());
});

Try this!
$("tr").each( function () {
myArray.push($(this).find(".js-type").next().text());
});

Maybe something like this?
$("table tr").each(
function(i, e)
{
myArray.push( $(e).find(".js-type").eq(1).text() );
}
);

How to target another element on the same row in a table with jQuery

I am trying to use jQuery to pick an item in a table row that will make a change within the same row
<table>
<tr id="t1"><td><input type="checkbox" id="t1" value="" /></td></tr>
<tr id="t2"><td><input type="checkbox" id="t2" value="" /></td>{want new stuff here}</tr>
</table>
In this instance - if I select the checkbox with the id of 2 - I would want a new column to be added/appended just after the last and if this same checkbox was unchecked it would remove the content just added.
Can anyone suggest how this is done?

Make sure your id values are unique on all elements, then you can use .parents("tr"):
$(".mytable tr :checkbox").click(function () {
var checked = $(this).is(":checked"),
$tr = $(this).parents("tr").first();
if (checked) {
$tr.append("<td></td>");
} else {
$tr.find("td:last").remove();
}
});
If you're adding multiple <td>'s, then store a reference to them or use an identifier to find them again. I'm assuming you just want to add/remove a column at the end.
As with anything jQuery, there are multiple solutions! This was the one off the top of my head.

I would better have dynamic content inserted into specified TD cell instead of creating and removing td container so that you would not have to take care about correct colspans.
$('#table :checkbox').change(function() {
var cont = $(this).closest('tr').find('.content');
if ($(this).is(':checked')) {
cont.append('Some content');
}
else {
cont.empty();
}
});
Check this out:
http://jsfiddle.net/sCjXg/1/

See this jsFiddle for a quick-written example
$(function(){
$("#t2").find("input").click(function(){
if($(this).is(":checked")){
$(this).parents('tr').append("<td class='t2-add'>have new stuff</td>")
}
else{
$(this).parents('tr').find('.t2-add').remove()
}
})
})

Try something like the following:
$('[type="checkbox"]').change(function () {
var $this = $(this);
if ($this.is(':checked') {
$this.closest('tr').append('<td></td>');
} else {
$this.closest('tr').children('td:last-child').remove();
}
});
This uses the jQuery .closest(selector) method.