How to duplicate specific row in table (JS/JQuery)? - javascript

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
});

Related

How do you grey out a row in html table upon expiry date

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>

How do I add enitre row of data of an table in an array of objects?

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>

Html body content overlapping my footer and header

In my Html Report everything working fine, but when i taking print, tables design disturbed between two pages. I also convert it into div structure but same issue occurred, I didn't find solution so far.
Please help.
Screenshot attached here
<div class="madeup-grid-section grid-detail-style" ng-show="nsDivReadyMade">
<lable class="grid-heading">Ready Made</lable>
<table class="table table-bordered table-striped page_table table_stylelike_count"
style="border-right:1px solid #000 !important;">
<thead>
<tr class="first_row">
<th ng-show="nsSnR">S#</th>
<th ng-show="nsItemR">Item</th>
<th ng-show="nsPileR">Pile</th>
<th ng-show="nsWeftR">Weft</th>
<th ng-show="nsGroundR">Ground</th>
<th ng-show="nsQualityR">Quality</th>
<th ng-show="nsSizeR">Size</th>
<th ng-show="nsProcessR">Treatment</th>
<th ng-show="nsShadeR">Shade</th>
<th ng-show="nsWeightR">Weight</th>
<th ng-show="nsQtyR">Quantity</th>
<th ng-show="nsPriceR">Price</th>
<th ng-show="nsAmountR">Amount</th>
</tr>
</thead>
<tbody>
<tr class="article-items {{item.trbgColor}}" ng-repeat="item in DetailDataList"
ng-if="item.ArticleType=='readymade'" style="border-right:1px solid #000;">
<td colspan="{{ttlRowColspanR+3}}" ng-if="item.RecordType=='ItemDesc'" style="text-align:left !important;">
<span>{{item.ItemDesc}}</span>
</td>
<td ng-show="nsSnR" rowspan="{{item.NoOfSubItems}}" ng-if="item.RecordType=='Article'"><span>{{item.GroupNum}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsItemR" ng-if="item.RecordType=='Article'"><span>{{item.ReadymadeItem}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsPileR" ng-if="item.RecordType=='Article'"><span>{{item.varPile}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsWeftR" ng-if="item.RecordType=='Article'"><span>{{item.varWeft}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsGroundR" ng-if="item.RecordType=='Article'"><span>{{item.varGround}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsQualityR" ng-if="item.RecordType=='Article'"><span>{{item.Quality}}</span></td>
<td ng-if="item.RecordType!='ItemDesc'" ng-show="nsSizeR" ><span>{{item.varSizeWidth}}<span ng-if="item.RecordType=='Article'">*{{item.varSizeLength}}</span> {{item.SizeUnitAbbr}}</span></td>
<td ng-show="nsProcessR" ng-if="item.RecordType!='ItemDesc'">{{item.ProcesName}}</td>
<td ng-show="nsShadeR" ng-if="item.RecordType!='ItemDesc'">{{item.Shadname}}</td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsWeightR" ng-if="item.RecordType=='Article'"><span>{{item.Weight}}</span></td>
<td ng-show="nsQtyR" class="numeric-field" ng-if="item.RecordType!='ItemDesc'">{{item.flQty | number:0}} {{item.UnitAbbr}}</td>
<td ng-show="nsPriceR" class="numeric-field" ng-if="item.RecordType!='ItemDesc'"><span>{{item.flPrice | number:2}}</span></td>
<td ng-show="nsAmountR" class="numeric-field" ng-if="item.RecordType!='ItemDesc'"><span>{{item.CurAbbr}} {{(item.flQty*item.flPrice) | number:0}}</span></td>
</tr>
<tr class="footer-row">
<td colspan="{{ttlRowColspanR}}" style="text-align:center;">Total</td>
<td ng-show="nsQtyR" class="numeric-field">{{ttlQtyRM}}</td>
<td ng-show="nsPriceR" class="numeric-field"></td>
<td ng-show="nsAmountR" class="numeric-field">{{CurrAbrr}} {{ttlAmntRM}}</td>
</tr>
</tbody>
</table>
</div>

jQuery Search multiple Tables for text and click a button if text is found

I'm trying to search some tables and click a button inside a cell of a specific table. This is my current code
links[1].click();
iimPlayCode('WAIT SECONDS = 2')
var compTabs = window.content.document.getElementById('compTabs')
var compTabList = compTabs.getElementsByClassName("tabNavigation top_tabs")
if (compTabList[0].children[0].innerText.match(/voting/gi)) {
$('#candidatesList').each(function () {
if ($(this).text().match(/john/gi)) { // search for text
// everything works fine until here, don't know how to click the specific button
//get id of button and click it
}
})
}
This is the result of $(this).text():
John
100%
05/09/2013
Vote
And this would be the result of $(this).html()
<tr style="text-align: center;">
<td><img src="http://somewebsite.com" width="36px"></td>
<td>John</td>
<td>100%</td>
<td>05/09/2013</td>
<td class="last-child"><button rel="123" id="6332" class="button_85 sa_vote">Vote</button></td>
</tr>
What I have to do is to click the button with that specific ID in this case '6332'.
This is a bit more complete html code.
<div id="compTabs">
<div class="tabs">
<ul class="tabNavigation top_tabs">
<li rel="#tab_voting" class="selected">
<table cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="28px"><img src="http://somewebsite.com/design/img/new_style/tabs/voting.png"></td>
<td>Voting</td>
</tr>
</tbody></table>
</li>
<li rel="#tab_shareholders">
<table cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="28px"><img src="http://somewebsite.com/design/img/new_style/tabs/shareholders.png"></td>
<td>Shareholders</td>
</tr>
</tbody></table>
</li>
</ul>
<div class="compTabsContent" id="tab_voting" style="display: block;">
<div style="height:390px;margin:0;" class="companyBody">
<table cellspacing="0" cellpadding="0" width="100%" style="margin-top: 10px;" class="proTable">
<tbody><tr valign="top">
<td style="text-align:center;height:35px;vertical-align:middle;font-size:14px;">
Vote to elect <b style="color:red"> General Director </b>. <div id="startTimer" class="timerStyle01">1d 22h:13m:30s</div>
</td>
</tr>
</tbody></table>
<table cellspacing="0" cellpadding="0" width="100%" style="margin-top:10px">
<tbody><tr valign="top"><td width="35%">
<table cellspacing="0" cellpadding="0" class="proTable newTable">
<thead>
<tr><th class="thb" colspan="3">All shareholders</th></tr>
<tr>
<th width="36px"> </th>
<th>Shareholder name</th>
<th>He voted</th>
</tr></thead>
<tbody id="listOfAdministrators">
<tr style="text-align: center;">
<td><img width="36px" src="http://somewebsite.com/content/user/small/user_1364379268_234.jpg"></td>
<td>John</td>
<td><img src="http://somewebsite.com/design/img/new_style/tabs/no.png"></td>
</tr>
</tbody>
</table>
</td>
<td width="10px"></td>
<td>
<table cellspacing="0" cellpadding="0" class="proTable newTable">
<thead>
<tr><th class="thb" colspan="5">Vote to elect <b style="color:red"> General Director </b>.</th></tr>
<tr>
<th width="36px"> </th>
<th>Shareholder name</th>
<th>Shares</th>
<th>Date of shares purchase</th>
<th> </th></tr>
</thead>
<tbody id="candidatesList">
<tr style="text-align: center;">
<td><img width="36px" src="http://somewebsite.com/content/user/small/user_1364379268_234.jpg"></td>
<td>John</td>
<td>100%</td>
<td>05/09/2013</td>
<td class="last-child"><button class="button_85 sa_vote" id="60928" rel="234">Vote</button></td>
</tr>
</tbody>
</table>
</td></tr>
</tbody></table>
</div></div>
<div class="compTabsContent" id="tab_shareholders" style="display: none;"><div style="height:390px;margin:0;" class="companyBody">
<table cellspacing="0" cellpadding="0" style="margin-top:15px;font-size: 11px;" class="proTable newTable">
<thead>
<tr><th style="font-size:13px;" class="thb" colspan="4">All shareholders</th></tr>
<tr>
<th width="36px" style="border-left: 1px solid #d2d2d2;"> </th>
<th>Shareholder name</th>
<th>Shares</th>
<th>Date of shares purchase</th>
</tr>
</thead>
<tbody>
<tr style="text-align: center;">
<td><img width="36px" src="http://somewebsite.com/content/user/small/user_1364379268_234.jpg"></td>
<td>John</td>
<td>100%</td>
<td class="last-child">05/09/2013</td>
</tr>
</tbody>
</table>
</div></div>
</div>
</div>

You may try a solution without jQuery, something like this:
links[1].click();
iimPlayCode(
"WAIT SECONDS=2" + "\n" +
"TAG POS=1 TYPE=TBODY ATTR=ID:candidatesList" + "\n" +
"TAG POS=R-1 TYPE=* ATTR=*" + "\n" +
"TAG POS=R1 TYPE=TD ATTR=TXT:*john*" + "\n" +
"TAG POS=R1 TYPE=BUTTON ATTR=TXT:Vote" + "\n"
);

Javascript put first row in thead

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);

Categories

Resources