I have a table 'mytable' that looks like:
<tr>
<td><input type="checkbox" name="check[]" value="11"></td>
<td>11</td>
<td>2014-11-06 18:49:26</td>
<td>MESSAGE</td>
<td></td>
<td>MATCH5</td>
<td>NO MATCH</td>
<td>NO MATCH</td>
</tr>
I want to get the value of column 4 "MESSAGE" from a row if its checked. In How to get value of table cell with jquery from checkbox using absolute row number it was shown that
var ids = $('table input:checked').map(function(){
return $(this).closest('tr').find('td:eq(3)').text();
});
returns
Object["MESSAGE"]
How can I get just the contained text/html ?
Call get() at the end, to get an array. The values will be in that array.
var ids = $('table input:checked').map(function(){
return $(this).closest('tr').find('td:eq(3)').text();
}).get();
Otherwise, you just have a jQuery collection pointing to a bunch of strings.
Related
I am trying to delete a row in html via jquery or javascript. I'm reading from a directory, but if there's no information within a row, I don't want it to be visible. Let's just assume I have two rows, and a user within the directory doesn't have a mobile number, how to remove it for them?
I have genuinely tried so many things but I must be missing something.
<tr>
<td>email: %%email%%</td>
</tr>
<tr>
<td>mobile: %%MobileNumber%%</td>
</tr>
I would assume the row would delete just for the user without a mobile number.
You need to set the text as a variable, then find the substring after the ":" which will return the %%MobileNumber%%.
If the substring is empty, then we hide it.
As you can see the third td does not have the required text, so it is hidden.
$(function() {
$('td').each(function() {
var str = $(this).text();
var sub = str.substring(
str.indexOf(':', 1) + 1
);
if (sub == '') {
// or .remove()
$(this).hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>email: %%email%%</td>
</tr>
<tr>
<td>mobile: %%MobileNumber%%</td>
</tr>
<tr>
<td>mobile:</td>
</tr>
</tbody>
</table>
And if you only want it for the td containing "mobile:"
// find if a td starts with "mobile:" and if the substring after is empty
if ( str.match("^mobile:") && sub == '' ) {
$(this).hide();
}
Add a id to the row you want to hide, put the mobile: outside <td> then use JQuery to achieve the same
<tr id="hideIfNoData">
mobile:<td> %%MobileNumber%%</td>
</tr>
$('#hideIfNoData > tr td:empty').parent().hide()
I came across a problem whose solution has led me to post it here so others may make use of it or improvise better than me.
My Problem: I have a table of results with check boxes to select rows. The requirement was to know if I was selecting(using the checkboxes) the same set of one particular column value, if so I had to do something.
HTML code
Considering the below being my html code for the dynamic table(CFML). The tag has to be inside a loop to dynamically create the table content.
<table class="fixedTable">
<thead class="containerbg">
<tr class="listingheader">
<td>StagingID</td>
<td>BatchID</td>
<td>AuditID</td>
<td>Action</td>
<td>File Name</td>
<td>Card No</td>
<td>Card No</td>
</tr>
</thead>
<tbody>
<tr class="cur_row" >
<td>#staging_id#</td>
<td>#batch_import_job_id#</td>
<td>#audit_Id#</td>
<td>#code#</td>
<td class="file_name">#source_filename#</td>
<td>#card_number#</td>
<td class="tblResolve">
<input type="checkbox" class="checkBoxClass cb" name="resolveErrorsCheck" value="#row_no#">
</td>
</tr>
JS Code
//register the click event
$(document).ready(function() {
$(document).on('click', '.cb',enableDisableActions);
});
function enableDisableActions() {
var values = new Array();
$.each($("input[name='resolveErrorsCheck']:checked").closest('td').siblings('.file_name'),
function (){
values.push($(this).text());
});
const initial = values[0];
const result = values.filter(src => src != initial);
if(result.length){
//no duplicate file_name selected
//do something
}else{
//duplicate file_name selected
//do something
}
}
I am programmatically populating options to increase and decrease the value of an element and store the same in the DB table. To get a better idea, consider the following example:
<tr>
<td id="name_1">Element 1</td>
<td>increase icon</td>
<td>decrease icon</td>
</tr>
<tr>
<td id="name_2">Element 2</td>
<td>increase icon</td>
<td>decrease icon</td>
</tr>
<tr>
<td id="name_n">Element n</td>
<td>increase icon</td>
<td>decrease icon</td>
</tr>
Whenever I click any among the n increase / decrease icon, I need to access the value of #name_n. For which, I wrote the following function:
$(".increase").click(function(){
var id = $(this).attr('id'); //get the id of the element that was clicked.
console.log(id);
var arr = id.split("_"); //split to get the number
var no = arr[1]; //get the number
var name = $("#name_"+no).text(); //get the required value in name_n
console.log(name);
});
//replica for decrease class as well.
Problem :
Every time I click any increase icon, in my console, I'm getting id as inc_1 only! So, the value of name is Element 1 always. Same happens with click function for .decrease.
I have tried with the following ways to get the id:
var id = this.id;
var id = $(this).get(0).id;
var id = $(this)[0].id;
But nothing changed. The same problem persists. What's wrong and how do I resolve this?
Your code looks correct at first glance. Maybe there is some issue with rendering, perhaps the elements really get the same ID.
However, I would recommend a different approach for this task, without using ID's. You can achieve your goal by referencing the TD element relatively to the clicked increase/decrease button. I mean something like this.
$(".increase").click(function(){
var $td = $(this).closest("tr").children(":eq(0)"); //get the TR's first TD
var name = $td.text(); //get the required value in name_n td
console.log(name);
});
You could add a more generic class on the elements you wish tou target after the click(currently #name_n) and use the .closest and .siblings methods.
html
<tr>
<td id="name_n" class="target">Element n</td>
<td>increase icon</td>
<td>decrease icon</td>
</tr>
js
$(".increase").click(function(){
var name = $(this).closest('td').siblings('.target').text();
console.log(name);
});
Here is a working demo https://jsfiddle.net/0hru2jtx/
I have a table 'mytable' that looks like:
<tr>
<td><input type="checkbox" name="check[]" value="11"></td>
<td>11</td>
<td>2014-11-06 18:49:26</td>
<td>MESSAGE</td>
<td></td>
<td>MATCH5</td>
<td>NO MATCH</td>
<td>NO MATCH</td>
</tr>
I want to get the value of column 4 "MESSAGE" from a row if its checked
as you can see each row begins with a checkbox which have a value. however the value is non-sequential so I can't just go with the checkbox value (which I have been getting with
var IDs = $('input:checked').map(function(){
return $(this).val();
}).get();)
I need some way of counting table rows then I can use something like:
var id= $("#myTable tr").eq(ID).find('td').eq(4).val()
How to do this?
You were pretty close but consider what this is in the context of map().
this is the checkbox that is checked. From there you can find the closest tr and then the td with the 3rd 0-based index, and then get the text() of that td. td doesn't have a value so use text instead.
var ids = $('table input:checked').map(function(){
return $(this).closest('tr').find('td:eq(3)').text();
});
I´m new in JQuery and I have a trouble. I want to read a specific cell value from a table row where I have a checkbox. I have an event that handles the checkbox checked event. This is my code:
$("#businesses input:checkbox").change(function (
var $this = $(this);
if ($this.is(":checked")) {
//Here I want to read a value from a column in a row where is the checkbox
} else {
//Here I want to read a value from a column in a row where is the checkbox
}
});
I have a table called "businesses" and it has this format
<table id="businesses">
<tr>
<th>Select Value</th>
<th>Value</th>
</tr>
<tr>
<td><input type="checkbox" class="selectedService" title="Seleccionar" /></td>
<td>125</td>
</tr>
<tr>
<td><input type="checkbox" class="selectedService" title="Seleccionar" /></td>
<td>126</td>
</tr>
</table>
What I want to do, is that when I select a checkbox, get the value field of its row.
If I press the first checkbox I want to get 125.
Thanks!!!
Starting from your checkbox (this in the event handler function), you need to go up to the containing <td> element, across to the next <td> element, then get its text:
$('#businesses input:checkbox').change(function(e) {
if(this.checked) {
var value = parseInt($(this).closest('td').next('td').text(), 10);
// above will convert it from a string to an integer
}
else {
// same as above? Seems redundant
}
});
Use siblings() of the parent:
$this.closest('td').siblings().text();
If this is not the only other <td> siblings() would return all of the rest so use appropriate selector to filter them.
You could access it with:
$this.parent().next().text();
Try this...
$("#businesses input:checkbox").on ('change', function (e)
if ($(this).is(":checked")) {
$( e.target ).closest("td").text();
} else {
//Here I want to read a value from a column in a row where is the checkbox
}
});
Greetings.