I have a Django application where using wkhtmltopdf I generate a pdf document. I have a section there, like the code below. I want to on each side was exactly 4 texts (objects). But everyone is different and the text comes out uneven arrangement. CSS does not help. How to do it?
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top:50px;">
<h3>{% trans 'In progress' %}</h3>
{% for worked_on in worker.worked_on.all %}
<tr>
<td width="33%" align="left" valign="top"> </td>
<td width="67%" class="project-name">
//CONTENT
</td>
</tr>
<tr>
<td class="project-image" width="33%" align="left" valign="top">
//CONTENT
</td>
<td class="project-description" valign="top">
//CONTENT
</td>
</tr>
{% if forloop.counter|divisibleby:"4" %}
<tr>
<td class="project-description" style="margin-bottom:80px;">
<div style="page-break-after: always;"></div>
</td>
</tr>
{% endif %}
{% endfor %}
</table>
Related
I'm using Python and Selenium to click through a site to select and reserve a room. The site presents a table of rooms available. I want to find a specific room and click on the button in the table that is associated with that room....but the button name changes depending on where the room is located in the table. Where it is located depends, in part, on what other rooms are available at the time I run through the website.
In this example, I want to reserve 'Room 34".
The table appears to be identified by:
<table id="MainContent_tblPage"....>
The row or section of the table that includes "Room 34" is identified by the following (which changes depending on where Room 34 appears in the table...which depends on how many other rooms are available):
<tr id=MainContent_rptrPropertyList_trContent_1" >
The button I want to click in this example is:
name="_ctl0:MainContent:rptrPropertyList:_ctl2:rptPropertyRooms:
_ctl0:btnSelect"
(...but the button name changes depending on which other rooms appear in the table...)
My question: How do I find and click the correct button in a table if the button name changes dynamically depending on table content/rows...but the button is always in a row with the text I want to find?
HTML of the section I'm looking at (...sorry, I'm not sure how to make it more readable without the possibility of changes things that might be important for answering my question):
<table id="tblPropertyList" cellpading="0" cellspacing="0" align="center" border="0" width="100%">
<tbody><tr id="MainContent_rptrPropertyList_trContent_0">
##...snip...similar code as shown under <tr id="MainContent_rptrPropertyList_trContent_1"> below...
##...I cut it out to save space but I can add it back if it helps --JRrcgp
<tr id="MainContent_rptrPropertyList_trContent_1">
<td class="room_grid_row">
<table cellpading="0" cellspacing="0" width="100%;">
<tbody><tr>
<td colspan="2" class="room_grid_heading_2">
Hornswoggle Tower
<br><span class="text2">CityPlace</span>
</td>
</tr>
<tr>
<td align="right" valign="top">
<div class="room_grid_image">
<a onclick="javascript:ShowGallery('lightSlider_1');" title="Room 34">
<img src="imgHandler.ashx?image=\\fileserver.inncenter.pms.inrd.live\\Share1\\Assets/pics/roomClass_pic_8455.jpg" id="MainContent_rptrPropertyList_Image1_1" onerror="showNoImage(this);" style="visibility:true;">
</a>
</div>
<div class="demo">
<ul id="lightSlider_1" style="display:none">
<li data-thumb="imgHandler.ashx?image=\\fileserver.inncenter.pms.inrd.live\\Share1\\Assets/pics/roomClass_pic_8455.jpg">
<img src="imgHandler.ashx?image=\\fileserver.inncenter.pms.inrd.live\\Share1\\Assets/pics/roomClass_pic_8455.jpg">
</li>
</ul>
</div>
</td>
<td valign="top" width="100%" class="padding_left_1">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody><tr>
<td class="room_grid_heading" colspan="3">
<div class="floatleft">
Room 34
</div>
<div class="floatright">
<span class="room_grid_from_rate_text1">From </span>
<span id="MainContent_rptrPropertyList_lblMinRate_1" class="room_grid_from_rate_text2">$88</span>
<!--<span class="room_grid_from_rate_text1">/Night</span>-->
</div>
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" cellpading="0" cellspacing="0">
<tbody><tr>
<td valign="top" class="room_grid_discription_2">
<span id="MainContent_rptrPropertyList_reptSectionInline_1_lblSectionInline_0" class="more"><font face="Verdana">Text description of room.</font></span>
</td>
</tr>
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0">
<tbody><tr>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td id="MainContent_rptrPropertyList_tdSingleRate_1" style="display: none;">
<font class="Bold"> $<span id="MainContent_rptrPropertyList_lblratePrice_1">88</span><br></font> per night
</td>
</tr>
<tr>
<td valign="bottom" align="left">
<table align="left" width="100%" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="left" nowrap="" width="80%" class="displayRatePlan"><span class="room_grid_rateplanname">
Best Available Rate
</span><span class="room_grid_rateplan_moreinfo">(<a class="thickbox" id="lnkMoreInfo" title="Best Available Rate" href="#TB_inline?height=Div8&width=Div7&inlineId=MainContent_rptrPropertyList_rptPropertyRooms_1_Div9_0">More Info</a>)</span>
<div id="MainContent_rptrPropertyList_rptPropertyRooms_1_Div9_0" class="roomClassSection" style="display: none;">
<div class="popupWidth" id="Div7">
<div class="popupHeight" id="Div8">
<table class="more_info_table" cellspacing="0" cellpadding="0" align="center" border="0">
<tbody><tr>
<td>
<div id="MainContent_rptrPropertyList_rptPropertyRooms_1_excludeRoom_DIV_0">
</div></td></tr><tr>
<td class="alt1">
Name:
</td>
<td style="width: 90%">
Room Rate
</td>
</tr>
<tr>
<td class="alt1">
Date:
</td>
<td>
Fri, Apr 27, 2018 - Sun, Apr 29, 2018
</td>
</tr>
<tr>
<td class="alt1">
Policy:
</td>
<td>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</td>
<td id="MainContent_rptrPropertyList_rptPropertyRooms_1_tdRateDescription_0" align="right" nowrap="nowrap" width="12%">
<span class="room_grid_fullrate">
$188
</span>
<span class="room_grid_fullrate_avgnightly">
<span id="MainContent_rptrPropertyList_rptPropertyRooms_1_lblRateMsg_0">(Avg nightly rate)</span></span>
</td>
<td width="8%" align="left">
<input type="submit" name="_ctl0:MainContent:rptrPropertyList:_ctl2:rptPropertyRooms:_ctl0:btnSelect" value="Select" onclick="ShowProgress();" language="javascript" id="MainContent_rptrPropertyList_rptPropertyRooms_1_btnSelect_0" class="button green">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr id="MainContent_rptrPropertyList_trContent_2">
##...snip...similar code as shown under <tr id="MainContent_rptrPropertyList_trContent_1"> above...
<tr id="MainContent_rptrPropertyList_trContent_3">
##...snip...similar code as shown under <tr id="MainContent_rptrPropertyList_trContent_1"> above...
##...this continues to repeat once for each room available
EDIT: I'm currently working past this issue by hard-coding the button I'm clicking. I use Selenium to navigate to the webpage that creates a table of the rooms available and then I click on the appropriate button as it stands today. But the name of the button will change in the future:
room34 = browser.find_element_by_name('_ctl0:MainContent:rptrPropertyList:_ctl31:rptPropertyRooms:_ctl0:btnSelect')
room34.click()
EDIT 2: I've played the suggestion from #Grasshopper. His code didn't work for me, but I made some changes that I thought made progress....I was mistaken. I'm removing the rest of Edit 2 so as not to confuse the issue.
To click on the button with name as _ctl0:MainContent:rptrPropertyList:_ctl2:rptPropertyRooms:_ctl0:btnSelect with respect to the element with text as Room 34 you can use either of the following line of code :
Using following :
driver.find_element_by_xpath("//div[#class='room_grid_image']/a[contains(#title,'Room 34')]//following::input[1]").click()
Using following-sibling :
driver.find_element_by_xpath("//div[#class='room_grid_image']/a[contains(#title,'Room 34')]//following-sibling::input[1]").click()
Try this xpath - "//div[normalize-space(.)='Room 34']/ancestor::tbody/tr/td//input[#type='submit']"
The 'Room 34' can be substituted by a python variable. normalize-space is required as the text has a lot of white space.
I'm starting coding. I'm using Symfony 3.3
I would like to hide ( and show ) a or some specifics rows on a table with a checkbox.
I tried with javascript and jquery. I would like that the hidden rows stay hide.
I don't know how to do this. Here is my twig
{% block body %}
<div class="container">
<h3>List of products</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
<th>Size</th>
<th>Charges</th>
<th>Price</th>
<th>Actions</th>
<th>Desactivation</th>
</tr>
</thead>
<tbody>
{% for catalogue in catalogues %}
<tr class="table">
<td>{{ catalogue.product}} </td>
<td>{{ catalogue.description }} </td>
<td>{{ catalogue.size}} </td>
<td>{{ catalogue.charge }} </td>
<td>{{ catalogue.price }}</td>
<td>
<span class="glyphicon glyphicon-edit"></span>
<span class="glyphicon glyphicon-remove"></span>
</td>
<td><input type="checkbox" name="boutton35" value="Desactivation" />
</td>
</tr>
{% else %}
{% endfor %}
</tbody>
</table>
{% endblock %}
$('.hideshow').on('click',function(){
let cls = $(this).attr("data-id")
if ( $('#'+cls).css('display') == 'none' ){
$('.table tbody').find('#'+cls).show();
}else{
$('.table tbody').find('#'+cls).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>List of products</h3>
<div class="buttons">
<button type="button" data-id="tr1" class="hideshow">Hide/Show Row 1</button>
<button type="button" data-id="tr2" class="hideshow">Hide/Show Row 2</button>
<button type="button" data-id="tr3" class="hideshow">Hide/Show Row 3</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
<th>Size</th>
<th>Charges</th>
<th>Price</th>
<th>Actions</th>
<th>Desactivation</th>
</tr>
</thead>
<tbody>
<tr id="tr1">
<td>Product </td>
<td>Description </td>
<td>Size </td>
<td>Charges </td>
<td>Price</td>
<td>
Edit
Remove
</td>
<td><input type="checkbox" name="boutton35" value="Desactivation" />
</td>
</tr>
<tr id="tr2">
<td>Product </td>
<td>Description </td>
<td>Size </td>
<td>Charges </td>
<td>Price</td>
<td>
Edit
Remove
</td>
<td><input type="checkbox" name="boutton35" value="Desactivation" />
</td>
</tr>
<tr id="tr3">
<td>Product </td>
<td>Description </td>
<td>Size </td>
<td>Charges </td>
<td>Price</td>
<td>
Edit
Remove
</td>
<td><input type="checkbox" name="boutton35" value="Desactivation" />
</td>
</tr>
</tbody>
</table>
I need some help to populate a textbox when I click in my table line.
Here's my code
<script>
function moveNumbers(number){
document.getElementById("teste").value=number;
}
</script>
</head>
<body>
<div id="table" style="width: 600px; height: 100px; overflow-x:auto">
<table id="listeqpt">
<tr>
<th>Type</th>
<th>Serial Number</th>
<th>VAD</th>
<th>Date Added</th>
</tr>
{% for i in vlist %}
<tr>
<td onclick="moveNumbers(this.value)">{{ i.eqpttype }}</td>
<td onclick="moveNumbers(this.value)">{{ i.serialnumber }}</td>
<td onclick="moveNumbers(this.value)">{{ i.vad }}</td>
<td onclick="moveNumbers(this.value)">{{ i.dateadded }}</td>
</tr>
{% endfor %}
</table>
</div>
<form name="teste">
<input id="teste" type="text">
</form>
With this code, I'm getting 'undefined' value in my textbox (and by the way, i need to populate one textbox with each information that i have in my table, so in this example 4 textboxes)
Thanks in advance
Updated your code to exclude templating stuff, but anyways, td elements don't have a value property. you just need to get the textContent and for good measure, use trim() to remove white space:
UPDATED CODE 11/9 Based on clarifying comment
<script>
function moveNumbers(index, number){
document.getElementById("teste" + index).value = number;
}
</script>
</head>
<body>
<div id="table" style="width: 600px; height: 100px; overflow-x:auto">
<table id="listeqpt">
<tr>
<th>Type</th>
<th>Serial Number</th>
<th>VAD</th>
<th>Date Added</th>
</tr>
<tr>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 1 cell 1</td>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 1 cell 2</td>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 1 cell 3</td>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 1 cell 4</td>
</tr>
<tr>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 2 cell 1</td>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 2 cell 2</td>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 2 cell 3</td>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 2 cell 4</td>
</tr>
</table>
</div>
<form name="teste">
<input id="teste0" type="text">
<input id="teste1" type="text">
<input id="teste2" type="text">
<input id="teste3" type="text">
</form>
I found a way to do what I was looking for... check the code below:
<script>
function moveNumbers(number){
var Row = document.getElementById(number.toString());
var cells = Row.getElementsByTagName("td");
document.getElementById("teste0").value=cells[0].innerText;
document.getElementById("teste1").value=cells[1].innerText;
document.getElementById("teste2").value=cells[2].innerText;
document.getElementById("teste3").value=cells[3].innerText;
}
</script>
</head>
<body>
<div id="table" style="width: 900px; height: 300px; overflow-x:auto">
<table id="listeqpt">
<tr>
<th>Type</th>
<th>Serial Number</th>
<th>VAD</th>
<th>Date Added</th>
</tr>
{% set count = 1 %}
{% for i in vlist %}
<tr id={{ count }} onclick="moveNumbers(this.id)">
<td>{{ i.eqpttype }}</td>
<td>{{ i.serialnumber }} </td>
<td>{{ i.vad }}</td>
<td>{{ i.dateadded }}</td>
</tr>
{% set count = count + 1 %}
{% endfor %}
</table>
</div>
<form name="teste">
<input id="teste0" type="text">
<input id="teste1" type="text">
<input id="teste2" type="text">
<input id="teste3" type="text">
</form>
Thanks for helping me with this....See ya
I have the following form inside SharePoint 2013 web application :-
I need to remove all the Table <tr> except the ones that start with "name" & "title". so can anyone adivce how i can achieve this ? . here is part of the markup for the above image (it show two Tr on that have Content Type (should be removed), while the other contain Name ):-
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
Now i have jquery version 1.7 loaded inside the web application, but i prefer to achieved using pure javaScript.
Thanks
EDIT here is a more detailed markup :-
<div id="contentRow">
<div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
<div id="contentBox" aria-relevant="all" aria-live="polite">
<div id="notificationArea" class="ms-notif-box"></div>
<div id="DeltaPageStatusBar">
<div id="customcalender"></div>
<div id="DeltaPlaceHolderMain">
<a id="mainContent" tabindex="-1" name="mainContent"></a>
<div style="padding-left:5px">
<table id="onetIDListForm" class="ms-core-tableNoSpace">
<tbody>
<tr>
<td>
<div class="ms-webpart-zone ms-fullWidth">
<div id="MSOZoneCell_WebPartWPQ2" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
<div id="WebPartWPQ2" class="noindex " style="" allowdelete="false" width="100%" haspers="false" webpartid="6c7d849e-da6b-4138-be9f-b99bde542065">
<table class="ms-informationbar" width="100%" cellspacing="0" cellpadding="2" border="0" style="margin-bottom: 5px;">
<div id="listFormToolBarTop" style="display: none;">
<span style="display:none">
<span></span>
<table width="100%">
<tbody>
<tr>
<td width="100%" valign="top">
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<tr>
When in doubt, filter is your friend:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jjzx6mge/4/
$('#formTbl tr').filter(function () {
return !$(".ms-standardheader", this).text().match(/Name|Title/i);
}).remove();
The result returned of a function passed to filter is a boolean value telling which items to retain (truthy), or which to exclude (falsey).
This one targets only rows that have the requested text in the ms-standardheader classed element.
It also only targets a specific inner table to avoid the case of deep searching from the top level table and wiping out entire tables within it.
While you can do this with plain old JS, significantly more code is required.As you already have a version of jQuery installed, it makes sense to use it.
This would work:
$(function() {
$('#formTbl tr').each(function() {
var frstVal = $(this).find('td').eq(0).text();
if (!frstVal.match(/name|title/i)) {
$(this).remove()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Title
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
This will remove every tr that has a .ms-standardheader element that contains the text Name or Title
$('#formTbl tr').each(function() {
var that = $(this);
var label = that.find('.ms-standardheader').text();
if (label.indexOf('Name') != -1 || label.indexOf('Title') != -1) {
that.remove();
}
});
And here I am, doing this the good ol' plain JS way, since you've asked for it :)
http://jsfiddle.net/m53esfpo/3/
Edit: Updated code and fiddle (thanks #TrueBlueAussie)
Removes every tr except the ones that start with name or title.
var t = document.getElementById('formTbl');
for (var i = 0; i < t.getElementsByTagName("tr").length; i++) {
var s = t.getElementsByTagName("tr")[i].getElementsByClassName('ms-formlabel');
if (s.length > 0) {
if (s[0].innerText.indexOf('Name') < 0 && s[0].innerText.indexOf('Title') < 0) {
t.getElementsByTagName("tr")[i].parentNode.removeChild(t.getElementsByTagName("tr")[i]);
}
}
}
You can do it with this:
$("#formTbl tr td h3").not("h3:contains('Name'):contains('Title')").closest('tr').remove();
I have created form template in Mailchimp, I have been through the documentation and using all the Mailchimp tags respectively its even showing me the icons to drag/ movable content editable etc.
Whenever I edit the content its visible through the campaign test area but when i copy the block and change the positioning, it changes its position in the backend but do not show any changes on the campaign test area.
Here is some piece of the html i am using, i have checked the html for issue but i am unable to find any issues.
<tr mc:repeatable="ntwologo" mc:variant="new-layout-twologo">
<td mc:hideable align="center" valign="top" class="fix-box">
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<!-- start layout-3 container width 600px -->
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" class="container" bgcolor="#ffffff" style="background-color: #ffffff; ">
<tr>
<td valign="top">
<!-- start layout-3 container width 560px -->
<table width="560" align="center" border="0" cellspacing="0" cellpadding="0" class="full-width" bgcolor="#ffffff" style="background-color:#ffffff;">
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<!-- start image content -->
<tr>
<td valign="top" width="100%">
<table class="full-width">
<tr>
<td>
<div class="heading" style="margin-bottom:20px;" mc:edit="text heading">
Most Active Canadian
</div>
</td>
</tr>
<tr>
<td class="twologos">
<img mc:allowdesigner="" mc:allowtext="" style="border:1px solid #b5ae92;" src="https://gallery.mailchimp.com/85ff5a532432ef3d1b871c206/images/dceb568a-6e4c-48b8-a2b7-1db04b6780d8.jpg" mc:edit="layoutleftlogo">
<img mc:allowdesigner="" mc:allowtext="" style="border:1px solid #b5ae92;" src="https://gallery.mailchimp.com/85ff5a532432ef3d1b871c206/images/f1eb0308-e0ad-4f6e-b15c-e5583f72a4cf.jpg" mc:edit="layoutrightlogo">
</td>
</tr>
<tr>
<td>
<div class="yaletext" mc:edit="text content">
<!-- text here -->
<br>
Read More
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- end image content -->
</table>
<!-- end layout-3 container width 560px -->
</td>
</tr>
</table>
<!-- end layout-3 container width 600px -->
</td>
</tr>
</table>
</td>
</tr>
<!-- END LAYOUT-3 -->