I have below HTML, i am trying to update the content of tbody dynamically using ajax. I have response html all i want is to update the tbody content using prototype. Till now i have tried $('table-body').innerHTML="html content here";
<tbody class="table-body">
<tr>
<td id="11" class="consumables model" width="15%">Aficion SP 20022</td>
<td id="12" class="consumables type" width="15%">Print Cartridge</td>
<td class="consumables" width="15%">Black </td>
<td class="consumables" width="15%">15000 </td>
<td class="consumables" width="15%">
<td class="consumables" width="25%">
</tr>
<tr>
<td id="10" class="consumables model" width="15%">Aficion SP 2002</td>
<td id="12" class="consumables type" width="15%">Print Cartridge</td>
<td class="consumables" width="15%">Black </td>
<td class="consumables" width="15%">15000 </td>
<td class="consumables" width="15%">
<td class="consumables" width="25%">
</tr>
<tr>
<td id="2" class="consumables model" width="15%">Aficion SP C242SF</td>
<td id="14" class="consumables type" width="15%">Print cartridge SP 4100</td>
<td class="consumables" width="15%">Magenta </td>
<td class="consumables" width="15%">50000 </td>
<td class="consumables" width="15%">
<td class="consumables" width="25%">
</tr>
</tbody>
There are 2 ways to solve this
change the class to an id on the <tbody> tag and then do $('table-body').update("html content here")
use the class to select the first element matching that selector $$('.table-body').first().update("html content here")
Related
I am trying to convert an html to pdf but the problem i face is that the html table tags width is not getting set correctly..
This is my html
<table cellpadding='4' cellspacing='4' border='0' width='100%' style='width:100%'>
<tr style='background-color:#000000'>
<td colspan='2' align='center' valign='middle' width='100%'>
<font face='Calibri' size='6' color='#FFFFFF'>Retail Natural Gas Deal Sheet</font>
</td>
</tr>
<tr>
<td colspan='2' width='100%'> </td>
</tr>
<tr>
<td width='90%' style='width:90%'>
<table cellpadding='0' cellspacing='0' border='0' width='100%'>
<tr>
<td width='42%'>
<font face='Calibri' size='4'>
<b>Deal Number</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='4'>
<b>15RTLG7149</b>
</font>
</td>
</tr>
<tr>
<td colspan='3' width='100%'> </td>
</tr>
<tr>
<td width='42%'>
<font face='Calibri' size='2'>
<b>Trade Date</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='2'>February 09, 2015</font>
</td>
</tr>
<tr>
<td width='42%'>
<font face='Calibri' size='2'>
<b>Price Date</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='2'>February 09, 2015</font>
</td>
</tr>
<tr>
<td width='42%'>
<font face='Calibri' size='2'>
<b>Authorize Date</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='2'>February 09, 2015</font>
</td>
</tr>
<tr>
<td colspan='3' width='100%'> </td>
</tr>
</table>
</td>
<td width='10%' style='width:10%' valign='top'>
<table cellpadding='0' cellspacing='0' border='0' width='100%'>
<tr>
<td colspan='2' align='center' width='100%'>
<font face='Calibri' size='2'>
<b>Volumes (MMMBtu)</b>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
this is the c# code i am using to generate the pdf
Document pdfDoc = new Document();
//Document pdfDoc = new Document(PageSize.A4, 10f, 10f, 10f, 0f);
//HTMLWorker htmlparser = new HTMLWorker(pdfDoc);
using (MemoryStream memoryStream = new MemoryStream())
{
PdfWriter writer = PdfWriter.GetInstance(pdfDoc, memoryStream);
pdfDoc.Open();
XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, new StringReader(HTML));
pdfDoc.Close();
byte[] bytes = memoryStream.ToArray();
memoryStream.Close();
return bytes;
}
but this is how its rendered in the pdf.. I am not able to find the right answers.. I need help.. Thanks in advance..
http://i.stack.imgur.com/8WyBh.jpg
I have copy pasted your HTML to a text editor (Notepad++; marked 1 in the screen shot below). I have opened this HTML in a browser (Chrome; marked 2 in the screen shot below). I have converted the HTML to PDF (using XML Worker; the PDF is marked 3 in the screen shot below).
When I compare what I see in the browser with what I see in the PDF, I have the impression that iText's XML Worker is doing a great job. There isn't that much difference between what I see in the browser and what I see in the PDF.
However, when I look at your HTML, I see inconsistencies. Have you tried viewing your HTML in a browser? It doesn't look the way you expected, does it? Seems like the problem isn't caused by iText, but it's caused by the way you create your HTML. Please tell us if the HTML looks the way you expect in a browser. If not, please explain what you expect. Right now, it is hard to understand the problem as what I see in the PDF corresponds really well with what I see in a browser.
Update:
In your question, you didn't add any borders (border='0') and it was hard to see what you mean. I've now added borders, so that the HTML looks like this:
You want the PDF to look like this:
This is very easy if you simplify your HTML like this:
<table cellpadding='4' cellspacing='4' border='1' width='100%' style='width:100%'>
<tr style='background-color:#000000'>
<td colspan='2' align='center' valign='middle'>
<font face='Calibri' size='6' color='#FFFFFF'>XXXX XXXXX XXXXX</font>
</td>
</tr>
<tr>
<td colspan='2'> </td>
</tr>
<tr>
<td width='90%' style='width:90%'>
<table cellpadding='0' cellspacing='0' border='1' width='100%'>
<tr>
<td width='42%'>
<font face='Calibri' size='4'>
<b>Deal Number</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='4'>
<b>XXXXXXXXXX</b>
</font>
</td>
</tr>
<tr>
<td colspan='3' width='100%'> </td>
</tr>
<tr>
<td width='42%'>
<font face='Calibri' size='2'>
<b>Trade Date</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='2'>February 09, 2015</font>
</td>
</tr>
<tr>
<td width='42%'>
<font face='Calibri' size='2'>
<b>Price Date</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='2'>February 09, 2015</font>
</td>
</tr>
<tr>
<td width='42%'>
<font face='Calibri' size='2'>
<b>Authorize Date</b>
</font>
</td>
<td width='1%'> </td>
<td width='57%'>
<font face='Calibri' size='2'>February 09, 2015</font>
</td>
</tr>
<tr>
<td colspan='3' width='100%'> </td>
</tr>
</table>
</td>
<td width='10%' style='width:10%' valign='top'>
<table cellpadding='0' cellspacing='0' border='1' width='100%'>
<tr>
<td colspan='2' align='center' width='100%'>
<font face='Calibri' size='2'>
<b>Xxxxxxx (XXXXXXX)</b>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
What did I change? I removed the width='100%' in the <td> tags where colspan='2'. This information is ambiguous: you are saying that the two columns together should take 100% of the width. However:
You already defined this in the <table> tag where you also have width='100%', and
If a cell has colspan 2 and you say that this cell should take 100% of the width, there is no way to tell the width of each column. It doesn't make sense to put width='100%' there.
iTextSharp defines the width of the columns based on the first row where it can find information about the width. In this case, the first row width such information is a row with colspan 2 in a table with 2 columns. You define the width of these 2 columns combined as 100%, and iTextSharp interprets this as if you want to say that each column takes 50% (100% / 2) of the width.
If you remove this ambiguous information, iText will define the width of the columns based on the widths defined in the third row (which is what you expect).
Is there any logical way to change the background colour for a table cell in a repeatable region in mailchimp? Here is my code, I don't see any options in mailchimp with the custom template build.
<table width="100%" cellspacing="20" mc:repeatable="product" mc:variant="content1">
<tbody>
<tr>
<td align="center" bgcolor="#ff0000" valign="middle" mc:edit="playlist"><h2>Playlist</h2>
<h3>Check out this playlist!</h3>
<h4>FOLLOW</h4></td>
</tr>
</tbody>
</table>
I came across a similar issue today. Here's a possible solution:
<table width="100%" cellspacing="20" mc:repeatable="product" mc:variant="red">
<tbody>
<tr>
<td align="center" bgcolor="#ff0000" valign="middle" mc:edit="playlist">
<h2>Playlist</h2>
<h3>Check out this playlist!</h3>
<h4>FOLLOW</h4>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="20" mc:repeatable="product" mc:variant="green">
<tbody>
<tr>
<td align="center" bgcolor="#00ff00" valign="middle" mc:edit="playlist">
<h2>Playlist</h2>
<h3>Check out this playlist!</h3>
<h4>FOLLOW</h4>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="20" mc:repeatable="product" mc:variant="blue">
<tbody>
<tr>
<td align="center" bgcolor="#0000ff" valign="middle" mc:edit="playlist">
<h2>Playlist</h2>
<h3>Check out this playlist!</h3>
<h4>FOLLOW</h4>
</td>
</tr>
</tbody>
</table>
When you've imported this into your template, create a campaign and on the design page you'll have a dropdown with the different colour options. Make any h2s, h3s etc editable by adding mc:edit.
I am trying to create a two column email flyer but I'm having trouble with the coding as Outlook hates CSS.
I'm using tables to keep it as simple as possible but I want two separate tables on the left and the right so I can add data into it as I wish.
I tried using float left and right on the two tables but Outlook ignores this style.
I know the two grey tables at the bottom are each in their own separate "holder" tables but this is so I can duplicate the grey "data" tables for when I add new articles.
<table class="all" width="auto" height="auto" border="0" cellspacing="0"><tr><td height="504">
<table width="750" height="140" border="0" cellspacing="0">
<tr>
<td width="200" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="345" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
</tr>
<tr>
<td width="200" valign="bottom" bgcolor="#E6E6E6"> </td>
<td align="center" valign="bottom" bgcolor="#E6E6E6"><font color="#111111" face="Arial Narrow" size="+2">DECEMBER NEWSLETTER</font></td>
<td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"><font size="2"><strong>#4 - <span class="orange">04.12.13</span></strong></font></td>
<td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
</tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="75" height="50" bgcolor="#E6E6E6" scope="row"> </td>
<td width="600" rowspan="2" scope="row"><img src="http://placehold.it/600x200"/></td>
<td width="75" bgcolor="#E6E6E6" scope="row"> </td>
</tr>
<tr>
<td width="75" height="81" scope="row"> </td>
<td scope="row"> </td>
</tr>
</table>
<table class="holder" width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" scope="row">
<table class="inlinetableleft" width="360">
<tr>
<td width="371" align="left">
<!------------LEFT COLUMN------------------>
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<th height="103" colspan="4" align="left" valign="middle" bgcolor="#CCCCCC" scope="row"> </th>
</tr>
</table>
<!--------------LEFT COLUMN END------------->
</td>
</tr>
</table>
<table class="inlinetableright" width="360">
<tr>
<td align="left">
<!------------RIGHT COLUMN------------------>
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="106" align="left" bgcolor="#CCCCCC" scope="row"> </td>
</tr>
</table>
<!-----------RIGHT COLUMN END-------------->
</td></tr>
</table>
</td>
</tr>
</table>
Here is a fiddle of my newsletter so far, it's the bottom two grey tables that I want to be side by side.
Fiddle
For HTML emails, nested tables are your friend :)
JSFiddle
Note: the border around the table is just to show you where the tables are.
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2">
header content here
</td>
</tr>
<tr>
<td width="300">
<table border="0" width="300" cellpadding="1" cellspacing="0" align="left">
<tr>
<td>Left Content</td>
</tr>
</table>
</td>
<td width="300">
<table border="0" width="300" cellpadding="1" cellspacing="0" align="left">
<tr>
<td>Right content</td>
</tr>
</table>
</td>
</tr>
</table>
I would like to know if I can combine at the same time an XPath looking for the previous sibling of a certain class with a certain text and at the same time a sibling at the same level with a certain text.
For example I would like to find the following cells:
<td class="sdawatt_booknow">Book</td>
by looking up a sibling of class sdawatt_hrdcell containing the text Spin preceded by a td of class sdawatt_banner with the text Monday - 16 September 2013.
Or the following td:
<td class="sdawatt_booknow">Book</td>
if we look for the date of the 'Friday - 13 September 2013'.
Is this something doable in Xpath ?
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;" class="sdawatt_outer">
<tbody><tr>
<td class="sdawatt_hdrcell">Time</td>
<td class="sdawatt_hdrcell">Class</td>
<td class="sdawatt_hdrcell">Level</td>
<td class="sdawatt_hdrcell">Spaces</td>
<td class="sdawatt_hdrcell">Location</td>
<td class="sdawatt_hdrcell">Instructors</td>
<td class="sdawatt_hdrcell">Tags</td>
<td class="sdawatt_hdrcell">Info</td>
<td class="sdawatt_hdrcell">Book</td>
</tr><tr>
<td colspan="9" class="sdawatt_banner">Friday - 13 September 2013</td>
</tr><tr class="sdawatt_classrow">
<td class="sdawatt_time">07:45-08:15</td>
<td class="sdawatt_classname">Boxing</td>
<td class="sdawatt_level"> </td>
<td class="sdawatt_spaces">14 Left</td>
<td class="sdawatt_location">Main Studio</td>
<td class="sdawatt_resources"> Darren</td>
<td class=" sdawatt_infotags"></td>
<td class="sdawatt_info"><img src="https://v4.fitnessandlifestylecentre.com/webaccess/TimetableView/information.gif" class="tiptip" /></td>
<td class="sdawatt_booknow">Book</td>
</tr><tr class="sdawatt_classrow">
<td class="sdawatt_time">12:00-12:45</td>
<td class="sdawatt_classname">Spin</td>
<td class="sdawatt_level"> </td>
<td class="sdawatt_spaces">8 Left</td>
<td class="sdawatt_location">Main Studio</td>
<td class="sdawatt_resources"> Matt</td>
<td class=" sdawatt_infotags"></td>
<td class="sdawatt_info"><img src="https://v4.fitnessandlifestylecentre.com/webaccess/TimetableView/information.gif" class="tiptip" /></td>
<td class="sdawatt_booknow">Book</td>
</tr><tr>
<td colspan="9" class="sdawatt_banner">Monday - 16 September 2013</td>
</tr><tr class="sdawatt_classrow">
<td class="sdawatt_time">13:00-13:45</td>
<td class="sdawatt_classname">Spin</td>
<td class="sdawatt_level"> </td>
<td class="sdawatt_spaces">12 Left</td>
<td class="sdawatt_location">Main Studio</td>
<td class="sdawatt_resources"> Marzena</td>
<td class=" sdawatt_infotags"></td>
<td class="sdawatt_info">
<img src="https://v4.fitnessandlifestylecentre.com/webaccess/TimetableView/information.gif" class="tiptip" /></td>
<td class="sdawatt_booknow">Book</td>
</tr>
</tbody></table>
//tr[
contains(
td[#class="sdawatt_banner"],
"Monday - 16 September 2013")
]
/following-sibling::tr[
contains(
td[#class="sdawatt_classname"],
"Spin")
]/td[#class="sdawatt_booknow"]
yields
<td class="sdawatt_booknow">
Book
</td>
I would like to check if the image is in the "Test2" row (and not in the second row). So how can I do this?
Tell me if i'm not clear enough.
I've got this table:
<table>
<tr>
<td>Test1</td>
<td>blabla</td>
<td>blabla</td>
<td style="text-align:center">
<img src=/QCAdmin/Content/Images/Check.gif alt="logoIsDefault"/>
</td>
<td>blabla</td>
</tr>
<tr>
<td>Test2</td>
<td>blabla</td>
<td>blabla</td>
<td style="text-align:center"></td>
<td>blabla</td>
</tr>
</table>
When, I click on some link, the image change rows:
<table>
<tr>
<td>Test1</td>
<td>blabla</td>
<td>blabla</td>
<td style="text-align:center"></td>
<td>blabla</td>
</tr>
<tr>
<td>Test2</td>
<td>blabla</td>
<td>blabla</td>
<td style="text-align:center">
<img src=/QCAdmin/Content/Images/Check.gif alt="logoIsDefault"/>
</td>
<td>blabla</td>
</tr>
</table>
check if this returns anything:
//table/tr[td='Test2']/td/img
can be done like:
boolean(//table/tr[td='Test2']/td/img)