I have a table which has several columns holding text values and one column that’s a checkbox element. On a button click event, I’m trying to capture the text data for all elements across checked rows, but I’m having trouble accessing the text data of elements of the checked rows.
I’m able to get the checked rows of the original table by doing the following:
var table =$(‘#TableID tr’).filter(‘:has(:checkbox:checked)’).find(‘td’);
This works, and, logging the resultant jquery object in the console, Im able to see the tds of interest.
However, I’ve not been able to retrieve and store the text values of each td of the “table” jquery object. Here’s what I have so far:
table.find(“tbody tr”).each(function() { var $tds=$(this).find(‘td’),comp_name=$tds.eq(0).text(),pos=$tds.eq(1).text(),address=$tds.eq(2).text();});
etc, basically storing explicitly all attributes of a row, and this is done on the checked rows. But this returns nothing. No error, no values. I’ve also tried other approaches but nothing seems to work.
How can I capture this text row data for checked rows?
Sample row:
Company | Position | Years | Applicable?
Google | janitor | 3 | (checked)
Nokia | swe | 1 | (unchecked)
In the above we’d want the text values for each of the attributes of just the first row
The trick here is in the element to target and how to iterate them.
You were in fact quite close but your function wasn't returning anything.
$('button').click(function() {
var $trs = $('tr:has(:checkbox:checked)', 'table');
var res = [];
$trs.each(function() {
$td = $(this).children('td');
// This is the missing part
res.push({
comp: $td.eq(0).text(),
pos: $td.eq(1).text(),
add: $td.eq(2).text(),
})
})
console.log(res);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="company">Company 1</td>
<td class="position">Position 1</td>
<td class="address">Address 1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td class="company">Company 2</td>
<td class="position">Position 2</td>
<td class="address">Address 2</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td class="company">Company 3</td>
<td class="position">Position 3</td>
<td class="address">Address 3</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<button>
Go to work
</button>
Related
I am working with a table that has two rows: the header row and then the body row. In the body row, each column contains another table. Like this:
<table id="example">
<thead>
<tr>
<td>Col A</td>
<td>Col B</td>
<td>Col C</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top">
<table>
<tr>
<td>Data</td>
<td>Data2</td>
</tr>
</table>
</td>
<td valign="top">
<table>
<tr>
<td>Data3</td>
<td>Data4</td>
</tr>
</table>
</td>
<td valign="top">
<table>
<tr>
<td>Data5</td>
<td>Data6</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
I have my datatable setup like this:
<script type="text/javascript">
const columns = [
{ title: '' },
]
let table = $('#example').DataTable({
createdRow: function(row) {
$(row).find('td table')
.DataTable({
columns: columns,
dom: 'tf'
})
}
})
</script>
The problem is that when I search for something, I want ALL the tables (including the nested ones) to filter out the results. So in my code above, as an example, if I search for "Data2", I would expect the second and third columns to become empty and just one result appear in the first column. However, at present, since "Data2" is found in this row (of which there is only one in this table), it simply returns ALL the data.
I found a REALLY good example that is close to what I want (which I what my current code is based on):
http://jsfiddle.net/davidkonrad/8pzkr6yn/
If we use the example from the JSFiddle, you can see searching for "722" returns only the last row, but still all the results from each nested table from within that row are there. I'd like it so that searching 722 globally will return the results as if 722 was searched individually in each column.
How can I adjust the code to make it so that all the nested tables get filtered out, not just the main table?
Bonus points if we can eliminate the search box in every nested datatable!
So let's skip the the table headers to my table body. I have a populated table:
HTML:
<tbody>
<tr *ngFor="let e of emails; let i = index">
<td <input type="checkbox" id="email-checkbox" (change)="addToSelectedList($event, e)"></input></td>
<td id="subject-{{i}}">{{e.sender}}</td>
<td id="subject-{{i}}">{{e.subject}}</td>
<td id="subject-{{i}}">{{e.date}}</td>
</tbody>
I want the table whole row to display a CSS class when the user checks the checkbox. And then the color should go back to normal when the user deselects. Just UI stuff to show the user that an email has been selected. I currently have an empty CSS and .ts file.
The way you have done it here is more involved because presumably you have some logic inside addToSelectedList event that will add/remove the email depending on the checked state. The easiest way is to add a property on the email entity isSelected, and do this:
<input ... [checked]="e.isSelected" >
On your tr add the ngclass binding as suggested by others as follows:
<tr [ngClass]="{ 'selectedcssclass' : e.isSelected }"...
Other observation in your code there isn't a closing tr that should be wrapping around all the tds.
Not an Angular expert, but you can achieve just that using a JS onchange event bound to your checkbox:
$(".box").on("change", function() {
$(this).parents("tr").toggleClass("highlight");
});
.highlight {
background-color: #ffff00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Label 1</td>
<td><input type="checkbox" class="box"/></td>
</tr>
<tr>
<td>Label 2</td>
<td><input type="checkbox" class="box"/></td>
</tr>
</table>
I have a table which has multiple rows and a link on the end.
I want to click on the link in the row which has the text I'm looking for. Example:
<table class="repeater large">
<tbody>
<tr>
<td headers="Cardholder ID" nowrap="nowrap">1234</td>
<td headers="Cardholder Name">JONATHAN</td>
<td headers="Client Name">Some Company</td>
<td headers="CardStatus">Closed</td>
<td headers="Card Last Four">1234</td>
<td headers="View" nowrap="nowrap"><a id="button" title="Activity" href="#">Activity</a></td>
</tr>
<tr class="alternaterow">
<td headers="Cardholder ID" nowrap="nowrap">5555</td>
<td headers="Cardholder Name">JONATHAN</td>
<td headers="Client Name">Some Company</td>
<td headers="CardStatus">Active</td>
<td headers="Card Last Four">555</td>
<td headers="View" nowrap="nowrap"><a id="button" title="Activity" href="#">Activity</a></td>
</tr>
</tbody>
</table>
I want to click the anchor on the row where Cardholder ID is '5555' I'm curious on how this would be done with CapserJS and finding the specific selector to do this.
I've tried breaking down the table into a array and getting the specific child number.
I was trying to create a way to get to that specific link in the table.
function getLinks() {
var links = document.querySelectorAll('#page > table');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('id');
});
}
I simple need to get that link on the row of my choice.
You could iterate over the table rows then get the id from the first element.
If the text equals the ID you are looking for then get the last element and click();
var rows = document.querySelectorAll('table tbody tr');
[].forEach.call(rows, function(tr) {
var td = tr.querySelector('td:first-child');
if (td.innerText === '5555')
tr.querySelector('td:last-child').click();
});
See the fiddle here
I've a table like this:
<table>
<tr>
<td class="type">Order</td>
<td class="orderid">1002</td>
<td><button class="copy">Copy Row</button></td>
</tr>
<tr>
<td class="type">Order</td>
<td class="orderid">1004</td>
<td><button class="copy">Copy Row</button></td>
</tr>
<tr>
<td class="type">Refund</td>
<td class="orderid">1004</td>
<td><button class="copy">Copy Row</button></td>
</tr>
</table>
I've a script to copy data from a particular "#id" or ".class" element. What, I needed is to find a way to get the data of that particular row whenever, the Copy button is pressed. I want the columns 'orderid' and 'type' values of that particular row to be copied, but I'm not able to find a way to extract the data between the <td> tags with same class names.
Simple answer:
$('.copy').click(function(){
var order_id = $(this).parent().parent().find('.orderid').text();
var type = $(this).parent().parent().find('.type').text();
alert(order_id); ///this wil get you the value
});
I made the result here: http://codepad.viper-7.com/ahsVfB
check it.
<tr>
<td class="type">Refund</td>
<td class="orderid">1004</td>
<button class="copy">Copy Row</td>
</tr>
$(".copy").click(
function(event)
{
var copy=($(event.target).parent().find('.type'));
var order=($(event.target).parent().find('.orderid'));
}
);
You must paste that copied date somewhere. Make this copy and order as global variables. When you click paste, use this variable's value
take a look on this fiddle http://jsfiddle.net/3p29x2s9/11/
var buttons=document.getElementsByClassName("copy");
console.log(buttons);
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
var columns = this.parentElement.parentElement.getElementsByTagName("td");
var type= columns[0].innerText;
var orderid=columns[1].innerText;
alert(type + " "+orderid);
}
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have such html structure:
<table border=1 >
<tr> <!--this tr has one <td> that needs to be 100% width-->
<td></td>
</tr>
<tr> <!--this tr has two <td> that each need to be 50% width-->
<td></td>
<td></td>
</tr>
<tr> <!--this tr has three <td> that each need to be 33.3333% width-->
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!--this tr has one <td> that needs to be 100% width-->
<td></td>
</tr>
</table>
how can i do, that for example first tr td is for 100%, second tr two td's are both 50%, but all them for 100% and so over, i need to fill td to tr width, and if there more than one td, to do that they divide this width...
http://jsfiddle.net/ujMgM/
possibly without using js...
update: NO! colspan
Using HTML
Just use the colspan HTML attribute:
This attribute specifies the number of columns spanned by the current cell. The default value of this attribute is one ("1").
This means that if your table has a total of 3 columns and you want one cell to span all 3 columns, you'd specify a colspan of "3":
<table border=1 >
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td colspan="2">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
Using jQuery
You can instead use jQuery to add in the colspan attributes for you:
// Get a reference to the table's tbody element, and define the number of columns
var $tbody = $('table').find('tbody'),
columns = 3;
// Loop through each tr within the table's tbody
$tbody.find('tr').each(function() {
// Determine the number of cells, and set the colspan
var children = $(this).children().size(),
colspan = columns / children;
// If the colspan variable is set to *.5, give the first cell higher colspan
if (colspan % 1 === 0.5) {
$(this).children('td').attr('colspan', colspan - 0.5);
$(this).children('td:first').attr('colspan', colspan + 0.5);
}
// Otherwise give all cells equal colspan
else
$(this).children('td').attr('colspan', colspan);
});
JSFiddle demo.
Note how I'm using the tbody here? Ideally your table should have a tbody element, but most browsers will add this in for you.
Use colspan="0"
Or use jQuery to calculate most td in rows and add colspan dynamically.
You have to use colspan="3" if you want to fit the td for all the three columns.
About colspan:
This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is 1; if its value is set to 0, it extends until the end of the , even if implicitly defined, that the cell belongs to. Values higher than 1000 will be considered as incorrect and will be set to the default value
colspan Reference mdn
The modified code looks like
<table border=1 >
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
Fiddle Demo