I have a form that contains several rows of radio buttons. When a button is selected in the first row (only first row), I need the subsequent rows to be auto-selected one position over (to the right) from the previous selection until end of table is reached.
Result should look like this, after clicking on "MD" in the first row:
Desired Output
See JSFiddle Example Here
The solution should be relative-position-based if that makes any sense. The only element with consistent ID is the table ("#skuTable").
What I have so far is this (console logging to debug):
$("#skuTable tr").first().find("input:radio").on("click", function(){
var $this = $(this);
console.log($this);
console.log($this.position());
console.log($this.parents("tbody").children("tr:nth-child(2)").find("input:radio").first().prop('checked', true));
});
What that manages to do is select the first radio button on the following row. I need some help figuring out how to select the next radio button relative to the first one's position.
This is how I did it:
var rows = $("#skuTable tr");
rows.eq(0).find("input:radio").each(function(i) {
$(this).on("click", function() {
for(var m = 0, n = rows.length;m < n;m++) {
rows.eq(m).find("input:radio").eq(i + m).attr("checked", true);
}
});
});
DEMO: https://jsfiddle.net/Lnk9p55x/4/
one more solution:
$("#skuTable").find("input:radio").on("click", function(){
loop = 0;
$("input").prop("checked",false);
index = $(this).parent().index("td");
$.each($("table tbody tr"), function() {
$("table tbody tr:eq("+loop+")").find("td:eq("+index+")").find("input:radio").prop('checked', true);
index++;
loop++;
});
});
https://jsfiddle.net/Lnk9p55x/7/
Related
I am having difficulty in understanding as to why my search of a table column is always showing the first row and the matched row after that? Even though the keyword doesn't match the cell in row 1 it will always show on top? I have gone through my code several times and tried different approach it still wont hide the first row?
Here is my working code
$('#filterbyname').on("keyup", function () {
var val = $(this).val();
var matches = $("table.bill tr:not(:first-of-type)");
matches.each(function (i,e) {
debugger;
$row = $(this);
$cells = $row.find("td:nth-child(2)");
$cells.each(function (i2, e2) {
var cell = $(this).text();
debugger;
$row.toggle(cell.indexOf(val) >= 0);
});
});
});
You can see from the above code if cell.indexOf(val) >= 0) then it will toggle according the matching rows.
Any suggestions please?
In fact in your matches variables you are using tr:not(:first-of-type) which selects all the rows expect the first one, because :not selector excludes all elements that matches :first-of-type here, which means that they are not the first child in their parent, so the first tr will be ignored.
Change this code:
var matches = $("table.bill tr:not(:first-of-type)");
To the following:
var matches = $("table.bill tr");
The number of rows are dynamic so I cant fixate on the name of the row, here is the fiddle: http://jsfiddle.net/1vp29wxq/1/
$('.NameOfSensor').on("click", function () {
var tr = $(this).parents('tr:first');
var thisRow = tr.find(".rowMode");
var checkChecked = $("input[class='rowMode']:checkbox:checked");
var checkBoxes = $("input[class='rowMode']:checkbox");
if (checkChecked.length < checkBoxes.length)
{
checkBoxes.prop("checked", true);
}
else {
checkBoxes.prop("checked", false);
}
});
What I get from that is that all check boxes are selected, but I just want the ones from the row where it is clicked. Also, whatever I tried I cant seem to incorporate the 2 variables (tr and thisRow) I created, can I get some help? Also, the number of columns in which the checkboxes are, are always 6 (sometimes I just hide them).
Change your code into this:
$('.NameOfSensor').on("click", function () {
var tr = $(this).closest('tr');
var checkChecked = $(tr).find("input[class='rowMode']:checkbox:checked");
var checkBoxes = $(tr).find("input[class='rowMode']:checkbox");
if (checkChecked.length < checkBoxes.length)
{
checkBoxes.prop("checked", true);
}
else {
checkBoxes.prop("checked", false);
}
});
Your selector was wrong and got all rows.
Search for checkboxes within the clicked line:
var tr = $(this).closest('tr'); // fast alternative to `.parents('xxx:first')`
var checkChecked = $("input[class='rowMode']:checkbox:checked", tr),
checkBoxes = $("input[class='rowMode']:checkbox", tr);
DEMO: http://jsfiddle.net/1vp29wxq/2/
I am trying to generate a table dynamically using ajax call. To simplify things i have just added my code to js fiddle here -> http://jsfiddle.net/5yLrE/81/
As you click on the button "HI" first two columns are created properly.. but some how as the td length reaches 2 . its not creating another row. The reason is that when i do find on the table elements its actually retrieving the children table elements. Can some one pls help.
I want a two column table.. Thank you.
sample code:
var tr = $("#maintable tbody tr:first");
if(!tr.length || tr.find("td:first").length >= max) {
$("#maintable").append("<tr>");
}
if(count==0) {
$("#maintable tr:last").append("<td>hi"+content+"</td>");
}
Basically the matching of descendants was allowing for great great grandchildren etc. Just needed to make the matching more specific.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/5yLrE/91/
max = 2
$("button").click(function () {
var content = $('#template').html();
var $table = $("#maintable");
var tr = $table.find(">tbody>tr:last");
if (!tr.length || tr.find(">td").length >= max) {
// Append a blank row
tr = $("<tr>");
$table.append(tr);
}
tr.append("<td>hi " + content + "</td>");
});
This one always targets the last row and adds a row if it does not exists at all (or there are too many divs already) which is what I gather you intended.
I also used the templating I suggested to separate messy HTML strings from the code.
You will want to check the length of the table cells before incrementing a new table row. After you have reached your max column length, reset the row and start over.
JSFiddle
max_columns = 2;
count=0;
$("button").click(function() {
var content='column';
if(count==max_columns||!$('#maintable tr').length){
$("#maintable").append("<tr>");
count=0;
}
if(count!=max_columns)
$("#maintable tr:last").append("<td>"+content+"</td>");
else
$("#maintable tr:first").append("<td>"+content+"</td>");
count++;
});
i have been read alotof article about each(function(){ .... to get values html tablee childs. But i can not do that. i would like you help me. My some bad experiments are not working.There is a outside a button which is not in rows. While clicking a button, row values must return me.I need td's span values...
My not working samples: NOT WORKING:
var id = $("#listsends").closest("tr").find(".label label-warning").text();
NOT WORKING :
alert(id);
$("#listsends").find('.label label-warning').each(function () {
var textval = $('.label label-warning').text(); // this will be the text of each <td>
alert(textval);
});
var t = $('.label label-warning');
for (var i = 0; i < t.length; i++)
alert(t[i].text());
By clicking web button(outside of table, not inside) , tables's td ^s span values:
$("#listsends").find('.label label-warning').each(function () {
var textval = $(this).text(); // as this is the scope of the element
alert(textval);
});
i have dynamic simple table like:
I try to get previous value cell when i click edit button.
Example: when i click first edit button that will alert('a1')
when i click second edit button that will alert('a2')
i try with
$('.edit').click(function(){
alert($(this).parents('tr').prev().children().eq(1).text());
});
it's working well with first edit button because previous row that has one row.
And it't not working with second edit button.
How can i do it (by dynamic previous row) http://jsfiddle.net/bWjbj/
ps: i'm working with next row with
alert($(this).parents('tr').nextAll(':eq(' + ($(this).parent().siblings().eq(0).attr("rowspan")-1) + ')').children().eq(1).text());
http://jsfiddle.net/mblase75/XGdkD/
The problem is that for the second Edit button, the previous table row isn't the row you want -- you want the row two more before that, because that's where the rowspans begin.
Or, to be general: you want the table row belonging to the previous Edit button. In the case of the first edit button, though, you just want the previous row.
So, in code:
$('.edit').click(function () {
var idx = $('.edit').index(this); // which Edit button is this?
if (idx > 0) { // first button
var $tr = $('.edit').eq(idx-1).closest('tr'); // previous row
} else { // not first button
var $tr = $(this).closest('tr').prev('tr'); // previous Edit button's row
}
var $td = $tr.find('td:nth-child(2)'); // second <td> of the row
alert($td.text());
});
Compact version of the same code:
$('.edit').click(function () {
var idx = $('.edit').index(this),
$tr = (idx) ? $('.edit').eq(idx-1).closest('tr') : $(this).closest('tr').prev('tr'),
$td = $tr.find('td:nth-child(2)');
alert($td.text());
});