How can I change a page with this html code :
<tr>
<td nowrap title="7884">Ontem foi dia de</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td align="right">6,0</td></tr>
<tr>
to this one using greasemonkey :
<tr>
<td title="7884" nowrap="nowrap">ontem foi dia de</td>
<td> </td>
<td title="aprovadissimo" align="center" bgcolor="#ff8888">A</td>
<td title="Treze" align="center" bgcolor="#88ff88">13</td>
<td> </td>
<td bgcolor="#88ff88">Aprovado</td>
<td align="right">6,0</td></tr>
<tr>
have a look at http://diveintogreasemonkey.org/ and see about writing GreaseMoney Scripts
How are you determining which table cells should have which certain values in them? What are the rules you're going to have for this?
Related
with javascript, i am trying to get rid of all the dates and only keeping the time from all my rows of the table
here is the screenshot i am taking about
i cannot use the id or class of the td because its dynamic.
i am trying to ynderstand how can i loop it over to make it work
here is my piece of code i have
var header = document.getElementsByClassName('flightData1')[0];
var dateField = ?
also trying to add some condition here that if the records are not in todays date, remove those rows
here is my html
<table border="0" cellpadding="0" id="iFlightTable" class="cellpadding3 styled-table">
<tbody>
<tr class="flightData1" id="AS 2224_2023-02-09T21:17:00_Anchorage_row">
<td id="Alaska Air"> Alaska</td>
<td> 2224</td>
<td> Anchorage</td>
<td id="1676006220000"> 9:17P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 2224_2023-02-09T21:17:00_bags"> </td>
<td id="AS 2224_2023-02-09T21:17:00_gate">2A</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="flightData2" id="AS 657_2023-02-09T16:35:00_Las Vegas_row">
<td id="Alaska Air"> Alaska</td>
<td> 657</td>
<td> Las Vegas</td>
<td id="1675989300000"> 4:35P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 657_2023-02-09T16:35:00_bags"> </td>
<td id="AS 657_2023-02-09T16:35:00_gate">1</td>
<td> </td>
<td> </td>
<td> </td>
</tr> </tbody>
</table>
let dateFields = document.querySelectorAll('#iFlightTable tr td:nth-child(4)');
dateFields.forEach( field => {
field.innerText = field.innerText.split(/\s/)[0];
});
<table border="0" cellpadding="0" id="iFlightTable" class="cellpadding3 styled-table">
<tbody>
<tr class="flightData1" id="AS 2224_2023-02-09T21:17:00_Anchorage_row">
<td id="Alaska Air"> Alaska</td>
<td> 2224</td>
<td> Anchorage</td>
<td id="1676006220000"> 9:17P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 2224_2023-02-09T21:17:00_bags"> </td>
<td id="AS 2224_2023-02-09T21:17:00_gate">2A</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="flightData2" id="AS 657_2023-02-09T16:35:00_Las Vegas_row">
<td id="Alaska Air"> Alaska</td>
<td> 657</td>
<td> Las Vegas</td>
<td id="1675989300000"> 4:35P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 657_2023-02-09T16:35:00_bags"> </td>
<td id="AS 657_2023-02-09T16:35:00_gate">1</td>
<td> </td>
<td> </td>
<td> </td>
</tr> </tbody>
I am trying very hard to convert a HTML table into a readonly document with exactly the same display. It can be PDF, all sorts of image types or another type of document or file: it just can't be possible to edit this document. The conversion should happen on a user click and this is a widget for an android smartphone app (not used on browsers, its not a webpage!).
I've been trying to convert this HTML table into PDF with 'jspdf' but until now its not being possible. I'm using an online platform which allows me to use HTML and JS.
Here is a big part of my HTML:
<table>
<tr>
<td colspan="3" align="center" bgcolor="#2AD2C9"><h2>Purchase Order</h2></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#97D700"><h3>Equipamiento</h3></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4"></td>
<td align="center" bgcolor="#D4D4D4"><b><em>Tipo/Cantidad</em></b></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Modelo de Placa:</td>
<td align="center" bgcolor="#D4D4D4"><select id="tipoPlaca" size="1">
<option id="defaultP" value="0">Seleccione una placa</option>
</select>
</td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Modelo de Inversor:</td>
<td align="center" bgcolor="#D4D4D4"><select id="tipoInversor" onchange="espacioArreglos()" size="1">
<option id="defaultI" value="0">Seleccione un inversor</option>
</select>
</td>
</tr>
<tr>
<td align="center" bgcolor="#F4F4F4">Longitud de PVC:</td>
<td align="center" bgcolor="#F4F4F4"><input type="number" id="longitudPVC" onchange="calculoCableria()" size="1"></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Cantidad de arreglos:</td>
<td align="center" bgcolor="#D4D4D4"><input type="number" id="cantidadArreglos" onchange="espacioArreglos()" size="1"></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Cantidad de placas:</td>
<td bgcolor="#FFFF00"><div id="container"></div></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#97D700"><h3>Total de equipamiento</h3>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Total de placas:</td>
<td align="center" bgcolor="#D4D4D4"><input type="number" id="totalPlacas" readonly></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Total de junctions:</td>
<td align="center" bgcolor="D4D4D4"><div id="totalJunctions"></div></td>
</tr>
On the end, I want to click on the 'ConvertPDF' button and it should automatically generate a PDF that would exactly look like the table made by me:
<tr>
<td align="center" bgcolor="#D4D4D4"><button type="reset" value="Reset" onclick="eliminarContenido('totalJunctions');clearArray();">Reset</button></td>
<td align="center" bgcolor="#D4D4D4"><input type="button" id="btnPrint" value="ConvertPDF" onclick="something()" /></td>
</tr>
I tried already different approaches seen in other posts using 'jspdf' but nothing worked so far... As you can see, I'm not an experienced programmer so I would appreciate very much some help to learn how to do this! It does not need to save a pdf, just needs to save in a type of file that you can't edit!
I am trying to adding image on html table dynamically using JQuery, but I am confusing how to find out a table 2,3..etc tr with in first td to add image.
My table structure has no id or class how to find, but before table have some text as below.
<table width="100%" border="0" cellspacing="1" cellpadding="5">
<tbody>
<tr valign="top">
<td colspan="2"><b>Order Details:</b><br> <br>
<table width="100%" bgcolor="#EEEEEE">
<tbody>
<tr>
<td>
<b>Code</b>
</td>
<td>
<b>SKU</b>
</td>
<td>
<b>Quantity</b>
</td>
<td>
<b>Price</b>
</td>
<td>
<b>Grand Total</b>
</td>
</tr>
<tr>
<td>10172</td>
<td>Product 1<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>
₹ 250.00
</td>
</tr>
<tr>
<td>10165</td>
<td>Product 2<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>₹ 250.00
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Subtotal: </td>
<td>₹ 250.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Tax: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Shipping Cost: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Grand Total: </td>
<td>₹ 250.00</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
</tbody></table>
How to Add product Image before of the SKU.
Any help plz..?
As you don't have a thead or even use th for the headers, you'll have to skip the first row, you can use ">" to specify the direct hierarchy, eg:
$("table>tbody>tr>td>table>tbody>tr:not(:first-child)").each(function() {
var codecell = $(this).find("td:eq(0)");
var img = "/pathtoimage/" + codecell.text() + ".jpg"
codecell.after("<td><img src='" + img + '/></td>");
});
Updated: Fixed typo for ("td:eq(0)") vs ("td").eq(0) vs ("td")[0]
I have my html table: this is part of it
<tbody id="summaryBody">
<tr class="summaryRow">
<td class="summaryPerson" colspan="2">
Super Man
</td>
<td class="summaryFromDate">
11/21/2013
</td>
<td class="summaryToDate">
11/21/2013
</td>
<td class="summaryOriginalRecords">
1
</td>
<td class="summaryOriginalHours">
2.00
</td>
<td class="summaryExcludedHours">
0
</td>
<td class="summaryTotalHours">
2.00
</td>
</tr>
<tr class="summaryRow">
<td class="summaryPerson" colspan="2"> … </td>
<td class="summaryFromDate"> … </td>
<td class="summaryToDate"> … </td>
<td class="summaryOriginalRecords"> … </td>
<td class="summaryOriginalHours"> … </td>
<td class="summaryExcludedHours"> … </td>
<td class="summaryTotalHours"> … </td>
</tr>
<tr class="summaryRow">
<td class="summaryPerson" colspan="2"> … </td>
<td class="summaryFromDate"> … </td>
<td class="summaryToDate"> … </td>
<td class="summaryOriginalRecords"> … </td>
<td class="summaryOriginalHours"> … </td>
<td class="summaryExcludedHours"> … </td>
<td class="summaryTotalHours"> … </td>
</tr>
</tbody>
I want to get everything that is inside tbody element with all attributes and texts. How to do this using jquery?
I know only way when I can loop through each tr
$('tbody > tr').each()
but in this case I will need to select every attr and class and text and etc... It seems pretty hard. Is it any good way to get all elements? Maybe collection of tr element as text?
Help please=)
You can get the html contents of the tbody using .html()
var html = $('tbody').html();//using the id $('#summaryBody').html()
It's pretty simple:
$("tbody").html();
I have created a GSP page with two dynamic table with data and now i have to compare the data (inner html) and if any difference then highlight in table 2.
how to do it on clicking button using JS/jquery on clientside?
Table 1 is -
<table class="table loadTable" id ="table1">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode </td>
<td nowrap="">int </td>
<td nowrap="">YES </td>
<td nowrap="">NULL </td>
<td nowrap="">10 </td>
</tr>
<tr>
<td nowrap="">Number </td>
<td nowrap="">varchar </td>
<td nowrap="">NO </td>
<td nowrap="">20 </td>
<td nowrap="">NULL </td>
<td nowrap="">PRI </td>
</tr><tr>
<td nowrap="">Type </td>
<td nowrap="">tinyint </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">3 </td>
<td nowrap="">PRI </td>
</tr>
<tr>
<td nowrap="">Date </td>
<td nowrap="">smalldatetime </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">NULL </td>
</tr>
</tbody>
table 2 is -
<table class="table loadTable" id ="table2">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode</td>
<td nowrap="">int</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">10</td>
<td nowrap=""></td>
</tr>
<tr>
<td nowrap="">PhoneNumber</td>
<td nowrap="">varchar</td>
<td nowrap="">NO</td>
<td nowrap="">20</td>
<td nowrap="">NULL</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">Type</td>
<td nowrap="">tinyint</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">3</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">EffectiveDate</td>
<td nowrap="">datetime</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">NULL</td>
<td nowrap=""></td>
</tr>
</tbody>
</table>
if we click on following button then table 2 should get highlighted with any non matching data with table2.
<div style="align:right"><input type="submit" value="Compare IVR & TNS" /></div>
I wrote a quick function that should work as long as the number of rows is always the same and the user can't remove a row. in which case you should add id's to the rows and compare the rows by id or key.
function compareTables(t1, t2){
var t2rows = t2.find('tbody > tr');
t1.find('tbody > tr').each(function(index){
var t1row = $(this);
var t2row = $(t2rows[index]);
var t2tds = t2row.find('td');
t1row.find('td').each(function(index){
if($(this).text().trim() != $(t2tds[index]).text().trim() ){
console.log('difference: table1:('+$(this).text()+') table2:('+$(t2tds[index]).text()+')');
//set row in error
return;
}
});
});
}