I'm having trouble extracting "href" value of "LINE_NAME" (expected value is "www.link.com").
It's a content of a table which always has only header + 1 row, column order and number can be different though. "LINE_NAME" column is always there in the exact format
this call returns "undefined":
var url = $('.a-IRR-table tbody').children().eq(2).find('td[headers="LINE_NAME"] a').attr('href');
console.log(url);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table summary="Search Results" class="a-IRR-table" id="79" style="margin-top: -45px;">
<tbody>
<tr>
<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="625" role="presentation">Av</a>
<div class="t-fht-line"></div>
</th>
<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="437" role="presentation">CS</a>
<div class="t-fht-line"></div>
</th>
<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="167" role="presentation">LINE_NAME</a>
<div class="t-fht-line"></div>
</th>
<tr>
<td class=" u-tC" headers="AVAILABLE" aria-labelledby="AVAILABLE">
<img src="...png" alt="Av_ICON" title="Available" style="width:16px; padding-top:1px;">
</td>
<td class=" u-tL" headers="STATUS" aria-labelledby="STATUS">online</td>
<td class=" u-tL" headers="LINE_NAME" aria-labelledby="LINE_NAME">
url_link
</td>
</tr>
</tbody>
</table>
Your problem is that .eq() function from jQuery is 0 based, so to get the 2nd element you have to use .eq(1).
var url = $('.a-IRR-table tbody').children().eq(1).find('td[headers="LINE_NAME"] a').attr('href');
console.log(url)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table summary="Search Results" class="a-IRR-table" id="79">
<tbody>
<tr>
<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="625" role="presentation">Av</a><div class="t-fht-line"></div></th>
<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="437" role="presentation">CS</a><div class="t-fht-line"></div></th>
<th class="a-IRR-header"><a class="a-IRR-headerLink" data-column="167" role="presentation">LINE_NAME</a><div class="t-fht-line"></div></th>
<tr>
<td class=" u-tC" headers="AVAILABLE" aria-labelledby="AVAILABLE">
<img src="...png" alt="Av_ICON" title="Available" style="width:16px; padding-top:1px;">
</td>
<td class=" u-tL" headers="STATUS" aria-labelledby="STATUS">online</td>
<td class=" u-tL" headers="LINE_NAME" aria-labelledby="LINE_NAME">
url_link
</td>
</tr>
</tbody>
</table>
var url = $('.a-IRR-table').find('td[headers="LINE_NAME"] a').attr('href');
console.log('url = ' + url);
should work
Related
So I am trying to grey out an HTML table row upon expiry date. I don't want the data to disappear or hide. I just want the row to fade grey or something similar. Maybe make it unclickable? Is this possible with javascript. Apologies for this, but I am not very well versed in javascript, however I do have a light grasp of how it works.
Here's a basic example of my html table (the original is in a div with the bootstrap class: col-lg-8)
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
I'd like to grey out and disable the register link a day after the training date. Not sure if this would require the use of a class="" or id="". The data is obviously static data written in html code, as displayed above.
If this question has been asked, I'm sorry, I just haven't been able to find anything on this. Any help is highly appreciated.
A javascript approach would be something like this:
Find all <tr> elements in your table body
For each of those elements, look up the 4th cell, which has the date in it
Parse that date text to a timestamp
Compare the timestamp to the browser time
If the timestamp is earlier than the current time, add a class indicating that the row is expired
Style the expired class in CSS
Here's how that works in code:
const rowIsExpired = tr => {
const dateCell = tr.querySelector("td:nth-child(4)");
const dateString = dateCell.innerText;
const timestamp = Date.parse(dateString);
return timestamp < Date.now();
}
const tableRows = document.querySelectorAll("tbody > tr");
tableRows.forEach(tr => {
tr.classList.toggle("expired", rowIsExpired(tr));
});
.expired {
opacity: .4;
}
<table class="table table-striped">
<thead class="table-dark" align="center">
<tr>
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</tr>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Another Computer Training</b></td>
<td align="center" valign="middle"><b>expensive</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-August-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
Watch out!
There are some catches here:
You need to disable the link if you want to make sure it can't be clicked. It's best to not only use pointer-events in css for that, but actually disable it in the HTML source
This uses the browser's time. If the user loading the page has a wrong system clock or weird timezone, results may vary!
Parsing dates from strings can give unexpected results. Make sure your cell's text is formatted in a way that gives you the right outcomes.
The way I find the expiry date is brittle. If you change the order of your columns, it will break. It's best to add a specific attribute or class in the HTML so you can be sure it's easy to find in javascript.
You can use jquery to iterate your table tr to find what tr has time expired as below code.
Use addClass method to add grey class with expired row.
Use can use Date.parse to get extract time to compare, and add class disable-click to disable Register button.
$('tr').each(function(index, tr) {
let date = $(tr).find("td:eq(3)").text();
let day = date.split('-')[0];
if(day != undefined && index > 1 && day < 11){ // assume that 11 is expired day
$(tr).addClass('grey');
}
});
$('tr').each(function(index, tr) {
let date = $(tr).find("td:eq(3)").text();
let day = date.split('-')[0];
let datetime = Date.parse(date);
console.log(datetime);
if(day != undefined && index > 1 && datetime < new Date()){ // assume that 11 is expired day
$(tr).addClass('grey');
//alert($(tr).find("td:eq(4)").find("a").text())
$(tr).find("td:eq(4)").find("a").addClass("disable-click");
}
});
.grey{
background-color: grey;
}
.disable-click{
pointer-events:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr class='disabled'>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">13-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">10-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">19-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
I am not sure if you want to disable the link like this:
and then you can change the link color to grey by CSS & JavaScript or whatsoever
If you check this example, the first row of the table is disabled, while others are clickable. If the data is static, you can give the classname to any row based on your requirement, and if not, give the classname to the row specifically from the code.
tbody tr {
background-color: #eee;
}
tbody tr.disabled {
background-color: gray;
pointer-events: none;
}
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr class='disabled'>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
// calculate the difference, in days, between 2 dates
const dd=(d1,d2)=>Math.ceil( ( d1 - d2 ) / (1000 * 3600 * 24 ) );
//find all suitable anchor tags - of type button
document.querySelectorAll('td a[type="button"]').forEach(a=>{
// find the date from previous table cell and create as a Date object
let date=new Date(a.parentNode.previousElementSibling.textContent);
// calculate the difference
let diff=dd( new Date(), date );
// if beyond the threshold - do stuff
if( diff > 1 ){
a.parentNode.parentNode.classList.add('expired');
a.onclick=(e)=>{
e.preventDefault();
return false;
};
}
})
.expired td{
background:rgba(0,0,0,0.25);
color:rgba(0,0,0,0.5);
font-style:italic;
text-decoration:line-through;
}
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Banana Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Banana</td>
<td align="center" valign="middle">16-July-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Intensive Banana Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">classroom</td>
<td align="center" valign="middle">18-July-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
If you can add a data-expdate custom attribute to your rows, it would greatly simplify your life; it would be something like this:
const rows = document.querySelectorAll('tr[data-expdate]');
const today = new Date();
rows.forEach(row => {
const expDate = new Date(row.dataset.expdate);
if (expDate <= today) {
row.classList.add('expired');
row.querySelector('a').parentElement.innerHTML = '<span>Expired<span>';
}
})
.expired {
background-color: #efefef;
color: #999;
}
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead>
<th colspan="5" align="center">JUNE 2021</th>
</thead>
<tbody>
<tr data-expdate="2021-06-11">
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr data-expdate="2021-08-30">
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">30-August-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr data-expdate="2021-07-16">
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">16-July-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
I'm trying to add entire row data of a table to my array of object whenever someone click on anchor tag named view/edit. I wrote some logic but I guess I'm missing something.
index.html file
<table class="table">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Order No</th>
<th scope="col">Order Date</th>
<th scope="col">Status</th>
<th scope="col">Total Amount</th>
<th scope="col">Total Qty</th>
<th scope="col">Total Products</th>
<th scope="col">View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="user-name">Alice</td>
<td id="order-no">8536</td>
<td id="order-date">13/07/2020</td>
<td id="status" >Pending</td>
<td id="total-amount" >1800</td>
<td id="total-qty" >3</td>
<td id="total-products" >3</td>
<td>
<a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
</td>
</tr>
<tr>
<td id="user-name">Michael</td>
<td id="order-no">4354</td>
<td id="order-date">12/07/2020</td>
<td id="status" >Approved</td>
<td id="total-amount" >1500</td>
<td id="total-qty" >2</td>
<td id="total-products" >2</td>
<td>
<a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
</td>
</tr>
</tbody>
</table>
app.js file
let usersData = []; // array to store user table objects
$('#view-data').click(function(){
var row = $(this).closest("tr");
// userData object to store data from a table complete row
var userData = {
"order_no": row.find('#order-no').text(),
"order_date": row.find('#order-date').text(),
"totalproducts": row.find('#total-products').text(),
"total_amount": row.find('#total-amount').text(),
"total_qty": row.find('#total-qty').text(),
"status": row.find('#status').text(),
"user_name": row.find('#user-name').text(),
}
usersData.push(userData)
console.log(usersData)
})
Note: I should use button instead a tag but I'm using anchor tag because it'll open another tab in future for same data manipulation.
Selector need to change to class (view-data) instead of id
let usersData = []; // array to store user table objects
$('.view-data').click(function(ev){
ev.preventDefault();
ev.stopPropagation();
var row = $(ev.currentTarget).closest("tr");
// userData object to store data from a table complete row
var userData = {
"order_no": row.find('#order-no').text(),
"order_date": row.find('#order-date').text(),
"totalproducts": row.find('#total-products').text(),
"total_amount": row.find('#total-amount').text(),
"total_qty": row.find('#total-qty').text(),
"status": row.find('#status').text(),
"user_name": row.find('#user-name').text(),
}
usersData.push(userData)
console.log(userData)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Order No</th>
<th scope="col">Order Date</th>
<th scope="col">Status</th>
<th scope="col">Total Amount</th>
<th scope="col">Total Qty</th>
<th scope="col">Total Products</th>
<th scope="col">View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="user-name">Alice</td>
<td id="order-no">8536</td>
<td id="order-date">13/07/2020</td>
<td id="status" >Pending</td>
<td id="total-amount" >1800</td>
<td id="total-qty" >3</td>
<td id="total-products" >3</td>
<td>
<a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
</td>
</tr>
<tr>
<td id="user-name">Michael</td>
<td id="order-no">4354</td>
<td id="order-date">12/07/2020</td>
<td id="status" >Approved</td>
<td id="total-amount" >1500</td>
<td id="total-qty" >2</td>
<td id="total-products" >2</td>
<td>
<a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
</td>
</tr>
</tbody>
</table>
I am trying to duplicate a specific line in my table when I click in "duppliquer" button
See my code to create my table below
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
<tr>
<th style="width: 5%">Col 1</th>
<th style="width: 5%">Col 2</th>
<th style="width: 5%">Col 3</th>
<th style="width: 5%">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Test1</td>
<td align="center">Test2</td>
<td align="center">Test3</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
<tr>
<td align="center">Test4</td>
<td align="center">Test5</td>
<td align="center">Test6</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
</tbody>
I know that I have to use Javascript ou Jquery, but I don't understand how to get the line that i want to duplicate
I made a lot of research on this subject, but cannot find any answer ...
You should get the current row element and then use clone(true) function to clone it and finally append the cloned row into the table so that it is placed after the current row elemnt. Here is an example:
$(".Duppliquer").click(function(){
var $rw = $(this).closest( "tr" );
var $new_rw = $rw.clone( true );
$rw.after($new_rw);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
<tr>
<th style="width: 5%">Col 1</th>
<th style="width: 5%">Col 2</th>
<th style="width: 5%">Col 3</th>
<th style="width: 5%">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Test1</td>
<td align="center">Test2</td>
<td align="center">Test3</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
<tr>
<td align="center">Test4</td>
<td align="center">Test5</td>
<td align="center">Test6</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
</tbody>
EDIT:
according to the comments the following code will also change the first cell of copied row:
$(".Duppliquer").click(function(){
var $rw = $(this).closest( "tr" );
var $new_rw = $rw.clone( true );
var $first_cell = $new_rw.find("td:first");
$first_cell.html($first_cell.html() + " Copy!");
$rw.after($new_rw);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
<tr>
<th style="width: 5%">Col 1</th>
<th style="width: 5%">Col 2</th>
<th style="width: 5%">Col 3</th>
<th style="width: 5%">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Test1</td>
<td align="center">Test2</td>
<td align="center">Test3</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
<tr>
<td align="center">Test4</td>
<td align="center">Test5</td>
<td align="center">Test6</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
</tbody>
//I also recommend using lowercase ids and classes.
$(document).ready(function(){
$(document).on('click', '.Duppliquer', function(e){
e.preventDefault();
var row = $(e.target).closest('tr'),
copy = row.clone();
copy.insertAfter(row);
});
});
Use JQuery find:
$('#myTable').find('tr').click(function () {
var indx = $(this).index() +1; --gets row index
var tr = $(this); --gets row
});
Is it possible using javascript to move the first row as follows into a <thead> tag?
<table id="TBL1399802283490" class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh" style="cursor: pointer;">Server Name </th>
<th class="confluenceTh" title="null" style="cursor: pointer;">Network Zone </th>
<th class="confluenceTh" title="null" style="cursor: pointer;">Operational Status </th>
</tr>
<tr>
<td class="confluenceTd"><div style="left:1em;right:1em"> w264521f </div> </td>
<td class="confluenceTd"><div style="left:1em;right:1em"> GREEN </div> </td>
<td class="confluenceTd"><div style="left:1em;right:1em"> READY </div> </td>
</tr>
</tbody>
</table>
Which becomes
<table id="TBL1399802283490" class="confluenceTable">
<thead>
<tr>
<th class="confluenceTh" style="cursor: pointer;">Server Name </th>
<th class="confluenceTh" title="null" style="cursor: pointer;">Network Zone </th>
<th class="confluenceTh" title="null" style="cursor: pointer;">Operational Status </th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><div style="left:1em;right:1em"> w264521f </div> </td>
<td class="confluenceTd"><div style="left:1em;right:1em"> GREEN </div> </td>
<td class="confluenceTd"><div style="left:1em;right:1em"> READY </div> </td>
</tr>
</tbody>
</table>
I'm not too familiar with Javascript, so any help is much appreciated!
This should work for the table given in your code, for a general table it's better to obtain the elements in more secure way.
var table = document.getElementById('TBL1399802283490');
var thead = document.createElement('THEAD');
var tbody = table.getElementsByTagName('TBODY')[0];
var tr = table.getElementsByTagName('TR')[0];
table.appendChild(thead);
tbody.removeChild(tr);
thead.appendChild(tr);
I have an html table inside a div, and i want to run jquery on each li element or the li class
and alert his id.
this is the html code.
this is the html code.
HTML:
<div id="lightbox_tlbr" style="top: 273px; display: block;">
<div id="test">
<div class="header_div" id="first_header"></div>
<div class="header_div" id="second_header"></div>
<div class="header_div" id="third_header"></div>
<div class="header_div" id="fourth_header"></div>
</div>
<li class="announcement_tlbr" id="announcement7">
<table id="tg_toolbar7" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text07">
<th style="background-image:url(/srv/admin/img/announcement/general_message_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text17"></th>
<th colspan="2" style="background-color:green" class="title_style_toolbar" id="tg_text27"><a style="color:white;font-size:11px;">2014-03-27 10:36:25</a><br><a style="color:white;">Title - 6 test</a><a></a></th>
<td style="width:0px;background-color:green;" id="tg_text87"><input type="button" class="minimze" style="background-color:green;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze7"></td>
</tr>
<tr id="tg_text97">
<td colspan="2" class="tg_text" id="tg_text37"></td>
</tr>
<tr class="r2_toolbar" id="tg_text47">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text57"></td>
<td class="tg_toolbar-031e" id="tg_text67"></td>
<td class="tg_toolbar-031e" id="tg_text77"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button7"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox7"></td>
</tr>
</tbody>
</table>
</li>
<li class="announcement_tlbr" id="announcement5">
<table id="tg_toolbar5" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text05">
<th style="background-image:url(/srv/admin/img/announcement/bug_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text15"></th>
<th colspan="2" style="background-color:red" class="title_style_toolbar" id="tg_text25"><a style="color:white;font-size:11px;">0000-00-00 00:00:00</a><br><a style="color:white;">Title - 4 test</a><a></a></th>
<td style="width:0px;background-color:red;" id="tg_text85"><input type="button" class="minimze" style="background-color:red;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze5"></td>
</tr>
<tr id="tg_text95">
<td colspan="2" class="tg_text" id="tg_text35"></td>
</tr>
<tr class="r2_toolbar" id="tg_text45">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text55"></td>
<td class="tg_toolbar-031e" id="tg_text65"></td>
<td class="tg_toolbar-031e" id="tg_text75"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button5"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox5"></td>
</tr>
</tbody>
</table>
</li>
<div align="left" class="footer">Please confirm you have read and acted upon this message</div>
</div>
i try:
jQuery.each(".announcement_tlbr", function(k,v){ alert(k); })
what is a good way to do this?
You should use this inside each to get the reference of current element.Try this:
jQuery.each(".announcement_tlbr", function(e){
alert($(this).attr('id'));//or this.id
});
$(document).ready(function() {
$(".announcement_tlbr").each(function(){
alert($(this).attr("id"))
});
});