I have a page in active tab.
I need to find in this page a table:
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="details">
grab it until next </table>-tag,
and use it (to paste it in a new tab, popup, or just in "alert").
The easiest would be to use jQuery to select the table and return the HTML. For example $('table').html() will return a string of the <table> markup.
I wouldn't include jQuery for such an easy task.
var table = document.getElememtsByTagName("table")[0]; //if it is the first or only table, you could change 0 to any other number if the table always is at the same position
or you could give your table an id:
var table = document.getElementById("my-table");
to get the html just call
var foo = table.innerHtml;
Related
I have the following table:
<table>
<tr data-ng-repeat-start=... data-ng-click="contactGroup.expanded = !contactGroup.expanded">
<td class="myColumn" data-ng-click=...>
when a row is clicked than the row expands and additional information is shown to this row - this works fine.
In this row there is also a column (myColumn) which can be clicked.
If this column is clicked than first the row expands and than the proper click event is handled. Is there a way to prevent the expandation of the row when the column myColumn is clicked?
The reason it is happening because of event bubbling and to stop it event.stopPropogation() can be used.
While clicking the column bind a method; and use $event to prevent default
<table>
<tr data-ng-repeat-start=... data-ng-click="contactGroup.expanded = !contactGroup.expanded">
<td class="myColumn" data-ng-click="toggleColumn($event)">
And in Controller:
$scope.toggleColumn = function(e){
e.stopPropogation(); //This would prevent event bubbling from td to tr
e.preventDefault(); //This will prevent default action like link load on click of hyperlink
//toggle functionality
}
You need to bind the row click event in column and remove from the row.
Please check the bellow.
<table>
<tr data-ng-repeat-start=... data-ng-click="">
<td class="myColumn" data-ng-click="contactGroup.expanded = !contactGroup.expanded; <columnClickEventHandl>">
try
<table>
<tr data-ng-repeat-start=...
ng-click="!contactGroup.expanded && contactGroup.expanded = !contactGroup.expanded">
<td class="myColumn" ng-click=...>
note, that assignment in the row's ng-click's expression will be executed only when contactGroup.expanded is false
I have a table. I am trying to display inside the tally boxes column the html canvas I created. I have a 10 records so the canvas should display 10 times inside the table. This is what I've done so far:
var c4 = document.getElementById("c4");
var c4_context = c4.getContext("2d");
function Vertical_2px_Red() {
for (i=0;i<10;i++){
c4_context.beginPath();
c4_context.moveTo(20+i*100, 20);
c4_context.lineTo(100+i*100, 20);
c4_context.moveTo(20+i*100, 20);
c4_context.lineTo(20+i*100, 100);
c4_context.moveTo(100+i*100, 20);
c4_context.lineTo(100+i*100, 100);
c4_context.moveTo(20+i*100, 20);
c4_context.lineTo(100+i*100, 100);
c4_context.moveTo(100+i*100, 100);
c4_context.lineTo(20+i*100, 100);
c4_context.strokeStyle = "Red";
c4_context.stroke();
}
}
My html form:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>{{label.table.cName}}</td>
<td colspan="2">{{label.table.cVote}}</td>
<td>{{label.table.cTB}}</td>
<td>{{label.table.cNV}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in candidates[0]">
<td>{{value.no}} {{label.table.period}} {{value.name}}</td>
<td>{{value.votes}}</td>
<td><canvas id="c4" width="500" height = "200" style="border:solid 1px #000000;"></canvas></td>
</tr>
</tbody>
</table>
</div>
The canvas output is 10 tally boxes.
Now, I want to display the canvas output to the tally boxes column of each row. But it doesn't work. What is the mistake I've done. Any answer would be much appreciated. Thank you
You'll need to give each canvas a unique ID,for one thing. Technically it's not legal to have > 1 item with the same ID. Construct the ID using something in the value of your ng-repeat. Maybe value.no if that is a unique number.
You'll need to modify your javascript to get the appropriate contexts and write into them. Probably do that at the end of the page or on a page load.
Or the better way is probably to make a directive that contains your canvas and the necessary function to draw into it. The directive will be responsible for creating the unique ID based on the values passed in and it will then know how to reference and draw into the context.
I have a React component for a table. If the user is not me, then when I see that user's profile page, I only see the first three columns of the table. If the user is me, then I see four columns. However, dynamically changing the columns causes the following error:
Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 3 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID `.0.1.1.0.0.1.0.0`.
I've looked around a lot and made sure that my table is encased with . How can I allow for this table flexibility in React?
My outer table shell looks like this:
var CategoriesTable = React.createClass({
render: function() {
var includeReps = false;
var repsHeader = '';
if (this.props.currentUser.username === this.props.user.username) {
includeReps = true;
repsHeader = <th>Reps</th>;
}
return (
<div className="categoriesTable panel panel-default">
<CategoriesHeader user={this.props.user} />
<table className="table table-bordered table-striped">
<tbody>
<tr>
<th>Category</th>
<th>Direct Rep</th>
<th>Crowd Rep</th>
{repsHeader}
</tr>
{this.props.user.categories.map(function(category) {
return <CategoriesItem key={category.id} category={category.name} directRep={category.directScore} prevDirectRep={category.previousDirectScore} crowdRep={category.crowdScore} reps={category.reps} includeReps={includeReps} />;
})}
</tbody>
</table>
</div>
);
}
});
Each table row looks like this:
var CategoriesItem = React.createClass({
render: function() {
var reps = this.props.includeReps ? <td>{this.props.reps}</td> : '';
return (
<tr className="categoriesItem">
<td>{this.props.category}</td>
<td><ScoreBar directRep={this.props.directRep} prevDirectRep={this.props.prevDirectRep} category={this.props.category}/></td>
<td>{this.props.crowdRep}</td>
{reps}
</tr>
);
}
});
Why can I do to make React accept these table changes? When I start with the table with all four columns and then switch to a different user's profile page, the fourth table data piece becomes a
Perhaps a hack, but giving a react component a key will force the entire component to re-render when the key changes. If each profile page gives the table a unique key, then this problem goes away.
I have a table where the user can add rows to it but each row is numbered. Now the user enters a number in a textbox for the number of rows he/she wants to add before they actually start adding rows. Below is the code where if the number of rows that has been added is over the number entered by the user, then it stops adding the rows.
if (qnum > <?php echo (int)#$_POST['textQuestion']; ?>) {
return;
}
Example: if user entered in the number 5 in a textbox, then the user can only add 5 rows, if the user tries to add another row, then no row is added because user can't add more than 5 rows.
What my question is that if the user has already reach the max number of rows they have added, then I want it to disable a textarea (user wont be able to click in the textarea and I want to give it the correct colour so that you can tell the textarea is disabled). I also want to disable a hyperlink so that user cannot click on the hyperlink (again suitable color change so user can tell hyperlink is disabled) Does anyone know how to do this?
Below is code for hyperling and the textarea:
<table id="question">
<tr>
<th colspan="2">
Question Number <span id="questionNum">1</span>
</th>
</tr>
<tr>
<td rowspan="3">Question:</td>
<td rowspan="3">
<textarea id="questionTextArea" rows="5" cols="40" name="questionText"></textarea>
<span href="#" class="link">[Question link]</span>
</td>
</tr>
</table>
Jquery code showing example of how a table row is added:
function insertQuestion(form) {
var questionarea=(form.questionText.length)
? form.questionText[0]
: form.questionText;
var context = $('#optionAndAnswer');
var currenttotal = context.find('.answerBtnsOn').length;
alertErrors = "";
// Note, this is just so it's declared...
if (questionarea.value == ""){
if (qnum > <?php echo (int)#$_POST['textQuestion']; ?>) {
return;
}
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $qid = $("<td class='qid'>" + qnum + "</td>");
$tr.append($qid);
$tbody.append($tr);
}
Html table where the table row is added to:
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="qid">Question No</th>
</tr>
</thead>
<tbody></tbody>
</table>
look at this jsfiddle for example here, you can write a question on top using the textarea and when you have done that then click on the button to add it in a new row. It is the top textarea I want to disable only if the number of rows has met its limit.
Are you adding rows via JavaScript/Ajax or on page load?
If the former (which I'm guessing your first code example illustrates), use a JavaScript counter to represent the number of rows, and when they trigger the add row function (which you write), check that number first; alert and disabled accordingly:
jQuery allows you to disable form elements, and just replace the link with the link text (ie. minus the tag), and modify it's color, either with a $(ele).css() call, or by wrapping it in a span tag.
If the latter, you can just write the textarea via PHP with the disabled="disabled" property added to the opening tag. The link: use the same method as above (wrapping it in a span tag, rather than an a tag).
// To disable
$('.someElement').attr('disabled', 'disabled');
// To enable
$('.someElement').removeAttr('disabled');
Obviously, you need to include the jQuery framework. I usually use Google's: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.
I have a couple of mailto links in a HTML document.
<a href="mailto:etc...">
Can I insert HTML formatted body in the mailto: part of the href?
Mail me
Note that (2016) in iOS, it is perfectly fine to add <i> and <b> tags for simple italic, bold formatting.
As you can see in RFC 6068, this is not possible at all:
The special <hfname> "body" indicates that the associated <hfvalue>
is the body of the message. The "body" field value is intended to
contain the content for the first text/plain body part of the
message. The "body" pseudo header field is primarily intended for
the generation of short text messages for automatic processing (such
as "subscribe" messages for mailing lists), not for general MIME
bodies.
Whilst it is NOT possible to use HTML to format your email body you can add line breaks as has been previously suggested.
If you are able to use javascript then "encodeURIComponent()" might be of use like below...
var formattedBody = "FirstLine \n Second Line \n Third Line";
var mailToLink = "mailto:x#y.com?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;
No. This is not possible at all.
It's not quite what you want, but it's possible using modern javascript to create an EML file on the client and stream that to the user's file system, which should open a rich email containing HTML in their mail program, such as Outlook:
https://stackoverflow.com/a/27971771/8595398
Here's a jsfiddle of an email containing images and tables: https://jsfiddle.net/seanodotcom/yd1n8Lfh/
HTML
<!-- https://jsfiddle.net/seanodotcom/yd1n8Lfh -->
<textarea id="textbox" style="width: 300px; height: 600px;">
To: User <user#domain.demo>
Subject: Subject
X-Unsent: 1
Content-Type: text/html
<html>
<head>
<style>
body, html, table {
font-family: Calibri, Arial, sans-serif;
}
.pastdue { color: crimson; }
table {
border: 1px solid silver;
padding: 6px;
}
thead {
text-align: center;
font-size: 1.2em;
color: navy;
background-color: silver;
font-weight: bold;
}
tbody td {
text-align: center;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<td><img src="http://www.laurell.com/images/logo/laurell_logo_storefront.jpg" width="200" height="57" alt=""></td>
<td align="right"><h1><span class="pastdue">PAST DUE</span> INVOICE</h1></td>
</tr>
</table>
<table width=100%>
<thead>
<th>Invoice #</th>
<th>Days Overdue</th>
<th>Amount Owed</th>
</thead>
<tbody>
<tr>
<td>OU812</td>
<td>9</td>
<td>$4395.00</td>
</tr>
<tr>
<td>OU812</td>
<td>9</td>
<td>$4395.00</td>
</tr>
<tr>
<td>OU812</td>
<td>9</td>
<td>$4395.00</td>
</tr>
</tbody>
</table>
</body>
</html>
</textarea> <br>
<button id="create">Create file</button><br><br>
<a download="message.eml" id="downloadlink" style="display: none">Download</a>
Javascript
(function () {
var textFile = null,
makeTextFile = function (text) {
var data = new Blob([text], {type: 'text/plain'});
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
return textFile;
};
var create = document.getElementById('create'),
textbox = document.getElementById('textbox');
create.addEventListener('click', function () {
var link = document.getElementById('downloadlink');
link.href = makeTextFile(textbox.value);
link.style.display = 'block';
}, false);
})();
I have used this and it seems to work with outlook, not using html but you can format the text with line breaks at least when the body is added as output.
Email me
Some things are possible, but not all, say for example you want line breaks, instead of using <br />use %0D%0A
Example:
<img src="images/email.png" alt="EMail PDF Brochure" />
It is worth pointing out that on Safari on the iPhone, at least, inserting basic HTML tags such as <b>, <i>, and <img> (which ideally you shouldn't use in other circumstances anymore anyway, preferring CSS) into the body parameter in the mailto: does appear to work - they are honored within the email client. I haven't done exhaustive testing to see if this is supported by other mobile or desktop browser/email client combos. It's also dubious whether this is really standards-compliant. Might be useful if you are building for that platform, though.
As other responses have noted, you should also use encodeURIComponent on the entire body before embedding it in the mailto: link.
Thunderbird supports html-body: mailto:me#me.com?subject=Me&html-body=<b>ME</b>
Whilst it may not be possible within the parameter of the URL, there is a cheeky solution which allows full HTML. The concept is that you have a hidden element on the page (I am using Bootstrap and Jquery in the example below) which is temporarily revealed and the HTML copied (as per here: How to copy text from a div to clipboard). Following that, you redirect the user to the Mail link so in effect all they then have to do is hit Paste within their designated mail program. I've only tested this on Linux/Thunderbird but the paste also works into Gmail web.
<div id="copyEmailText" class="d-none"><p><strong>This is some HTML</strong>. Please hit paste when your email program opens.</p>
function copyDivToClipboard(element) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand('copy');
window.getSelection().removeAllRanges();// to deselect
}
$('#copyEmail').on('click',function(){
$('#copyEmailText').toggleClass('d-none');
copyDivToClipboard($('#copyEmailText')[0]);
window.location.href = 'mailto:?subject=Email subject text';
$('#copyEmailText').toggleClass('d-none');
})
Anybody can try the following (mailto function only accepts plaintext but here i show how to use HTML innertext properties and how to add an anchor as mailto body params):
//Create as many html elements you need.
const titleElement = document.createElement("DIV");
titleElement.innerHTML = this.shareInformation.title; // Just some string
//Here I create an <a> so I can use href property
const titleLinkElement = document.createElement("a");
titleLinkElement.href = this.shareInformation.link; // This is a url
...
let mail = document.createElement("a");
// Using es6 template literals add the html innerText property and anchor element created to mailto body parameter
mail.href =
`mailto:?subject=${titleElement.innerText}&body=${titleLinkElement}%0D%0A${abstractElement.innerText}`;
mail.click();
// Notice how I use ${titleLinkElement} that is an anchor element, so mailto uses its href and renders the url I needed