I 'm trying to get the text of the td that belong to checked radio buttons, but I can't and my code doesn't work correctly:
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>male</td>
</tr>
$("body").on("change", "input[name='radio_org_id']:radio:checked", function () {
$('input[name="radio_org_id"]:radio:checked').each(function () {
var vIns_title = $(this).next().find('td').text()
alert(vIns_title)
});
Use $(this).parent().next("td").text()
$("body").on("change", "input[name='radio_org_id']:radio:checked", function() {
$('input[name="radio_org_id"]:radio:checked').each(function() {
var vIns_title = $(this).parent().next("td").text()
alert(vIns_title)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>male</td>
</tr>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>female</td>
</tr>
</table>
Try this $(this).closest('td').next('td').text() document for closest(). And your click function selector was wrong.so change as like this "input[name='radio_org_id']"
$("body").on("change", "input[name='radio_org_id']", function() {
$('input[name="radio_org_id"]:checked').each(function() {
var vIns_title = $(this).closest('td').next('td').text()
console.log(vIns_title)
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>male</td>
</tr>
<table>
Your initial selector is flawed as you only select already checked elements. The :radio is also redundant.
To fix your issue, use closest().next() to get the sibling td element. Try this:
$('table').on("change", "input[name='radio_org_id']", function() {
if ($(this).is(':checked')) {
var vIns_title = $(this).closest('td').next('td').text()
console.log(vIns_title)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>male</td>
</tr>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>female</td>
</tr>
</table>
You should also note that you could potentially make this much simpler by placing a value on the radio input and reading that out in the JS code.
Related
I have dynamic table that in one td passes php vales of prices and on end of the table is sum of those prices. There is also a checkbox in every row default checked. I need to empty the content of row where checkbox is unchecked so it removes that price value out of sum calculation.
Question, will that even remove that value? I know setting the td field to hide does not.
Value cell:
<td style="width:10%" class="rowDataSd" id="value">
<?php echo
str_replace(array(".", ",",), array("", "."), $row['rad_iznos']);
?>
</td>
Checkbox cell:
<td style="width:3%">
<input class="w3-check" type="checkbox" checked="checked" id="remove" name="uvrsti" value="<?php echo $row['rad_id']?>">
</td>
I tried with this but nothing happens with no errors:
$(document).ready(function(){
if($("#remove").is(':checked')) {
$("#value").show();
} else {
$("#value").empty();
}
});
I can pass the unique values into each checkbox and value element into id's like:
id="<?php echo $row['rad_id']?>"
. So they tie each other but don't know how to say in JS to empty those elements.
I was also thinking something along the lines of, if on some row checkbox is unchecked empty closest td with id="value". My guess is that would be best solution but I don't know how to write it.
Or even if checkbox is unchecked remove css class .rowDataSd to closest td with id="vale" based on whom calculation is made.
Sum script:
var totals=[0,0,0];
$(document).ready(function(){
var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");
$dataRows.each(function() {
$(this).find('.rowDataSd').each(function(i){
totals[i]+=parseFloat( $(this).html());
});
});
$("#sum_table td.totalCol").each(function(i){
$(this).html('<span style="font-weight: bold;text-shadow: 0.5px 0 #888888;">'+totals[i].toFixed(2)+' kn</span>');
});
});
As seen on picture need to remove row out of calculation if checkbox is unchecked. Keep in mind I dont want to delete to row, just remove it our of calculation.
Any help with how to approach this is appreciated.
Here is a basic example.
$(function() {
function getPrice(row) {
var txt = $(".price", row).text().slice(1);
var p = parseFloat(txt);
return p;
}
function calcSum(t) {
var result = 0.00;
$("tbody tr", t).each(function(i, r) {
if ($("input", r).is(":checked")) {
result += getPrice(r);
}
});
return result;
}
function updateSum(tbl) {
var t = calcSum(tbl);
$("tfoot .total.price", tbl).html("$" + t.toFixed(2));
}
updateSum($("#price-list"));
$("#price-list input").change(function() {
updateSum($("#price-list"));
});
});
#price-list {
width: 240px;
}
#price-list thead th {
width: 33%;
border-bottom: 1px solid #ccc;
}
#price-list tfoot td {
border-top: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="price-list">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="item name">Item 1</td>
<td class="item price">$3.00</td>
<td><input type="checkbox" checked /></td>
</tr>
<tr>
<td class="item name">Item 2</td>
<td class="item price">$4.00</td>
<td><input type="checkbox" checked /></td>
</tr>
<tr>
<td class="item name">Item 3</td>
<td class="item price">$5.00</td>
<td><input type="checkbox" checked /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td class="total price">$0.00</td>
<td> </td>
</tr>
</tfoot>
</table>
It all boils down to setting up an event handler for the checkboxes. The event handler should perform the following:
Track the checkbox change event for all checkboxes and the DOM ready event
Calculate the total of all rows with checkbox checked
Set the total to the total element
It call also perform any desired changes on the unchecked row .. not done in sample code below
THE CODE
$(function() {
$('.select').on('change', function() {
let total = $('.select:checked').map(function() {
return +$(this).parent().prev().text();
})
.get()
.reduce(function(sum, price) {
return sum + price;
});
$('#total').text( total );
})
.change();//trigger the change event on DOM ready
});
THE SNIPPET
$(function() {
$('.select').on('change', function() {
let total = $('.select:checked').map(function() {
return +$(this).parent().prev().text();
})
.get()
.reduce(function(sum, price) {
return sum + price;
});
$('#total').text( total );
})
.change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>1000</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
<tr>
<td>Item 2</td>
<td>1200</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
<tr>
<td>Item 3</td>
<td>800</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
<tr>
<td>Item 4</td>
<td>102000</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
</tbody>
</table>
<span>TOTAL</span><span id="total"></span>
Source HTML structure.
<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
Event: The Source HTML struture turns into the Target HTML struture after typing test1 in input whose id is data1 and mouse focus go out of the input.
Target HTML structure.
<table>
<tr>
<td>class</td>
<td>test1</td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
Here is my JS.
function changeNode(event){
ob =document.activeElement;
_str = ob.value;
ob.parentNode.removeChild(ob);
ob.parentNode.innerText = _str;
}
document.addEventListener("blur",changeNode,true);
Why my JS can't achieve my expected target?
How to fix it?
You are selecting the active element while the event is that an object's focus is lost.
You should select event.target as ob and your code should work:
Also: you don't need to delete the object, your overriding all inner text so the object is automatically deleted.
function changeNode(event){
ob = event.target;
_str = ob.value;
ob.parentNode.innerText = _str;
}
document.addEventListener("blur",changeNode,true);
<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
Several problems in your code:
You need to add the event listener to the input itself, not the document object. You can then simply use event.target instead of activeElement (input is no longer active after the blur event…)
You're trying to access ob.parentNode after removing ob. Try storing it in a variable first:
function changeNode(event) {
var ob = event.target;
var cell = ob.parentNode;
var _str = ob.value;
cell.removeChild(ob);
cell.innerText = _str;
}
document.querySelectorAll("input").forEach(function(input) {
input.addEventListener("blur", changeNode);
});
<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
Note: querySelectorAll(…).forEach
might not be reliable in some old browsers, if you need to support them, see css-tricks.com: Loop Over querySelectorAll Matches
function changeNode(event){
var ob=event.target;
ob.parentNode.append(ob.value);
ob.parentNode.removeChild(ob);
}
document.getElementById("data1").addEventListener("blur",changeNode,true);
<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
function changeNode(event) {
var ob = event.target;
var cell = ob.parentNode;
var _str = ob.value;
cell.removeChild(ob);
cell.innerText = _str;
}
document.addEventListener("blur",changeNode,true);
I have a table with this structure:
<table>
<tr>
<td>link1</td>
<td>link2</td>
<td>link3</td>
<td><input type = "checkbox" onclick = "func()"></td>
</tr>
</table>
function func(){
//I have to alert link1 here.
}
Can anybody tell me how to do this?
Thanks in advance.
EDIT 1: There are multiple rows of the same type and clicking on a particular check-box should alert the corresponding <a> text.
you can do like this with jquery. Just change the number of the eq. And all table with input with class of checkbox it will run. you can play with it.
$('.checkbox').on('click',function(){
var e = $(this).closest('table').find('td a');
alert(e.eq(0).text());
});
table{
border: 1px solid red;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table1">
<tr>
<td>link1</td>
<td>link2</td>
<td>link3</td>
<td><input type = "checkbox" class="checkbox"></td>
</tr>
</table>
<table class="table2">
<tr>
<td>link4</td>
<td>link5</td>
<td>link6</td>
<td><input type = "checkbox" class="checkbox"></td>
</tr>
</table>
Since you are using jQuery, use a jQuery handler in which you can find the a value in the same row
jQuery(function($) {
$('#my-table input[type="checkbox"]').change(function() {
alert($(this).closest('tr').find('td:first-child a').text())
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table">
<tr>
<td>link-1-1</td>
<td>link-1-2</td>
<td>link-1-3</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>link-2-1</td>
<td>link-2-2</td>
<td>link-2-3</td>
<td>
<input type="checkbox">
</td>
</tr>
</table>
How can I insert something after the second form with mform class, for this markup:
<table id="sortme">
<tr>
<td>1</td>
<td><form class="mform"></form></td>
</tr>
<tr>
<td>2</td>
<td><form class="mform"></form><!---Insert Me here !---></td>
</tr>
<tr>
<td>3</td>
<td><form class="mform"></form></td>
</tr>
</table>
To insert after the first form, I can use:
$(function () {
$('<div>block</div>').insertAfter("#sortme form.mform:first");
});
so I've tried this code for the second, didn't work:
$(function () {
$('<div>block</div>').insertAfter("#sortme > form.mform:nth-child(2)");
});
Try .insertAfter("#sortme form.mform:eq(1)");
You, also, may use a counter, conditional statement and append as follows:
<script>
$(document).ready(function(){
counter = 0;
$(".mform").each(function(){
if (counter === 1){
$(this).append("<div>Block</div>");
}
counter++;
});
});
</script>
A demo is HERE
Is it possible to loop through a list of table cells and check if any has a particular event (for example click), and then execute the callback function?
You can use a td selector and the each method to loop and use the events data to get at the events you are looking for:
$("td").each(function ()
{
//Do you work here
});
So, for the following HTML:
<table id="t1">
<tr> <td id="t1A">A <td> </tr>
<tr> <td>B <td> </tr>
<tr> <td>C <td> </tr>
<tr> <td>D <td></tr>
</table>
<table id="t2">
<tr> <td id="t2A">A <td> </tr>
<tr> <td>B <td> </tr>
<tr> <td>C <td> </tr>
<tr> <td>D <td></tr>
</table>
You can use the following:
$("#t1A").click(function () {
alert("t1A click event");
});
$("td").each(function () {
var events = $._data(this, "events")
if (!events) return;
var clickEvents = events.click;
if (!clickEvents) return;
if (clickEvents.length > 0) {
alert($(this).attr("id") + " has a click event");
$(this).click(); // Execute the click if you so desire.
}
});
See this example fiddle: http://jsfiddle.net/sdnr6/1/