I have an html table with rowspan/colspan.I am using jspdf and jspdf-autotable for exporting that html table to pdf. However the pdf getting saved has a table which doesn't contain rowspan/colspan in actual table.How to do colspan/rowspan using jspdf-autotable?
My current code is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>
<script type="text/javascript">
function myFunction()
{
var doc = new jsPDF('p', 'pt');
var res = doc.autoTableHtmlToJson(document.getElementById("my-table"));
doc.autoTable(res.columns, res.data, {startY: 40});
doc.save("Report.pdf");
}
</script>
</head>
<body>
<table border='1' id="my-table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='2'>D</td>
<td colspan='2'>$100</td>
</tr>
<tr>
<td >E</td>
<td >F</td>
</tr>
</tbody>
</table>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
EDIT: Version 3 of the library supports rowspans and colspans, no hacks needed
The plugin doesn't support to automatically port colspans and rowspans from html. However you can do it manually. Check out this example (a demo is here).
In the meantime the plugin seems to support parsing the colspans from HTML. This should work:
<td colspan="2">Colspan</td>
Related
I'm quite new in grails. I'm creating an SMS send module for my project. Here I'm getting some contact number from the user and displaying it inside a dynamically created 'TD' value. Now I want to pass this 'TD' values as a list to my controller.
def controller(){
def var = params.name
}
won't work here as it's not a field value.
Get all table td into array comma separated contact numbers.
Both ways added in the below code. First, where the contact number is last column. And the second, where all td value have class name.
// First way
var contactNumbers= []
$("#example tbody tr").each(function() {
contactNumbers.push($(this).find("td:last-child").html());
});
console.log("If Contact number column is on last"+contactNumbers.join())
// Second way
var contactNumbers1= []
$(".cnTd").each(function(i){
contactNumbers1.push($(this).text())
})
console.log("Contact numbers by class"+contactNumbers1.join())
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table" id="example">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td class="cnTd">5675677567</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>90987786756</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>3455657457</td>
</tr>
</tbody>
</table>
</div>
Now you you send the collected values to controller using hidden form value or by sending ajax request or by query params. At contoller side simply use split(',') or tokenize(',') method to get list of numbers.
Hope this will helps you.
I was using a trial version of kendo grid then after the license expired my employer bought it so i was able to download (they gave access to my account - employer's account is separate)
telerik.kendoui.professional.2016.3.1118.commercial.msi
Now the problem is this is still not working, I have done the following steps to install kendo grid
I have run this installer, and have also manually added to my asp.net-mvc application
js folder under my application's Scripts/kendo folder
css files (styles folder) under my application's Content/kendo folder
My code
#Scripts.Render("~/Scripts/kendo/jquery.min.js")
#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
#Scripts.Render("~/Scripts/kendo/kendo.all.min.js")
#Styles.Render("~/Content/kendo/kendo.common.min.css")
#Styles.Render("~/Content/kendo/kendo.default.min.css")
<script type="text/javascript">
//shorter version of document.ready
$(function () {
//kendo.ui.Grid
$("#grid").kendoGrid(
{
sortable: true,
dataSource: {
pageSize: 1
},
pageable:true,
resizable: true,
columnMenu: true,
scrollable:true
}
);
});
</script>
<div id="examplegrid">
<table id="grid">
<colgroup>
<col />
<col />
<col style="width:110px" />
<col style="width:120px" />
<col style="width:130px" />
</colgroup>
<thead>
<tr>
<th data-field="make">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
</tbody>
</table>
My browser does not have any errors. But i cannot see a kendo grid there.
get support it says you are not licensed for any products (which is confusing because i downloaded the commercial version from there)
I have also posted this to their forums (from my employer's account) but it takes them at least 3 days to respond!!
Page Source snap shot
I am also adding view source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>About - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">your logo here</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<script src="/Scripts/kendo/jquery.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.bootstrap.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.default.min.css" rel="stylesheet"/>
<script src="/Scripts/kendo/kendo.all.min.js"></script>
UPDATE
When i re-opened visual studion it gave me option to update my telerik version which i said yes and it showed me the following screen.
After all this grid is still the same - without kendo-grid skin :S
UPDATE
I read this topic Widgets Are Unavailable or Undefined
So i removed a redundant jquery reference and now the grid looks like the attached image.
Note: this was a separate test appication and i intend to incorporate this grid into my main application. Now the grid looks like this
I found my answer from Bundle of Kendo UI is not working in IIS
So as soon as i renamed the bundle
bundles.Add(new StyleBundle("~/Content/kendo").Include(...));
To
bundles.Add(new StyleBundle("~/Content/kendoui").Include(...));
It worked great!
I've a requirement to hit a url of server x, click a submit button and jump to same url of server y and click the same submit button and this has to be repeated 26 times as I've to change on 26 servers.
All this I have to do selenium ide. I managed to do this for 1 server but just wondering if there is a smart way to do this for 26 servers rather recording 26 times.
I'm using selenium 2.9.0 IDE plugin with firefox browser
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://server-x:9173/" />
<title>New Test</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">New Test</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>website/delivery/DeliveryMethodsRepository/</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=DeliveryMethodsRepository/</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=invalidateCaches</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>name=submit</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=DeliveryMethodsRepository/</td>
<td></td>
</tr>
</tbody></table>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">New Test</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>inventory/InventoryRepository/</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=InventoryRepository/</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=invalidateCaches</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>name=submit</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=InventoryRepository/</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
You can keep base url as "http://". You then need to use readCSV for all server urls and while loop for repeating for number of servers.
Please refer [http://bashamy.blogspot.co.uk/2016/01/selenium-ide-to-use-while-loop-and-read.html] for more information.
Edit Url: http://bashamy.blogspot.com/2016/01/selenium-ide-to-use-while-loop-and-read.html
Eg: Below html code opens 5 different urls from my CSV input file.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://onlineconversion.com/" />
<title>06 ReadCsv_n_Loop</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">06 ReadCsv_n_Loop</td></tr>
</thead><tbody>
<tr>
<td>readCSV</td>
<td>file://C:\Users\extayx\Documents\Selenium IDE\07Input.csv</td>
<td></td>
</tr>
<tr>
<td>store</td>
<td>1</td>
<td>row</td>
</tr>
<tr>
<td>store</td>
<td>1</td>
<td>col</td>
</tr>
<tr>
<td>store</td>
<td>6</td>
<td>z</td>
</tr>
<tr>
<td>while</td>
<td>${row}<${z}</td>
<td></td>
</tr>
<tr>
<td>storeCellValue</td>
<td>ip</td>
<td>${row},${col}</td>
</tr>
<tr>
<td>echo</td>
<td>${ip}</td>
<td></td>
</tr>
<tr>
<td>open</td>
<td>${ip}</td>
<td>${ip}</td>
</tr>
<tr>
<td>storeEval</td>
<td>storedVars['row'] = ${row}+1</td>
<td>x</td>
</tr>
<tr>
<td>endWhile</td>
<td></td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
My input CSV file has below information.
www.google.co.in
www.google.com
www.google.co.uk
www.news.google.co.in
www.seleniumhq.org
Your question is very confusing, so I probably misunderstood it.
In the unlikely case I got it right, you're trying to do the same task for different websites 26 times. Sounds like something a loop could do.
Here's a sample Python code:
urls = ['http://foo.bar', 'http://otherfoo.otherbar',...]
for url in urls:
driver.get(url)
#your selenium code here
This is something I have had to do myself, and is possible using a set of plugins called selite or also selblocks (although selite contains a version of this plugin already)
With these plugins it will allow you to save the list of URLs as an external json file, then to loop the test case you will just need to put the 'Forjson' command calling the file at the stage where you want your loop to begin, and the 'Endforjson' where you want it to end. All the documentation is in the link. Hope it helps.
OK, so I've looked at the getting started examples on the documentation available at: http://mottie.github.io/tablesorter/docs/index.html#Demo
I am trying the to do the basic example provided in the documentation, however my table does not load with the tablesorter features (i.e. the sort icons on the header, or clickable header columns) as the online version demonstrates. What am I doing wrong?...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Something</title>
<!-- load tableSorter theme -->
<link href="http://mottie.github.io/tablesorter/css/theme.default.css" rel="stylesheet">
<!-- load jQuery and tableSorter scripts -->
<script type="text/javascript" src="./includes//jquery-2.1.0.js"></script>
<script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.js"></script>
<!-- load tableSorter widgets -->
<script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascropt">
$(document).ready(function(){
$("table").tablesorter({
theme : 'blue',
widgets : ['zebra','columns'],
sortList: [[0,0]],
debug : true,
widthFixed: false,
showProcessing : true
});
});
</script>
</head>
<body>
<table class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>
It looks like the theme option is not being set. When you initialize tablesorter without any options:
$("#myTable").tablesorter();
The "default" theme is set, so make sure to include the "theme.default.css" file; but since it looks like you are loading the "blue" theme stylesheet, initialize the plugin as follows:
<script type="text/javascropt">
$(function(){
$("#myTable").tablesorter({
theme: "blue"
});
});
</script>
Now, from looking at the blue theme file name, it appears that it might be the original blue theme meant for tablesorter v2.0.5 ("/blue/style.css"). I would venture to guess that the tablesorter being used here is from my fork of tablesorter, so make sure to load the file named "theme.default.css".
I am using nokogiri as my HTML parser.
<html>
<body>
<form>
<table>
<tr><td>Some Text</td></tr>
<tr>
<td colspan="2" align="center">
<br />
<a href="TransportRoom?servlet=CaseSearch.jsp&advancedSearch=Advanced">
Advanced Search
</a>
<br />
</td>
</tr>
</table>
</form>
</body>
</html>
In this html code I want to parse the "Advance Search" link. This html is saved in variable named doc1
Can anyone help me with this?
Should be as simple as
doc = Nokogiri::HTML(doc1)
href = doc.css("a").first.attr('href')
This is what you want?
First answer is working for me but if there is n number of links than we can manipulate it by this way
html = Nokogiri::HTML(doc1)
html.css("a").each do |element|
if (element.text.strip == 'Advanced Search')
advance_search_link = element.attr('href')
end
end
I would do as below :
require 'nokogiri'
#doc = Nokogiri.HTML <<-eotl
<html>
<body>
<form>
<table>
<tr><td>Some Text</td></tr>
<tr>
<td colspan="2" align="center">
<br />
<a href="TransportRoom?servlet=CaseSearch.jsp&advancedSearch=Advanced">
Advanced Search
</a>
<br />
</td>
</tr>
</table>
</form>
</body>
</html>
eotl
#doc.at_xpath("//a[normalize-space(.)='Advanced Search']")['href']
# => "TransportRoom?servlet=CaseSearch.jsp&advancedSearch=Advanced"