Delete the entire table rendered from different pages using Javascript - javascript

I am having a table like:
<table id="toc" class="toc" border="1" summary="Contents">
</table>
in many pages .. All these pages are rendered in a single page.
when I apply the Javascript to delete that using on load. Only one table is deleted and not the others.
I am trying to delete the tables in all the rendering pages using Javascript. How to do this?
Edit :
I myself found the solution
<script type='text/javascript'>
window.onLoad = load();
function load(){var tbl = document.getElementById('toc');
if(tbl) tbl.parentNode.removeChild(tbl);}
</script>

Here's a rough sample
<html>
<head>
<script type="text/javascript">
function removeTable(id)
{
var tbl = document.getElementById(id);
if(tbl) tbl.parentNode.removeChild(tbl);
}
</script>
</head>
<body>
<table id="toc" class="toc" border="1" summary="Contents">
<tr><td>This table is going</td></tr>
</table>
<input type="button" onclick="removeTable('toc');" value="Remove!" />
</body>
</html>

Really want to delete the table altogether?
var elem = documenet.getElementById('toc');
if (typeof elem != 'undefined')
{
elem.parentNode.removeChild(elem);
}
You could also hide the table rather than deleting it.
var elem = documenet.getElementById('toc');
elem.style.display = 'none';
If you need it later, you could simply do:
var elem = documenet.getElementById('toc');
elem.style.display = 'block';

<script type="text/javascript">
function deleteTable(){
document.getElementById('div_table').innerHTML="TABLE DELETED"
}
</script>
<div id="div_table">
<table id="toc" class="toc" border="1" summary="Contents">
</table>
</div>
<input type="button" onClick="deleteTable()">

var tbl = document.getElementById(id);
tbl.remove();

Related

Search text in html by javascript

I have some html like this:
<html>
<body>
<div>
<p>Something</p>
</div>
<div class="hide" id="show">Protected</div>
</body>
</html>
I need to display or hide/show an element via JavaScipt if html has "Something" in its text. How can I do that? I need this for my Wordpress page.
Without using jQuery:
var content = document.body.textContent || document.body.innerText;
var hasText = content.indexOf("Something")!==-1;
if (hasText) {
document.getElementById("show").style.display = 'block';
} else {
document.getElementById("show").style.display = 'none';
}

How to add JavaScript to button where it will generate another button linking to another page?

i am trying to use JavaScript where i can click on a button and it will generate a button above it so for example i have the first button called add additional:
<a href"#"><button type="button">Add Additional</button></a>
When this button is clicked and it will generate another button where i want it to be displayed the below:
<td>
Name
</td>
<td>
<button type="button">Choose another thing</button>
</td>
and is it possible to repeat this process like generating more of the 2nd button "Choose Another thing"
i hope this ins't too confusing
I think you are looking for something like this!! Just add a script so that whenever you click on the button it will execute it and create more buttons.
<!DOCTYPE html>
<html>
<body>
<p>Click the "Add Additional" button to create a BUTTON element with a "Choose Another Thing" text.</p>
<button onclick="myFunction()" type="button">Add Additional</button>
<script>
function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Choose another thing");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>
I think this is the elegant way.
function appendButton(textContent, selector) {
var button = document.createElement('button');
button.classList.add('any');
button.innerHTML = textContent;
var selectedElement = document.querySelector(selector);
return selectedElement.appendChild(button);
}
// Call this function from wherever u like
// appendButton('click here', '.container');
<div class="container">
<button onclick="appendButton('click here', '.container')">
Click me
</button>
</div>
Run this you will get your solution
<html>
<head>
<script type="text/javascript">
function myFunction()
{
var a=document.createElement("a");
a.setAttribute("href","secondpage.html");
var btn=document.createElement("BUTTON");
var text=document.createTextNode("Choose another thing");
btn.appendChild(text);
a.appendChild(btn);
document.body.appendChild(a);
}
</script>
</head>
<body>
<a href"#"><button type="button" onclick="myFunction()">Add
Additional</button></a>
</body>
</html>
Give an id/class for a division append to it.
<div id='my_id' >
<td>Name</td>
<td><button>click</button></td>
</div>
When you click on addMore button write a function to append it to my_id
function onclickforaddbutton(){
id = document.getElementById('my_id');
var data = prompt("Enter something"); //where you can get data from user
id.innerHTML+="<td>"+data+"</td><td><button>Something</button></td>";
}
You need to first decide (container) where to add a new row. Then on click of add button, you can create a row with two columns, for the name and the new button, and append that row as a child of the container.
Here's how you can do it.
var count = 1;
var name = 'Generated Name';
function addNewRow() {
var container = document.getElementById('container');
var newRow = document.createElement('tr');
newRow.innerHTML = "<td>" + name + (count++) + "</td><td><button>Choose another thing</button></td>"
container.appendChild(newRow);
}
<html>
<head></head>
<body>
<div style="padding: 2rem;">
<table id="container">
</table>
</div>
<button onclick="addNewRow();">Add Additional</button>
</body>
</html>

Add/remove a class in html using a js function

I want to add a class to body in HTML using Javascript using a button that executes a function, then remove it using another button. But I want to save that class, until the other button is pressed, using LocalStorage.
I can do that without LocalStorage
$$('body').addClass('Class here');
But how with LocalStorage?
By using Storage.setItem to save, then Storage.getItem to retrieve, like this:
var className = "theclass";
// Put the class name into storage
localStorage.setItem('className', className);
// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');
$('body').addClass(retrievedClassName);
Here a working code with jquery:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body class="">
<div class="form-group">
<button class="button">your button</button>
</div>
<script>
var className = "theclass";
jQuery('.button').on( 'click', function(){
localStorage.setItem('className', className);
jQuery('body').addClass(className);
});
// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');
jQuery('body').addClass(retrievedClassName);
</script>
</body>
</html>
And here without:
<html>
<head></head>
<body id="mybigbody" class="">
<div class="form-group">
<button id="button">your button</button>
</div>
<script>
var className = "theclass";
var body = document.getElementById("mybigbody");
document.getElementById('button').onclick = function(e) {
localStorage.setItem('className', className);
body.setAttribute("class", className);
e.stopPropagation();
}
// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');
if(retrievedClassName)
body.setAttribute("class", retrievedClassName);
</script>
</body>
</html>

Print only certain part of the <div> content

I have the following JavaScript code to print a content
<script type="text/javascript">
function Print(print)
{
Popup($(print).html());
}
function Popup(data)
{
var mywindow = window.open("", "print");
mywindow.document.write("<html><head><title>Report</title>");
mywindow.document.write("</head><body>");
mywindow.document.write("<div align='center'>");
mywindow.document.write(data);
mywindow.document.write("</div>");
mywindow.document.write("</body></html>");
mywindow.print();
mywindow.close();
return true; }
</script>
And in my HTML I have the following code:
<html>
<body>
<p>Print</p>
<div id="print">
<h1>Report</h1>
<table>
<tr><th>Date</th><th>Remarks</th><th>Amount</th><th>Actions</th></tr>
<tr>
<td>10/11/2014</td>
<td>Hello</td>
<td>$14</td>
<td>Edit</td>
</tr>
</table>
</div>
</body>
</html>
I want to print only the first 3 columns. I do not want to print the 4th Column "Actions". When I try to print out the content by using the above code it prints all the 4 columns. Please help me with the following.
You can simply put the style to display none with id for that td's
Inside HTML:
....
<th id="act">Actions</th>
....
<td id="act">Edit</td>
Inside JS:
mywindow.document.write("<html><head><style>#act{display:none;}</style><title>Report</title>");
You can do that with jquery.
$(document).ready(function(){
$('.tabel').find(':nth-child(4)').hide();
});
JSFIDDLE HERE

Print html through JavaScript / jQuery

I wish to print a document by passing custom html code.
The non-working code I have written :
function Clickheretoprint()
{
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=780, height=780, left=100, top=25";
var content_vlue = document.getElementById("result_tbl").innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title>Ashley Mattresses</title>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write('<TABLE width="100%" cellpadding=10 align=center valign="top"><TR valign="top"><TD width = "33%" valign="top">col1</TD><TD width = "33%" valign="top">col2</TD><TD width = "33%" valign="top">col3</TD></TR></TABLE>');
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
docprint.close();
}
This is the method I called on href of an anchor tag, but the not getting the work done:
<a href="javascript:Clickheretoprint()">
I am a beginner to JavaScript/jQuery coding.
You are on the right track. Assuming result_tbl is the ID of element you like to print as-is, first wrap the element with a <div> tag e.g.:
<div>
<table id="result_tbl">
.....
</table>
</div>
Then have such code:
var docprint=window.open("about:blank", "_blank", disp_setting);
var oTable = document.getElementById("result_tbl");
docprint.document.open();
docprint.document.write('<html><head><title>Ashley Mattresses</title>');
docprint.document.write('</head><body><center>');
docprint.document.write(oTable.parentNode.innerHTML);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.print();
docprint.close();
Live test case.
Working fine for me under Chrome 18:
Checkout: http://jsfiddle.net/5Wfqr/3/
For me only source of trouble is:
var content_vlue = document.getElementById("result_tbl").innerHTML;
Do you have element with ID : "result_tbl" within your HTML?
This code works fine for me
<body>
<script type="text/javascript">
function printPage() {
var docprint = window.open("about:blank", "_blank"`enter code here`, "channelmode");
var oTable = document.getElementById("tbl");
docprint.document.open();
docprint.document.write('<html><head><title>your title</title>');
docprint.document.write('</head><body><center>');
docprint.document.write(oTable.innerHTML);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.print();
docprint.close();
}
</script>
<table id="tbl">
<tr>
<td> content1 </td>
<td> content2 </td>
</tr>
</table>
<input type="button" value ="print" id="printButton" onclick="javascript:printPage()"/>
</body>

Categories

Resources