I have some HTML that is being generated by some server-side code. The HTML that's generated looks like this:
<table id="myChoices">
<tr>
<td><input type="radio" name="choice" value="1" /></td>
<td>Monday</td>
<td>Mar 7</td>
</tr>
<tr>
<td><input type="radio" name="choice" value="2" /></td>
<td>Tuesday</td>
<td>Mar 8</td>
</tr>
<tr>
<td><input type="radio" name="choice" value="3" /></td>
<td>Wednesday</td>
<td>Mar 9</td>
</tr>
<tr>
<td><input type="radio" name="choice" value="4" /></td>
<td>Thursday</td>
<td>Mar 10</td>
</tr>
<tr>
<td><input type="radio" name="choice" value="5" /></td>
<td>Friday</td>
<td>Mar 11</td>
</tr>
</table>
When a user makes a choice, I need to get the two cells next to it. For example, if someone chooses the third option, I'm trying to get the following:
<td>Wednesday</td><td>Mar 9</td>
In my attempt to do this, I have the following jQuery:
function getHtml() {
var html = '';
var item = $("#myChoices input[type='radio']:checked");
if (item.length > 0) {
var grandparent = item.parent().parent();
var cells = grandparent.children();
var html = '';
for (var i = 0; i < cells.length; i++) {
if (i > 0) {
var cellHtml = cells[i];
html += cellHtml;
}
}
}
return html;
}
Unfortunately, my approach is not working. When I do the following:
var test = getHtml();
console.log(test);
I see the following in the console window:
[object HTMLTableCellElement][object HTMLTableCellElement]
Why? How do I get the actual HTML string?
Use outerHTML, instead you are storing the jQuery object in the variable.
var cellHtml = cells[i];
should be
var cellHtml = cells[i].outerHTML;
JS
function getHtml() {
var item = $("#myChoices input[type='radio']:checked");
if (item.length > 0) {
var grandparent = item.closest('tr'),
cells = grandparent.children();
var html = '';
for (var i = 1; i < cells.length; i++) {
html += cells[i].outerHTML + ' ';
}
}
return html;
}
js Fiddle
I propose you change the script a bit to simplify the process altogether.
$("#myChoices input").change( function() {
var string = $(this).parent().nextAll("td").text();
});
Variable "string" will contain the text you are looking for.
I believe you could just use something simple like:
$("input[type='radio']:checked").parents("tr").first().text();
Example: http://codepen.io/cchambers/pen/ONNawo
JSFIDDLE DEMO
Use this instead
var cellHtml = cells[i].outerHTML;
Complete JS
var html = '';
var item = $("#myChoices input[type='radio']:checked");
if (item.length > 0) {
var grandparent = item.parent().parent();
var cells = grandparent.children();
var html = '';
for (var i = 0; i < cells.length; i++) {
if (i > 0) {
var cellHtml = cells[i].outerHTML; //change here
html += cellHtml;
}
}
}
console.log(html);
Result format:
<td>Monday</td><td>Mar 7</td>
The easiest way would be to use the .html() method on a dynamic tr which contains the other two td elements.
A trick is to clone them then wrap them in a tr and get the html of that
var others = $(this).closest('td').siblings().clone();
alert( others.wrapAll('<tr>').parent().html());
$(function(){
$('#myChoices [name="choice"]').on('change', function(){
var others = $(this).closest('td').siblings().clone();
alert( others.wrapAll('<tr>').parent().html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myChoices">
<tr>
<td><input type="radio" name="choice" value="1" /></td>
<td>Monday</td>
<td>Mar 7</td>
</tr>
<tr>
<td><input type="radio" name="choice" value="2" /></td>
<td>Tuesday</td>
<td>Mar 8</td>
</tr>
<tr>
<td><input type="radio" name="choice" value="3" /></td>
<td>Wednesday</td>
<td>Mar 9</td>
</tr>
<tr>
<td><input type="radio" name="choice" value="4" /></td>
<td>Thursday</td>
<td>Mar 10</td>
</tr>
<tr>
<td><input type="radio" name="choice" value="5" /></td>
<td>Friday</td>
<td>Mar 11</td>
</tr>
</table>
In a function form it would be
function getHtml() {
var item = $("#myChoices input[type='radio']:checked");
var otherTD = item.closest('td').siblings().clone();
return otherTD.wrapAll('<tr>').parent().html();
}
You could use jquery's siblings method:
var textContents = $("#myChoices input[type='radio']:checked").siblings().html();
Related
I have an html table with many check boxes. If I select the first check box, the next one is automatically selected. Does someone know how to do this? Also, the exact row number in table is unknown.
function toggle(source) {
var row_index = $("#checkFirst").index();
var row_first = $(".row").index();
checkboxes = document.getElementsByName('row');
for (var i = 0, n = checkboxes.length; i < n; i++) {
if (i == row_index && i == row_first) {
checkboxes[i].checked = source.checked;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody data-bind="foreach: list">
<tr>
<td><input type="checkbox" id="checkFirst" onClick="toggle(this)" /></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
You can use below code for this. First give class checkbox to all other checkboxes. Hope this can help you
$(function(){
$("#checkFirst").click(function () {
$('.checkbox').attr('checked', this.checked);
});
$(".checkbox").click(function(){
if($(".checkbox").length == $(".checkbox:checked").length) {
$("#checkFirst").attr("checked", "checked");
} else {
$("#checkFirst").removeAttr("checked");
}
});
});
You can try with below code. It will help you.
jQuery file:
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
<table>
<tbody data-bind="foreach: list">
<tr id="first">
<td><input type="checkbox" id="checkfirst" onClick="toggle('first',this.id)"/></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox" name="row"></td>
</tr>
<tr id="second">
<td><input type="checkbox" id="checksecond" onClick="toggle('second',this.id)"/></td>
<td><input type="checkbox" ></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</table>
Script
<script>
function toggle(source,id) {
chcked = $('#'+id).prop( "checked" );
if(chcked)
{
$('#'+source+' :checkbox').each(function() {
this.checked = true;
});
}
else
{
$('#'+source+' :checkbox').each(function() {
this.checked = false;
});
}
}
</script>
You can try this snippet.
function handleCheck(e) {
let will_change = false;
if (e.shiftKey && this.checked) {
checkboxes.forEach(element => {
if (element === this || element === last_checked) {
will_change = !will_change;
}
if (will_change) {
element.checked = true;
}
});
}
last_checked = this;
}
Then add a click event listener to each of the checkboxes you want to act as a group
https://codepen.io/anon/pen/GyQEJZ
this makes the first checkbox a global control for all
$('#checkFirst').on('change',function(){
if($(this).is(':checked'))
$('input[type="checkbox"]').prop('checked', true);
else
$('input[type="checkbox"]').prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<tbody data-bind="foreach: list">
<tr>
<td><input type="checkbox" id="checkFirst"/></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
and this is to select the following checkboxes in the same row
$('input[type="checkbox"]').on('change',function(){
$(this).parent().nextAll().find('input[type="checkbox"]').prop('checked', $(this).is(':checked'));
});
There are lots of examples on the internet, including SO, telling people how to loop through the rows of a table and get the values using Javascript or Jquery. Unfortunately, none of these examples work for me:
JavaScript:
var table = document.getElementById("tbInvoiceDetails");
var rowLength = table.rows.length;
for (var i = 0; i < rowLength; i += 1) {
var row = table.rows[i];
var cell = row.cells[10].innerHTML;
}
This gets:
<input id="InvoiceDetails_0__Title" name="InvoiceDetails[0].Vat" value="0" type="hidden">0
How can I get the value (=0) from this?
JQuery:
$("#tbInvoiceDetails tr").each(function () {
//Code
}
This simply does not work. I have tried every combination I can think of inside the "" and nothing works.
Table HTML with One Line:
<tbody id="tbInvoiceDetails">
<tr id="trInvoiceDetail0">
<td style="display:none">
<input name="InvoiceDetails.Index" value="0" type="hidden"></td>
<td style="display:none"><input name="InvoiceDetails[0].id" value="-1" type="hidden"></td>
<td style="display:none"><input name="InvoiceDetails[0].InvoiceId" value="0" type="hidden"></td>
<td><input id="InvoiceDetails_0__Title" name="InvoiceDetails[0].LineTypeId" value="1" type="hidden">1</td>
<td><input id="InvoiceDetails_0__Title" name="InvoiceDetails[0].AllocationCodeId" value="19" type="hidden">2030 6016750 KQ73020394 11014008</td>
<td><input id="InvoiceDetails_0__Title" name="InvoiceDetails[0].GspId" value="" type="hidden"></td>
<td><input id="InvoiceDetails_0__Title" name="InvoiceDetails[0].RunTypeId" value="" type="hidden"></td>
<td><input id="InvoiceDetails_0__Title" name="InvoiceDetails[0].BillingPeriodFromDate" value="06/08/2015" type="hidden">06/08/2015</td>
<td><input id="InvoiceDetails_0__Title" name="InvoiceDetails[0].BillingPeriodToDate" value="19/08/2015" type="hidden">19/08/2015</td>
<td><input id="InvoiceDetails_0__Title" name="InvoiceDetails[0].Net" value="9999" type="hidden">9999</td>
<td><input id="InvoiceDetails_0__Title" name="InvoiceDetails[0].Vat" value="0" type="hidden">0</td>
<td><input id="InvoiceDetails_0__Title" name="InvoiceDetails[0].InterestPay" value="0" type="hidden">0</td>
<td><input id="InvoiceDetails_0__Title" name="InvoiceDetails[0].InterestReceiveable" value="0" type="hidden">0</td>
<td><input id="InvoiceDetails_0__Title" name="InvoiceDetails[0].VatCodeId" value="8" type="hidden">8</td>
<td><input class="btn" id="btnRemoveInvoiceDetail" value="Remove" onclick="removeRow(0);" type="button"></td>
</tr>
</tbody>
Going the by-column-position route:
jQuery:
$('#tbInvoiceDetails tr td:nth-child(11) input').each(
function() {
var val = this.value;
console.log(val);
}
);
Pure JS:
var table = document.getElementById("tbInvoiceDetails");
var rowLength = table.rows.length;
for (var i = 0; i < rowLength; i += 1) {
var input = table.rows[i].cells[10].firstElementChild;
var val = input.value;
console.log(val);
}
here is my js:
function sumAllFields() {
var priceSum = 0;
$(".price").each(function () {
var o = $(this).parent().parent().index();
priceSum += Number($("#area" + o).text()) * $("#price" + o).val();
})
$("#sumPrice, #printSumPrice").html(priceSum.toFixed(2));
}
And here is relevant html:
<tbody id="tableBody">
<tr class="tableRow" id="tableRow0">
<td><input class="idNumber" id="idNumber0" type="number"></td>
<td><input class="description" id="description0" type="text"></td>
<td class="dimA" id="dimA0">520</td>
<td class="dimB" id="dimB0">785</td>
<td><input class="pcs" id="pcs0" type="number"></td>
<td class="area" id="area0">2.46</td>
<td><input class="price" id="price0" type="number"></td>
<td class="noprint"><span class="closed">×</span></td>
</tr>
<!-- and a few more in between... -->
<tr class="tableRow" id="tableRow8">
<td><input class="idNumber" id="idNumber8" type="number"></td>
<td><input class="description" id="description8" type="text"></td>
<td class="dimA" id="dimA8">510</td>
<td class="dimB" id="dimB8">785</td>
<td><input class="pcs" id="pcs8" type="number"></td>
<td class="area" id="area8">0.80</td>
<td><input class="price" id="price8" type="number"></td>
<td class="noprint"><span class="closed">×</span></td>
</tr>
</tbody>
What I am trying to do is to automatically sum all .price fields after one <tr> is dynamically deleted, and all I get is NaN. Before I delete any row, I get a nice number, but after I delete any rows, I get NaN.
It is because of the logic you have used to find the sibling price/area element. Assume you have added 4 items, so you have elements like area0/area1/area2/area3. Now you are deleting row 2 so the element area1 is no longer present then in your each loop in the second iteration o becomes 1 then it tries to find element #area1 but there is no such element which results in Number($("#area" + o).text()) returning NaN.
Try
function sumAllFields() {
var priceSum = 0;
$(".price").each(function () {
var $tr = $(this).closest('tr');
priceSum += (+$tr.find(".area").text() * +this.value) || 0;
})
$("#sumPrice, #printSumPrice").html(priceSum.toFixed(2));
}
Demo: Fiddle
Lets iterate table rows directly:
function sumAllFields() {
var priceSum = 0;
$('.tableRow').each(function () {
var row = $(this);
priceSum += (parseFloat(row.find('.area').text())
* parseFloat(row.find('.price').val())) || 0;
})
$('#sumPrice, #printSumPrice').html(priceSum.toFixed(2));
}
My checkbox group are in html table. Each row has checbox group. I am trying to put a select_all button in each row of table (which can select all or unselect all the checkbox of that particular row). I used javascript for the purpose. However, select all button checks all the checkbxes of the table. I couldnt find a way to select_all button applicable to only single row. Any idea?
I think the change in javascript can solve this prob, but I am unfamiliar with javascript orjquery.
function checkAll(bx) {
var cbs = document.getElementsByTagName('input');
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].type == 'checkbox') {
cbs[i].checked = bx.checked;
}
}
}
<form action="backend.php" method="POST" target="iframe_3">
<table border="10" width="900" bordercolor="green">
<tr>
<td colspan="3" style="background-color:#7F77AE">DNA</td>
<td><input type="checkbox" name="check_list[]" value="value 1">seq</td>
<td><input type="checkbox" name="check_list[]" value="value 2">codon</td>
<td><input type="checkbox" onclick="checkAll(this)">Select_all</td>
</tr>
<tr>
<td colspan="3" style="background-color:#7F77AE">RNA</td>
<td><input type="checkbox" name="check_list2[]" value="value 3">seq</td>
<td><input type="checkbox" name="check_list2[]" value="value 4">codon</td>
<td><input type="checkbox" onclick="checkAll(this)">Select_all</td>
</tr>
</table>
Using jQuery, this is a kind of trivial task. You actually just need to query for the <input> nodes within you specific <tr> node.
function checkAll(bx) {
var cbs = $( bx ).closest( 'tr' ).find( 'input:checkbox' );
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == 'checkbox') {
cbs[i].checked = bx.checked;
}
}
}
Without jQuery, this would look like
function checkAll(bx) {
var cbs = bx.parentNode.parentNode.querySelectorAll( 'input[type="checkbox"]' );
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == 'checkbox') {
cbs[i].checked = bx.checked;
}
}
}
jQuery way:
$(this).closest('tr').find('input[type=checkbox]').prop('checked', true);
fiddle
check this
<tr>
<td colspan="3" style="background-color:#7F77AE">DNA</td>
<td><input type="checkbox" name="check_list[]" value="value 1">seq</td>
<td><input type="checkbox" name="check_list[]" value="value 2">codon</td>
<td><input type="checkbox" onclick="checkAll(this)" id="check_list" role="selectall">Select_all</td>
</tr>
<tr>
<td colspan="3" style="background-color:#7F77AE">RNA</td>
<td><input type="checkbox" name="check_list2[]" value="value 3">seq</td>
<td><input type="checkbox" name="check_list2[]" value="value 4">codon</td>
<td><input type="checkbox" onclick="checkAll(this)" id="check_list2" role="selectall">Select_all</td>
</tr>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(e) {
$('[role="selectall"]').each(function(){
// + handle click of select all
$(this).bind('click.selall', handleSelectAll);
var group_name = $(this) .attr('id')+'[]';
$('[name='+group_name+']').bind('click.single', handleSingle);
})
});
function handleSingle(){
var grp_name = $(this).attr('name');
var sel_all_id = grp_name.replace('[','').replace(']', '');
if( $('[name='+grp_name+']').length == $('[name='+grp_name+']:checked').length){
$('#'+grp_name).prop('checked', true);
}else{
$('#'+grp_name).prop('checked', false)
}
}
function handleSelectAll(){
var group_name = $(this) .attr('id')+'[]';
if( $(this).is(':checked')){
$('[name='+group_name+']').prop('checked', true);
}else{
$('[name='+group_name+']').prop('checked', false);
}
}
})(jQuery)
</script>
the key is the id of the select all check box is same as the group name without paranthesis
Again with this one I have no idea what to call it but I will attempt to explain it the best I can.
I created a question similar to this before that did get answered but only because I wasn't 100% sure what I was looking for. Now I have worked out what I need etc..
So I have created this example, you will see that there are multiple inputs but they only work in the first column (due to no knowing how to make the others work). So now I need to get that working in ALL other columns using the same functions.
EXAMPLE
HTML:
<table>
<tr>
<th></th>
<th>Option1</th>
<th>Option2</th>
<th>Option3</th>
<th>Option4</th>
</tr>
<tr>
<td>Money</td>
<td><input type="number" id="money" /></td>
<td><input type="number" /></td>
<td><input type="number" /></td>
<td><input type="number" /></td>
</tr>
<tr>
<td>Upfront</td>
<td><input type="number" id="upfront" /></td>
<td><input type="number" /></td>
<td><input type="number" /></td>
<td><input type="number" /></td>
</tr>
<tr>
<td>Overall Price</td>
<td id="overallPrice"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Discount</td>
<td><input type="number" id="discount" /></td>
<td><input type="number" /></td>
<td><input type="number" /></td>
<td><input type="number" /></td>
</tr>
<tr>
<td>Dicount Price</td>
<td id="discountPrice"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Javascript/jQuery:
$(document).ready(function () {
$('input').keyup(function () {
overallPrice();
discountPrice();
});
});
function overallPrice() {
var cal1, cal2, result;
cal1 = parseFloat(document.getElementById("money").value);
cal2 = parseFloat(document.getElementById("upfront").value);
result = cal1 - cal2;
document.getElementById("overallPrice").innerHTML = "£" + result;
return result;
}
function discountPrice() {
var cal1, cal2, result;
cal1 = parseFloat(document.getElementById("discount").value);
cal2 = overallPrice();
result = cal2 - cal1;
document.getElementById("discountPrice").innerHTML = "£" + result;
}
So we have 2 inputs that will create the "Overall Price" and then the 3rd input will take that number and give the "Discount Price". If this was just 1 single column I could do it no problem but as I need this to work for all of the columns I'm not sure how I can do this using the same functions.
Hope this made some sort of sense if not let me know and I will try explain some more.
Here is a link to my other question, I added this part onto the end of it just encase you want to see where I started etc.
Other Question
*Note: There will be more then 2 sets of inputs, this is just an example. In my real version some of the inputs will not be used for certain columns and I will have to change some function to calculate certain columns differently. *
Here's another solution: FIDDLE
The idea is to find out which column the input is in (using .index()) and hand that index on to the overallPrice() and discountPrice() functions.
HTML
<table>
<tr>
<th></th>
<th>Option1</th>
<th>Option2</th>
<th>Option3</th>
<th>Option4</th>
</tr>
<tr id="money">
<td>Money</td>
<td><input type="number"/></td>
<td><input type="number" /></td>
<td><input type="number" /></td>
<td><input type="number" /></td>
</tr>
<tr id="upfront">
<td>Upfront</td>
<td><input type="number"/></td>
<td><input type="number" /></td>
<td><input type="number" /></td>
<td><input type="number" /></td>
</tr>
<tr id="overallPrice">
<td>Overall Price</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="discount">
<td>Discount</td>
<td><input type="number"/></td>
<td><input type="number" /></td>
<td><input type="number" /></td>
<td><input type="number" /></td>
</tr>
<tr id="discountPrice">
<td>Dicount Price</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
JavaScript
$(document).ready(function () {
$('input').change(function () {
var $this = $(this),
$row = $this.closest('tr'),
$column = $this.closest('td'),
columnIndex = $row.find('td').index($column[0]);
//overallPrice(columnIndex);
discountPrice(columnIndex);
});
});
function overallPrice(column) {
var cal1, cal2, result;
cal1 = parseFloat($('#money td').eq(column).find('input').val() || '0');
cal2 = parseFloat($('#upfront td').eq(column).find('input').val() || '0');
result = cal1 - cal2;
$('#overallPrice td').eq(column).text("£" + result);
return result;
}
function discountPrice(column) {
var cal1, cal2, result;
cal1 = parseFloat($('#discount td').eq(column).find('input').val() || '0');
cal2 = overallPrice(column);
result = cal2 - cal1;
$('#discountPrice td').eq(column).text("£" + result);
}
Try giving a custom attribute to the individual cells(I've used count) and then accessing all the cells in the same column using that attribute(using the parentElement.childNodes thing wouldn't work because the parent in this instance would be the row, and not the column). I've passed the count value to your overallPrice and discountPrice functions, and modified the HTML a bit.
SCRIPT
$(document).ready(function () {
$('input').keyup(function () {
discountPrice(this.attributes.count.value);
});
});
function discountPrice(n) {
var cal1, cal2, result;
cal1 = parseFloat(document.getElementsByClassName("discount")[n-1].value);
cal2 = overallPrice(n);
result = cal2 - cal1;
document.getElementsByClassName("discountPrice")[n-1].innerHTML = "£" + result;
}
function overallPrice(n) {
var cal1, cal2, result;
cal1 = parseFloat(document.getElementsByClassName("money")[n-1].value);
cal2 = parseFloat(document.getElementsByClassName("upfront")[n-1].value);
result = cal1 - cal2;
document.getElementsByClassName("overallPrice")[n-1].innerHTML = "£" + result;
return result;
}
HTML Your rows should look like this:
<tr>
<td>Overall Price</td>
<td count="1" class="overallPrice"></td>
<td count="2" class="overallPrice"></td>
<td count="3" class="overallPrice"></td>
<td count="4" class="overallPrice"></td>
</tr>
FIDDLE
Edit: This can be done even without adding a new(count) attribute. Instead of passing the this.attributes.count.value to the two price functions, you can do:
$('input').change(function () {
discountPrice($(this).parent().prevAll().length);
});
FIDDLE2