I'm new in Puppeteer and I try to find a solution ton extract the "tr id" value in this code:
<table class="test" id="test">
<tbody><tr id="TR_99999997" style="background-color: rgb(255, 255, 255);">
<td class="supp" id="TD_IMAGE_XXXXX"></td>
<td class="name" id="TD_TEXT_XXXXX" style="cursor: pointer;" onclick="selectEnvironnement('99999997',1)">test</td>
<td class="date">08/04/2021</td>
<td class="type">test</td>
</tr>
<tbody><tr id="TR_99999998" style="background-color: rgb(255, 255, 255);">
<td class="supp" id="TD_IMAGE_XXXXX"></td>
<td class="name" id="TD_TEXT_XXXXX" style="cursor: pointer;" onclick="selectEnvironnement('99999998',1)">test</td>
<td class="date">09/04/2021</td>
<td class="type">test</td>
</tr>
<tbody><tr id="TR_99999999" style="background-color: rgb(255, 255, 255);">
<td class="supp" id="TD_IMAGE_XXXXX"></td>
<td class="name" id="TD_TEXT_XXXXX" style="cursor: pointer;" onclick="selectEnvironnement('99999999',1)">test</td>
<td class="date">10/04/2021</td>
<td class="type">test</td>
</tr>
Is there a way to get all the TR_9999999X ? I need to find the last one and click on it.
Any help would be appreciated
There is a way to find and click the button, see this script. I have removed ALL the TDS as it muddies the water a bit.
The bit of magic is this bit, basically table td[id^="TD_TEXT_"] asking the page to return all TD elements that starts with id=TD_TEXT (the ^ does this)
So take a look and run this script. This will open chrome, hit F12 and navigate to the console tab, after 3 secs you will see some console.log messages so we know the button has been clicked.
const puppeteer = require('puppeteer');
const html = `
<html>
<body>
<table>
<tr id="TR_99999997" style="background-color: rgb(255, 255, 255);">
<td id="TD_TEXT_XXXXX" style="cursor: pointer;" onclick="selectEnvironnement('99999997',1)">test1</td>
</tr>
<tr id="TR_99999998" style="background-color: rgb(255, 255, 255);">
<td id="TD_TEXT_XXXXX" style="cursor: pointer;" onclick="selectEnvironnement('99999998',2)">test2</td>
</tr>
<tr id="TR_99999999" style="background-color: rgb(255, 255, 255);">
<td id="TD_TEXT_XXXXX" style="cursor: pointer;" onclick="selectEnvironnement('99999999',3)">test3</td>
</tr>
</table>
<script>
function selectEnvironnement(p1, p2) {
console.log(p1, p2);
};
</script>
</body>
</html>`;
(async () => {
const browser = await puppeteer.launch({ headless : false});
const page = await browser.newPage();
await page.goto(`data:text/html,${html}`);
await page.waitForTimeout(3000);
var tdList = await page.$$('table td[id^="TD_TEXT_"]', e => e.map((btn) => btn));
//console.log(tdList);
await tdList[0].click();
await tdList[1].click();
await tdList[2].click();
await page.waitForTimeout(20000);
await browser.close();
})();
Which produces the following result. In your case simply click the last element in your array list.
Related
I have a dark background on my webpage, so when I implement DataTables into my project, the search bar is barely visible. I import the scripts instead of directly having the source code for DataTables in my project, so I can't change the color of the search bar there.
How might I change the color from black to white? This is what it looks like at the moment:
Here is my code, I'm using Razor Pages
#page
#model CustomerPageTest.Pages.Customer.ListModel
#{
ViewData["Title"] = "List";
}
#section Scripts
{
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').dataTable({
"paging": false,
columnDefs: [{
targets: -1,
className: 'dt-head-center'
}]
});
});
</script>
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<h1 align="center" style="color:yellowgreen">1) Select/Add Customer</h1>
<br />
<div>
<p align="center">
<a class="btn btn-dark"
asp-page="/Index"><i class="glyphicon glyphicon-arrow-left"></i> Back</a>
<a class="btn btn-dark"
asp-page="./AddCustomer"><i class="glyphicon glyphicon-plus"></i> Add New Customer</a>
<a class="btn btn-dark"
asp-page="./ListAssessments"><i class="glyphicon glyphicon-plus"></i> Use Existing Assessment</a>
</p>
</div>
<table id="myTable" class="display cell-border stripe" role="grid" style="background-color: #dbdbdb; text-align:center; width: 100%">
<thead class="text-light">
<tr class="text-dark">
<th style="text-align: center"><strong>Customer</strong></th>
<th style="text-align: center"><strong>Notes</strong></th>
<th style="text-align: center"><strong>New Assessment</strong></th>
</tr>
</thead>
<tbody style="background-color: #dbdbdb;">
#foreach (var customer in Model.Customers)
{
<tr class="text-dark">
<td style="padding-top: 15px">#customer.name</td>
<td style="padding-top: 15px">#customer.notes</td>
<td>
<a class="btn btn-dark"
asp-page="/Assessment/AddAssessment" asp-route-customerId="#customer.customer_id">
<i class="glyphicon glyphicon-plus"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
Edit: Found the class and id that links to the search bar, added new definitions into the CSS to try and overwrite it, but no new results...
Here is a screenshot of the Inspect:
And the CSS code I have added:
/*Change Search Bar to White*/
.myTable_filter {
color: white;
}
#dataTables_filter {
color: white;
}
Any thoughts?
That search-box on dataTable seems to be generated by the package script.
So you can change the background color of input tag by overriding the css style only.
Based on inspect screenshot, this will work.
#myTable_wrapper .dataTables_filter input {
background-color: white;
}
I'm trying to export a painted html table completely dynamically into a csv file. I tried to implement several Scripts, functions.etc but I have not obtained the desired result. If anyone can help me, I'd be very grateful.
The information in the table is loading from a Request in "jsonData", It is important to clarify that I do not require to know the "Headers", only the information inside the table body:
ts Code:
jsonData:any;
_object = Object;
"jsonData" looks like:
[{
Subject_ID: "ACCT101",
First_Available_Date: "01/01/01",
....
},
{
Subject_ID: "510862185-X",
First_Available_Date: "06/04/19"..}....
]
HTML
<table>
<thead>
<tr>
<th *ngFor="let header of _object.keys(jsonData[0]); let i = index">{{header}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of jsonData; let i = index">
<td *ngFor="let objKey of _object.keys(row); let j = index">{{ row[objKey] }} </td>
</tr>
</tbody>
</table>
<button class="btn btn-submit btn-sm float-right" type="submit" (click)="export()">
Submit
</button>
Please try below code. this will extract data from table and download as csv.
<!DOCTYPE html>
<html>
<head>
<style>
td, table,th{
border: solid 1px black;
}
</style>
</head>
<body>
<table id="data_table">
<thead>
<tr>
<th>Subject_ID</th>
<th>First_Available_Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>ACCT101</td>
<td>01/01/01</td>
</tr>
<tr>
<td>510862185-X</td>
<td>06/04/19</td>
</tr>
<tr>
<td>New data</td>
<td>New data 1</td>
</tr>
</tbody>
</table>
<script>
function exportit() {
var csv='';
table=document.getElementById("data_table");
tr=table.children[0].children[0];
for(i=0;i<tr.children.length;i++)
{
csv+=tr.children[i].innerText+",";
}
csv=csv.substring(0,csv.length-1)+"\n";
tbody=table.children[1];
for(i=0;i<tbody.children.length;i++)
{
for(j=0;j<tbody.children[i].children.length;j++)
{
csv+=tbody.children[i].children[j].innerText+",";
}
csv=csv.substring(0,csv.length-1)+"\n";
}
csv=csv.substring(0,csv.length-1)+"\n";
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'data.csv';
hiddenElement.click();
}
</script><br>
<button onclick="exportit()">export</button>
</body>
</html>
Hi i m using in my project a simple functionality.
i have a table and some data is fetch data in json file .
Data is coming and if i click to name than edit mode is on if i blur than hide the edit mode and show the view mode is fine i have do this .
now i have a update button if i click to this button than only updated data in insert next row how to do this please check to this and help me .
My code is this
var myApp = angular.module('myApp', []);
myApp.controller('myCntrl', function($scope, $http){
$http.get('js/list.json').success(function(data){
$scope.emplyeList = data;
});
$scope.updateSec= function(employe){
alert("Rohit");
}
});
.click{
cursor: pointer;
text-decoration: underline;
}
.normal-table{
width: 50%;
border-collapse: collapse;
}
.normal-table th{
border: solid 2px rgba(0,0,0,0.1);
}
.normal-table td{
border: solid 2px rgba(0,0,0,0.1);
text-align: center;
padding: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntrl">
<body>
<table class="normal-table">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employe in emplyeList">
<td>
<div ng-show="!data" ng-click="data=true" class="click">{{employe.name}}</div>
<div ng-show="data"><input ng-blur="data=false" type="text" ng-model="employe.name" /></div>
</td>
<td>
<div ng-show="!data">{{employe.ID}}</div>
<div ng-show="data"><input type="text" ng-model="employe.ID" /></div>
</td>
<td>
<div ng-show="!data">{{employe.add}}</div>
<div ng-show="data"><input type="text" ng-model="employe.add" /></div>
</td>
</tr>
<tr>
<td colspan="3">
<button ng-click="updateSec(employe)">Update</button>
</td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="updatEm in employe">
<td>{{updatEm.name}}</td>
<td>{{updatEm.ID}}</td>
<td>{{updatEm.add}}</td>
</tr>
</tbody>
</table>
</div>
My Json file is
[
{"name":"Rohit", "ID":"5Rt", "add":"Delhi"},
{"name":"Kiran", "ID":"4Kn", "add":"UP"},
{"name":"Abhay", "ID":"3Ay", "add":"HR"},
{"name":"Rahul", "ID":"2Rl", "add":"UK"}
]
HTML
<tr ng-repeat="employe in emplyeList" ng-click="updateSec(employe)">
</tr>
<tr>
<td colspan="3">
<button ng-click="showData()">Update</button>
</td>
</tr>
<tr ng-if="showEmployee" ng-repeat="employe in modifiedEmplyee">
<td>{{employe.name}}</td>
<td>{{employe.ID}}</td>
<td>{{employe.add}}</td>
</tr>
Script
//Display list
$scope.showEmployee = false;
//Create an array to hold updated employee
$scope.modifiedEmplyee = [];
//Set updated field to identify updated employee
$scope.updateSec = function (employe) {
employe.updated = true;
$scope.showEmployee = false;
}
//Show data and copy modilfied list
$scope.showData = function () {
$scope.showEmployee = true;
$scope.modifiedEmplyee = [];
for(var i = 0; i< $scope.emplyeList.length; i++)
{
var emp = $scope.emplyeList[i];
if(emp.updated && emp.updated == true){
$scope.modifiedEmplyee.push(emp);
}
}
}
DEMO
I want to click the image <img> w.r.t to the "TM100" mentioned in the td tag. Please can anyone give me the XPath.
I'm facing issue in the selecting the image. Because all the image are having the same xpath.
<tr>
<td>
<div id='xxx' class='avatar_standalone' ...>
<div class ='yyy'>
<div class ='zzz'>
<a oncontextmenu="return false" href="javascript:void(0)" onclick="xxx('MINE|XX0172', '2');>
<img class="newassetIcon assetIcon linkable" src="https://xxxx/servlet/servlet.ImageServer?id=015d00000020ZaWAAU&oid=00Dd0000000eu33&lastMod=1377179945000"/>
</a>
<span class="imgData" style="display: none;">MINE|XX0172</span>
</div>
</div>
</div>
</td>
<td style="border: 1px solid rgb(211, 211, 211);">XX0172</td>
<td style="border: 1px solid rgb(211, 211, 211); text-align: center;">6073.7</td>
<td style="border: 1px solid rgb(211, 211, 211);">TM2</td>
</tr>
<tr>
<td>
<div id='xxx' class='avatar_standalone' ...>
<div class ='yyy'>
<div class ='zzz'>
<a oncontextmenu="return false" href="javascript:void(0)" onclick="xxx('MINE|XX0172', '2');>
<img class="newassetIcon assetIcon linkable" src="https://xxxx/servlet/servlet.ImageServer?id=015d00000020ZaWAAU&oid=00Dd0000000eu33&lastMod=1377179945000"/>
</a>
<span class="imgData" style="display: none;">MINE|XX0172</span>
</div>
</div>
</div>
</td>
<td style="border: 1px solid rgb(211, 211, 211);">XX0172</td>
<td style="border: 1px solid rgb(211, 211, 211); text-align: center;">1073.7</td>
<td style="border: 1px solid rgb(211, 211, 211);">TM3</td>
</tr>
<tr>
<td>
<div id='xxx' class='avatar_standalone' ...>
<div class ='yyy'>
<div class ='zzz'>
<a oncontextmenu="return false" href="javascript:void(0)" onclick="xxx('MINE|XX0172', '2');>
<img class="newassetIcon assetIcon linkable" src="https://xxxx/servlet/servlet.ImageServer?id=015d00000020ZaWAAU&oid=00Dd0000000eu33&lastMod=1377179945000"/>
</a>
<span class="imgData" style="display: none;">MINE|XX0172</span>
</div>
</div>
</div>
</td>
<td style="border: 1px solid rgb(211, 211, 211);">XX0172</td>
<td style="border: 1px solid rgb(211, 211, 211); text-align: center;">8073.7</td>
<td style="border: 1px solid rgb(211, 211, 211);">TM100</td>
</tr>
Please check this one, might be this could works for you:
//tr[descendant::td[contains(text(),'TM100')]]//img[#class='newassetIcon assetIcon linkable']
I have tested the above code using this:
//tr[descendant::td[contains(text(),'TM100')]]//td[contains(text(),'XX0172')]
If you want to get the img element you can use the following XPath
//tr[td = 'TM100']/div[#id = 'xxx']/div[#class = 'yyy']/div[#class = 'zzz']/a/img
If you want to click the image you might want to select the a, so the following works:
//tr[td = 'TM100']/div[#id = 'xxx']/div[#class = 'yyy']/div[#class = 'zzz']/a
I'm trying to create a menu that has a mouse over drop down to select a sub-menu item. I currently have the common menu working, but I can't figure out the best way to go about having the sub menus display beneath their appropriate categories.
The menus currently stretch the table to distorted proportions. I want the current table to keep its size and just drop below the category title, without affecting the category's title table. Should I create another table to display to that or what? I'm not familiar with web programming.
My second problem is probably a very easy one. I'm just not sure what the answer is. I've tried my luck with Google to no avail. What should I set "onMouseOut" display equal to in order to keep the menus populated. The submenu currently disappear when I try to click one of the sub-links.
<td>
<STYLE TYPE="text/css">
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
A:link {color:blue; text-decoration:none}
A:hover {color:blue; text-decoration:underline}
</STYLE>
<div id="menu">
<table border="0" cellspacing="0" cellpadding="2" align="center">
<tbody>
<tr>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="top-center" onclick="window.location.href='index2.php?page=files'"> Files</td>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center">
<SPAN onMouseOver="document.all.menu2.style.display = 'block'"onMouseOut="document.all.menu2.style.display = 'none'">
Configuration<BR>
</SPAN>
<SPAN ID="menu2" onClick="document.all.menu1.style.display = 'none'">
System Configuration<BR>
File Configuration<BR>
Network Configuration<BR>
</SPAN>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center" onclick="window.location.href='index2.php?page=Maintenance'"> Maintenance Mode</td>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center" onclick="window.location.href='index2.php?page=IETM'"> IETM</td>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';"onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center">
<SPAN onMouseOver="document.all.menu3.style.display = 'block'"onMouseOut="document.all.menu3.style.display = 'none'">
Power Options<BR>
</SPAN>
<SPAN ID="menu3" onClick="document.all.menu1.style.display = 'none'">
Shutdown<BR>
Reboot<BR>
</SPAN>
</td>
</td>
</tr>
</tbody>
</table>
</div>
</TABLE>
first of all do not use tables, they are liming your options in many ways. You can use divs instead or in your particular example(for menu) you could use html lists.
another thing about your concerte problem is if you can use javaScript (to simplify things a bit) and then you could say:
<ul id="menu">
<li id="link1">Link 1
<ul class="dropdown">
<li id="sl1">Sublink 1</li>
<li id="sl2">Sublink 2</li>
<li id="sl3">Sublink 3</li>
</ul>
</li>
<li id="link2">Link 2</li>
...
<li id="link3">Link 3</li>
...
</ul>
with appropriate css ofcourse, and on this use javaScript to ad show/hide functionality:
$(document).ready(function() {
$("#menu li").mouseenter(function(){
$(this).find(".dropdown").show();
});
$("#menu li").mouseleave(function(){
$(this).find(".dropdown").hide();
});
});