Converting table cells data to internal links in a separate .js file - javascript

Having an issue with a small project and I've been stuck for the past 3 days...
I have to convert data cells on a left column of a table in a html file into links (that will target other html files) using javascript & jquery in a separate js file. I am not able to edit the html file due to restrictions on the question.

I hope I understood your question correctly. You could access the cells with the selector .code and then use append() to put a link in there like so:
$(".code").each(function(i){ //find the right cells and for each one...
var text = $(this).text(); //...read the contents...
text = text.substring(3); //...remove the first 3 letters...
$(this).text(""); //...remove the text...
$(this).append("<a href='"+text+".html'>"+text+"</a>"); //...and replace with a link
});
Example: http://jsfiddle.net/7fawbkck/2/

Related

Link not clickable in dynamically added (JQuery) row of list in HTML

I am building a chatbot that provides a link on occasion (using the Chatterbot package as a base). The link comes from python code to my HTML file from where a row is appended to the existing list using JQuery. My problem is that this link does not show up as clickable. I have tried JavaScript link() and html(). I have also tried Anchorme, Autolinker and Linkify.
This is where I am receiving the output from the chatbot:
$submit.done(function(statement) {
createRow(statement);
And this is the code for the row creation using JQuery:
function createRow(text) {
var $row = $('<li class="list-group-item"></li>');
$row.text(text);
$chatlog.append($row);
}
This is what the output looks like.
$row.html(text) should work if the image is anything to go by.

Html Print to PDF - Css not applyed if the table split on second page

I don't know why when I try to save as PDF the DIV that contains just a simple table, if the table split on second page, the second page don't apply css.
This is wrong the result:
As you can see, the last row of the table split on the second page and no css is applyed...
Ho to solve this problem?
Thanks
Use media print CSS. Read the following article:
https://www.tutorialspoint.com/css/css_printing.htm

jquery - dynamic content inside a html table not getting recognised by .innerHtml code (JS / JQuery)

I have a HTML table in my web-application to which I allow my users to dynamically add rows using the onclick event.
However when I try to get the HTML contents of this table, (which is my objective) using either :
$("#table1").html()
or
var x = document.getElementById("table1").innerHTML;
I get only the initial table, and not the rows that were added dynamically.
Interestingly in jQuery when I use
$("#nutritiontable ").text()
I get details of the dynamic rows also, but obviously not the html tags for which I have use. I want both.
Want to know if I missed something, or if anyone knows of any other way to get the entire HTML table with the dynamic content and with the html tags intact.
If you add rows by
$("#table1").append("<tr><td>something</td></tr>")
Then
$("#table1").html()
Will give you everything.
You can use append() function in jQuery.
$("#tableid").append('<tr><td>Row text</td></tr>');

Get html of a table in TinyMCE (using the table plugin)

I have a TinyMCE editor with the table plugin loaded (I'm using the TinyMCE Advanced Wordpress plugin). I have to get a selected table's HTML code (a table that you are currently editing - the on you have resize controls on). With normal text I can use tinyMCE.activeEditor.selection.getContent(), but this is not working when dealing with a table. What is the correct way of doing this?
Thanks.
You might use tinyMCE.activeEditor.selection.getNode();. If this is a table element you got your table and will be able to get the html using
var node = tinyMCE.activeEditor.selection.getNode();
var html = node.innerHTML;
// now you will only need to take care of the surrounding table element
// something like "<table>"+ html +"</table>"; maybe having a look at node.attributes

web - copy section to clipboard and remove certain elements

Ive got a method which will copy a section of html to the clipboard to allow pasting elsewhere.
It is usually a table of which will be the main content so it will be pasted into excel and keep its formatting, which is lovely.
What I want to do is remove certain elements from this section.
The main ones are checkboxes and textboxes - which cause excel to go really screwy, and for some reason you cannot delete them from excel - you just have to start a new sheet.
This is the method I am using to copy:
$('#CopyClipboard').click(function () {
var contentDiv = document.getElementById('copyablecontent');
var holdtext = document.getElementById('holdtext');
holdtext.innerText = contentDiv.innerHTML;
Copied = holdtext.createTextRange();
Copied.execCommand('Copy');
alert('Data copied to clipboard!');
});
(excuse the horrible mix of jquery and javascript).
So I have my 'contentDiv' variable, I want to parse that and remove all inputs, and possibly other elements too (I could give them all a css class 'doNotCopy' or something).
How can I do this?
you can use:
contentDiv.innerHTML.replace(/<input[^>]*>/g,"")
check the replace method here:
http://www.w3schools.com/jsref/jsref_replace.asp
you may have to adjust the regex for your needs

Categories