I want to get with jQuery the greater id for all tr in a table.
If I have this table:
<table id="productsTable" style="width:100%;">
<thead>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr id="Row_0">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_1">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_2">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_3">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
I want to get the id Row_3.
I can use the :last selector, $( "tr:last" ) but it doesn't work because it returns the row for the <tfoot> section.
Maybe there is a way to add a filter to the :last selector to find the last tr with an id that begins with Row_.
Any advice?
You can use attribute start with selector:
$("tr[id^='Row_']:last" )
Assuming all the rows in tbody have the id just use tbody in selector
$( "tbody tr:last" )
You can use starts with
alert($("tr[id^='Row_']:last").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="productsTable" style="width:100%;">
<thead>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr id="Row_0">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_1">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_2">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_3">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
If you just want last tr inside tbody then use:
$("tbody tr:last")
Related
I am trying to create a calendar in which you can switch between month and week view. I don't think it will be hard to create the grid for the calendar, but I want to have a popup that appears when I click a slot on the calendar. Just like in Google Calendar, when you click a slot, a pop-up appears and you can edit your new event. I want to do something like that where the event will be created and then stored in the backend SQL file that I have.
This is the code I have currently:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Week View</h2>
<table>
<tr>
<th>Time</th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td>6:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>11:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>12:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>11:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>12:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
and this basically shows this
basic time schedule
I want to make the empty slots like some kind of button and that, when clicked, will open up a popup that will give me the option to choose the time of the event I want to place. After 'saving' this event, I want to send this info to my SQL database and then this block will then be disabled. I have already looked into existing websites that provide code for calendars, but I prefer to do it on my own (please don't send me back to fullcalendar). How do I make these empty slots, like buttons, that will open up a popupform?
Let me know if there is anything you want me to clarify. Thanks!
You could place a <div> in each <td> and assign 'onclick' method to run JS function.
In your JS function, use createElement to create a popup <div> and appendChild it to body. Then you will see the popup.
I'm currently working on a JavaFX Project which has a WebView. The Html Code is builded by a String Builder.
I want to get the column and row headers of the selected cell.
I need them for my Java Code.
The current state of the WebPage you'll find in the following example.
Here the code:
$(document).ready(function() {
$("td").click(function() {
$("td.selected").removeClass("selected");
$(this).addClass("selected");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
<table id='bookingTable'>
<tr>
<td></td>
<th scope='col'>21.2.2019</th>
<th scope='col'>22.2.2019</th>
<th scope='col'>23.2.2019</th>
<th scope='col'>24.2.2019</th>
<th scope='col'>25.2.2019</th>
<th scope='col'>26.2.2019</th>
<th scope='col'>27.2.2019</th>
</tr>
<tr>
<th scope='row'>1</th>
<td colspan='1'>
<div id='name'> Person One</div>
<div id='bid'>B-ID:1</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>3</th>
<td></td>
<td colspan='4'>
<div id='name'> Person Two</div>
<div id='bid'>B-ID:2</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>5</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>6</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>7</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>8</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>9</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>10</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>11</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
The CSS you can see in the jsfiddle
The hard part is getting the column header and row header, this can be achieved with by referencing the table parent and then the specific column/row of the clicked element.
var columnHeader = e.delegateTarget.rows[0].cells[this.cellIndex]
var rowHeader = this.parentNode.cells[0];
Once you have those elements you can easily measure the width and height using $(element).height(); and $(element).width();.
Let me know if this works for you.
$(document).ready(function() {
$('table').on('click', 'td', function(e) {
var columnHeader = e.delegateTarget.rows[0].cells[this.cellIndex]
var rowHeader = this.parentNode.cells[0];
console.log(rowHeader)
console.log(columnHeader)
var rowHeadWidth = $(rowHeader).width();
var rowHeadHeight = $(rowHeader).height();
var columnHeadWidth = $(columnHeader).width();
var columnHeadHeight = $(columnHeader).height();
console.log("row header dimensions are: " + rowHeadWidth + " x " + rowHeadHeight)
console.log("column header dimensions are: " + columnHeadWidth + " x " + columnHeadHeight)
$("td.selected").removeClass("selected");
$(this).addClass("selected");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
<table id='bookingTable'>
<tr>
<td></td>
<th scope='col'>21.2.2019</th>
<th scope='col'>22.2.2019</th>
<th scope='col'>23.2.2019</th>
<th scope='col'>24.2.2019</th>
<th scope='col'>25.2.2019</th>
<th scope='col'>26.2.2019</th>
<th scope='col'>27.2.2019</th>
</tr>
<tr>
<th scope='row'>1</th>
<td colspan='1'>
<div id='name'> Person One</div>
<div id='bid'>B-ID:1</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>3</th>
<td></td>
<td colspan='4'>
<div id='name'> Person Two</div>
<div id='bid'>B-ID:2</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>5</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>6</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>7</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>8</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>9</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>10</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>11</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
my idea with jquery.
$(document).ready(function () {
$("td").click(function(){
$("td.selected").removeClass("selected");
$(this).addClass("selected");
let rootMe = $(this).parents()[0];
let spanValue = Number($(this).attr('colspan')) || 1;
getCurrentTHhtml(rootMe, spanValue);
});
function getTH(){
let allTHValue = [];
let column1 = $('#bookingTable tr').eq(0).find('th');
column1.each(function(){
allTHValue.push($(this).html());
});
return allTHValue;
}
function getCurrentTHhtml(rootMe, spanValue){
let inMe = rootMe.children;
let j;
let p = 0;
let myPoint;
let allColsInRow = rootMe.children.length;
let thValues = getTH();
let result = [];
for(j=0;j<inMe.length;j++){
if(inMe[j].localName === 'td'){
if(inMe[j].classList[0] === "selected"){
myPoint = p;
}
p++;
}
}
p=0;
for(j=myPoint;j<allColsInRow;j++){
if(p<spanValue)
result.push(thValues[j]);
p++;
}
console.log(result);
console.log(inMe[0]);
}
});
td,
th {
border: 1px solid rgb(190, 190, 190);
padding: 10px;
}
td:hover, td.selected {
background-color: #FF9900
}
th[scope="col"] {
background-color: #696969;
color: #fff;
}
th[scope="row"] {
background-color: #d7d9f2;
}
caption {
padding: 10px;
caption-side: bottom;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-family: sans-serif;
font-size: .8rem;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
<table id='bookingTable'>
<tr>
<td></td>
<th scope='col'>21.2.2019</th>
<th scope='col'>22.2.2019</th>
<th scope='col'>23.2.2019</th>
<th scope='col'>24.2.2019</th>
<th scope='col'>25.2.2019</th>
<th scope='col'>26.2.2019</th>
<th scope='col'>27.2.2019</th>
</tr>
<tr>
<th scope='row'>1</th>
<td colspan='1' >
<div id='name'> Person One</div>
<div id='bid'>B-ID:1</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>3</th>
<td></td>
<td colspan='4'>
<div id='name'> Person Two</div>
<div id='bid'>B-ID:2</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>5</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>6</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>7</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>8</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>9</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>10</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope='row'>11</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
I have a table as shown:
<table border="1" cellpadding="1" cellspacing="1" class="td1166">
<tbody>
<tr>
<td>Number</td>
<td>A</td>
<td>B</td> //Assume that this cell indicate the column I need to select
<td>C</td>
<td>D</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td> //So the last cell in the 'A' column is the one I want to add property, and A is known.
<td></td>
<td></td>
</tr>
</tbody>
</table>
All the need I have presented in the code.
I was trying using jQuery but I have no idea how to select as such. Hope your kind help!
You can try something like this, note: this will only work for the first and last rows, you will need different selectors if you have different rows
$('tr:first td').each(function(i,v){
if($(this).text() == "B") {
var index = $(v).index();//get the index of the colomn
$('tr:last td').eq(index).css('color','red');//select the element
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="1" cellspacing="1" class="td1166">
<tbody>
<tr>
<td>Number</td>
<td>A</td>
<td>B</td> <!--//Assume that this cell indicate the column I need to select-->
<td>C</td>
<td>D</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>here</td><!-- //So the last cell in the 'A' column is the one I want to add property, and A is known.-->
<td></td>
<td></td>
</tr>
</tbody>
Let's say I have a table containing rows which contain a table cell having a data-time attribute and may or may not be visible (ie. display: none). This visibility is dynamic and at any point a row may change.
Only the first of three table cell in these rows contains a data-time attribute.
The table rows are already grouped according to their children's data-time attribute value. My goal is to utilize JS/jQuery to insert a new table row above the first/unique visible occurrence of any particular data-time value. This row should contain a table cell which spans the entire width of the table and has text equivalent to the corresponding data-time value.
Example start:
<table>
<tr style="display:none;">
<td data-time="7:15 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="9:30 pm"></td>
<td></td>
<td></td>
</tr>
<tr style="display:none;">
<td data-time="9:30 pm"></td>
<td></td>
<td></td>
</tr>
<table>
Example goal:
<table>
<tr style="display:none;">
<td data-time="7:15 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">8:00 pm</td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">9:30 pm</td>
</tr>
<tr>
<td data-time="9:30 pm"></td>
<td></td>
<td></td>
</tr>
<tr style="display:none;">
<td data-time="9:30 pm"></td>
<td></td>
<td></td>
</tr>
<table>
Is this what you are looking for:-
http://jsfiddle.net/9XTat/
$('#addRow').click(function(){
$('td[data-time]',$('tr').not('tr[style="display:none;"]')).each(function(i,o){
var lastelement = $('td[data-time="' + $(this).data('time') + '"]').first();
if((lastelement.parent('tr').prev('tr.textRow')).length == 0)
{
var newelement = '<tr class="textRow"><td colspan="3">' + $(this).data('time') + '</td> </tr>'
lastelement.parent().before(newelement);
}
});
There is a html table with the following structure:
<table>
<tr class="header">
<td><img id="test_click" src=""></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr class="header">
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
How can i hide all table rows between two using jquery?
This code does not work as i suspected :(
$("#test_click").click(function(){
$(this).parent().parent().nextUntil('tr.header').find('tr').hide();
});
nextUntill already selects your trs. No need to .find anything:
$("#test_click").click(function() {
$(this).parent().parent().nextUntil('tr.header').hide();
});
http://jsfiddle.net/nMBrw/