I checked out this very similar question, but the solution posted to that one isn't quite what I need and I'm not sure how to set it up as I've only been using nodeJS/puppeteer for a couple of weeks now. Puppeteer - get parent element
I'd like to check for an id among the child elements/nodes (td) of a table row (tr), and then select the row that corresponds to the cell containing the specified id, but specifically I'd like to set it up so that I don't have to define the id of the parent node in the puppeteer code in order to select it, as this may change depending on the position of the row in the displayed table.
Right now my puppeteer code is able to select a row with a provided row id such as '#row1', but this code will eventually be set up to do alot of the same things to several table rows/options, so it'd be cleaner overall to check for the innerText of the reportID 2929 or the report name Stephen_Test, and then select whatever table row that cell resides in.
My table is built with this loop:
for (var i = 0; i < arr.length; i++) {
txtTable = txtTable + "<tr id='row" + i + "'>";
txtTable = txtTable + "<td style='width:30%;'>" + arr[i].teamName + "</td>";
txtTable = txtTable + "<td style='display:none; width:10%;'>" + arr[i].reportId + "</td>";
txtTable = txtTable + "<td id='m" + arr[i].reportId + "' style='width:40%;'>" + arr[i].reportName + "</td>";
txtTable = txtTable + "<td style='width:20%;'>" + arr[i].reportAuthor + "</td>";
txtTable = txtTable + "</tr>";
};
How it shows in html:
<table id="myTable">
<tbody>
<tr id="row1">
<td style="width:30%;">Team Name</td>
<td style="display:none; width:10%;">2929</td>
<td id="2929" style="width:40%;">Stephen_Test</td>
<td style="width:20%;">null</td>
</tr>
<tr id="row2">
<td style="width:30%;">Team Name</td>
<td style="display:none; width:10%;">2929</td>
<td id="3131" style="width:40%;">Stephen_Test2</td>
<td style="width:20%;">null</td>
</tr>
<tr id="row3">
<td style="width:30%;">Team Name</td>
<td style="display:none; width:10%;">2929</td>
<td id="3232" style="width:40%;">Stephen_Test3</td>
<td style="width:20%;">null</td>
</tr>
<tr id="row4">
<td style="width:30%;">Team Name</td>
<td style="display:none; width:10%;">2929</td>
<td id="3030" style="width:40%;">Stephen_Test4</td>
<td style="width:20%;">null</td>
</tr>
</tbody>
</table>
My current puppeteer code:
let reportId = await page.$$eval('td', td => td.find(t => t.innerText === "Stephen_Test")?.id);
console.log(reportId);
var number = '1';
await page.click('#row' + number);
Related
I have a table in html.
I want that when I mouse over a cell, it pop-ups a text. The text popped-up, should depend of the text inside of the cell.
Example of an html table:
City number
Paris 1454
Madrid 1345
Roma 684
If I mouseover a City (Paris), it should pop-up the country (France).
I have seen partial solutions, (
https://www.w3schools.com/howto/howto_js_popup.asp
https://www.w3schools.com/css/css_tooltip.asp), but I don´t know how to solve the conditional part of the pop-up.
Thank you
I think that you need a hover
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
https://www.w3schools.com/tags/tag_abbr.asp
There is an easier way to have "hover-popups" in HTML. You can add a title property to set the text shown in the popup:
<td title="France">Paris</td>
You can also set this via JavaScript:
td.title = "France"
I don't know if that is what you're looking for, but if it is, it's easier that way
Supposing a DOM like that :
<table>
<thead>
<tr>
<th>City</th>
<th scope="col">Number</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Paris </th>
<td>1454</td>
</tr>
<tr>
<th scope="row">Madrid</th>
<td>1345</td>
</tr>
<tr>
<th scope="row">Roma</th>
<td>684</td>
</tr>
</tbody>
</table>
Assuming you have a JS code that show the popup on hover.
You can use the data attribute to set the country on each city cell:
<th scope="row" data-country="France">Paris</th>
And patch the JS code to use it:
const elts = document.getElementsByTagName('th');
for (let elt of elts) {
elt.addEventListener("mouseover", (evt) => {
const country = evt.target.getAttribute('data-country');
yourPopupScript(country); // this trigger your popup, and you can write the country into
});
}
Static generated Table:-
var list = [{
city: "Italy",
country: "Rome"
}, {
city: "Belgium",
country: "Brussels"
}];
var statusCol = "";
var table = '<table><tr><th>City</th><th>Country</th></tr>';
var ID = 0;
for (var i = 0; i < list.length; i++) {
var row = "<tr class='staff-row' >";
row += '<td title=' + list[i].city + '>' + list[i].city + '</td>';
row += '<td title=' + list[i].country + '>' + list[i].country + '</td>'
row += "</tr>"
ID++;
table += row;
}
table += '</table>';
$('#DisplayTable').html(table);
$('#DisplayTable').tooltip({
'show': true,
'selector': '.staff-row',
'placement': 'bottom',
'title': function(event) {
var $this = $(this);
var tds = $this.find('td');
return
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
Static Table:-
<table class="popup">
<tr onclick="myFunction(event)">
<th title="City">City</th>
<th title="Country">Country</th>
</tr>
<tr>
<td title="Delhi">Delhi</td>
<td title="India">India</td>
</tr>
<tr>
<td title="Paris">Paris</td>
<td title="France">France</td>
</tr>
</table><br /> Dynamic Table:-
<div id="DisplayTable"></div>
I am trying to bind column dynamically in a table using jQuery .but click event is not working while trying to click 'btnASizeR' and 'btnWdDelete' button event is not working .Any idea would be appreciated.
$(function() {
var i = 0;
$('#btnASizeR').click(function() {
/* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
var i = $("#WireDimTbl tbody>tr").length + 1;
/* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
var sizerangeMin = "<input type='text' ID='SizeMin" + i + "' name='SizeMin' value='2.00' />";
var sizerangeMax = "<input type='text' ID='SizeMax" + i + "' name='SizeMax' value='3.00' />";
var ToleranceMin = "<input type='text' ID='TolMin" + i + "' name='TolMin' value='1' />";
var ToleranceMax = "<input type='text' ID='TolMax" + i + "' name='TolMax' value='1' />";
var markup = "<tr><td>" + sizerangeMin + "</td><td>" + sizerangeMax + "</td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>";
$("#WireDimTbl tbody").append(markup);
});
$('#btnWdDelete').click(function() {
$("#WireDimTbl tbody>tr:last").remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class='text-left'><strong>Wire Dimensions</strong></td>
</tr>
<tr>
<td class='text-left'><strong>Standard Sizes & Tolerances</strong></td>
<td>
<input type="button" id="btnASizeR" value="AddSizeRange" />
<input type="button" id="btnWdDelete" value="Delete" />
<table id="WireDimTbl" class="table table-bordered">
<thead>
<tr>
<th class="text-center">Size Range Min (mm)</th>
<th class="text-center">Size Range Max (mm)</th>
<th class="text-center">Tolerance (-)mm</th>
<th class="text-center">Tolerance (+) mm</th>
</tr>
</thead>
<tbody></tbody>
</table>
</td>
</tr>
You mentioned that you are loading the table dynamically. Do you mean that when the page first loads the table is missing and its added later?
If that is the case, are you sure the code is called that binds the click events? The above example binds the events on page_load however, if the buttons are not yet available on the page it won't be able to bind it. JQuery will not automatically bind future elements.
Try settings a console.log($('#btnASizeR')); before binding the click event to make sure that JQuery can actually find the button.
I am trying to fill html table(my table got 3 columns) with data from json using javascript but the data never get filled using div method! could any tell me how to fill content of table rows using without using div ?
for(i in json)
{
var div = "<tr id=\""+i+"\">\n" +
"<td>"+i+"</td>\n" +
"<td><img src=\""+ json[i].thumb +"\" height=\"42\" width=\"42\"></td>\n" +
"<td>\n" +
"" + json[i].title + "<br> \n" +
"<br></td></tr>\n\n";
$("#myDiv").append(div);
}
Table to be filled:
<table id="list" cellspacing="0" border="1">
<tr>
<th>Item#</th>
<th>Logo</th>
<th>Description</th>
</tr>
<div id='myDiv'></div>
</table>
This Your new table:
<table id="list" cellspacing="0" border="1">
<thead>
<tr>
<th>Item#</th>
<th>Logo</th>
<th>Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
And code:
var html = '';
for(var i in json)
{
html += '<tr id="'+i+'">';
html += '<td>'+i+'</td>';
html += '<td><img src="'+json[i].thumb+'" height="42" width="42"></td>';
html += "<td>";
html += "" + json[i].title + "<br/><br/>";
html += '</td>';
html += '</tr>';
}
$('#list > tbody').html(html);
I've a table like this:
<table class="table table-striped table-bordered table-hover table-condensed" id="table">
<tr>
<td>rowNumber</td>
<td>Product Name</td>
<td>Price</td>
</tr>
<tr>
<td>1</td>
<td>item1</td>
<td>250000</td>
</tr>
<tr>
<td>2</td>
<td>item2</td>
<td>250000</td>
</tr>
</table>
I also adding new row this way (data will be adding to table when new record added):
if ($('#table').length) {
$('#table tr:first').after("<tr>" +
"<td>" + ? + "</td>" +
"<td>" + data.Title + "</td>" +
"<td>" + data.Price + "</td>" +
"</tr>");
}
As you can see, I add new row to the first row of the table. Now I want to add new row with rowNumber 1 then all other rowNumber get update.
Any idea?
Once you have appended the new row, you can set the rowNumber going through all rows (except the first one):
if ($('#table').length) {
$('#table tr:first').after("<tr>" +
"<td></td>" +
"<td>" + data.Title + "</td>" +
"<td>" + data.Price + "</td>" +
"</tr>");
$("#table tr:not(:first-child) td:first-child").each(function(index,item){
$(this).text(index+1);
});
}
Fiddle
I'm trying to mirror a table, with a dynamic grid like 4x4, 7x7, or 9x2.
I dynamically create this:
<table id="mainTable" class="mainClassTable" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr id="row-1">
<td id="col-1" onclick="imgClick(this)">Stuff Here</td>
<td id="col-2" onclick="imgClick(this)">Stuff Here</td>
<td id="col-3" onclick="imgClick(this)">Stuff Here</td>
<td id="col-4" onclick="imgClick(this)">Stuff Here</td>
</tr>
<tr id="row-2">
<td id="col-1" onclick="imgClick(this)">Stuff Here</td>
<td id="col-2" onclick="imgClick(this)">Stuff Here</td>
<td id="col-3" onclick="imgClick(this)">Stuff Here</td>
<td id="col-4" onclick="imgClick(this)">Stuff Here</td>
</tr>
<tr id="row-3">
<td id="col-1" onclick="imgClick(this)">Stuff Here</td>
<td id="col-2" onclick="imgClick(this)">Stuff Here</td>
<td id="col-3" onclick="imgClick(this)">Stuff Here</td>
<td id="col-4" onclick="imgClick(this)">Stuff Here</td>
</tr>
</tbody>
</table>
I'm wondering what would be the best way for each row to get col-1 to move to col-4, and col-2 on col-3. And with uneven columns I fear it would be more complicated.
I found something about shuffling rows, but I want to shuffle columns.
I'm thinking about using jQuery selectors to tediously repositioning each td, but i'm wondering if there might be a nice jquery plugin to rearrange tables.
I don't want draggable, I just want one click to mirror the table (not the contents).
/Edit
So I tried making each col ID unique, but I ended up with this steaming pile of code:
function makeGrid(content, rowCount, colCount)
{
//Empty TD string
tableVarSet = "";
//gridTotal = gridTotal - gridTotal;
//Loop for multiple columns
for (c=1;c<=colCount;c++)
{
//make column var
tableVarSet = tableVarSet + makeColumns(content, c);
}
//Loop for multiple rows
for (i=1;i<=rowCount;i++)
{
//Make new Row
rowVarToAdd = "<tr id=TMPR>"+tableVarSet+"</tr>";
$("#mainTable").append(rowVarToAdd);
//Set new RowID
rowName = "row-" + i;
$("#TMPR").attr('id', rowName);
}
};
function makeColumns(content, count)
{
//Split String
tableVar1 = "<td id=col-"
tableNum = count;
tableVar2 = " onClick='imgClick(";
tableFunction = "this" ;
tableVar3 = ")'>"+content+"</td>";
//Combine Strings:
colVar = tableVar1 + tableNum + tableVar2 + tableFunction + tableVar3;
//Return result
return colVar;
};
So, yeah it kind of works but It can probably be a lot easier. (any ideas?)
Instead of using strings, consider DOM manipulation.
var rows = document.getElementById("mainTable").rows, cells, fragment = document.createDocumentFragment();
for(var i = 0, len = rows.length; i<len; i++){ //Iterate over each row
cells = rows[i].cells;
for(var j = cells.length-1; j>=0; j--) {
fragment.appendChild(cells[j]); //Remove the cells starting from the end and put them in a document fragment
}
rows[i].appendChild(fragment); //Append the fragment's contents to the current row
}
Demo on jsFiddle
First you should not be using multiple ID's with the same value! You should use classes.
Second of all, the below code works but you will need to change it to suit your application.
If you don't want the contents copied just remove the html() call on each of the cells.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table id="test">
<tr id="row-1"><td class="col-1">col 1</td><td class="col-2">col 2</td><td class="col-3">col 3</td></tr>
<tr id="row-2"><td class="col-1">col 1</td><td class="col-2">col 2</td><td class="col-3">col 3</td></tr>
<tr id="row-3"><td class="col-1">col 1</td><td class="col-2">col 2</td><td class="col-3">col 3</td></tr>
</table>
</body>
<div id="mirror"></div>
<script type="text/javascript">
var table = $('#test');
var OUTPUT = '<table id="test">';
for (var i = 1; i <= $('#test tr').length; i++){
OUTPUT += '<tr id="row-' + i + '">';
OUTPUT += '<td class="col-1">' + $('#row-' + i + " .col-3").html() + '</td>' + "\n";
OUTPUT += '<td class="col-2">' + $('#row-' + i + " .col-2").html() + '</td>' + "\n";
OUTPUT += '<td class="col-3">' + $('#row-' + i + " .col-1").html() + '</td>' + "\n";
OUTPUT += '</tr>';
};
OUTPUT += '</table>';
$('#mirror').html(OUTPUT);
</script>
</html>