HTML DOM Area Object / Javascript - javascript

Tried to create this map area, but it doesn't work. Does someone know the solution? Thanks
html:
<html>
<body>
<table border="1">
<tr>
<td>logo</td>
<td>description</td>
</tr>
<tr>
<td colspan="2">
<map id ="first" name="Homepage"></map>
<script src="appendChild.js"></script>
</td>
</tr>
</table>
</body>
</html>
js:
var start= document.createElement("AREA");
start.setAttribute("href", "Homepage.html");
start.setAttribute("src" , "Homepage.jpg");
start.setAttribute("shape", "rect");
start.setAttribute("coords", "18,131,113,140");
document.getElementById("first").appendChild(start);

You have to create an element (usually an <img>) with the usemap attribute set to # + [the <map> element's name value]. In your case, you'd need to have an <img src="Homepage.jpg" usemap="#Homepage" />.
EDIT: You can add that <img> dynamically, too.
var start = document.createElement("AREA"),
image = document.createElement("IMG");
start.setAttribute("href", "Homepage.html");
start.setAttribute("shape", "rect");
start.setAttribute("coords", "18,131,113,140");
image.setAttribute("src", "//placekitten.com/221/221");
image.setAttribute("usemap", "#Homepage");
document.getElementById("first").appendChild(image);
document.getElementById("first").appendChild(start);
<table border="1">
<tr>
<td>logo</td>
<td>description</td>
</tr>
<tr>
<td colspan="2">
<map id="first" name="Homepage"></map>
<script src="appendChild.js"></script>
</td>
</tr>
</table>

Related

Formatting cells in a table, without repeating the same code hundreds of times?

I am working on a display page for a lot of data. some of the data is a short string, some of it is a long string(>200char) and some is numbers. My issue is this: When i create a a table and set its style, how do i make it so the style of the table sets a fixed size for the cells in that table, without manually setting it for each individual cell, becuase i have over 50 tables with 10 rows or more and each one has multiple cells.
I am asking this because the data I am entering seems to be resizing the cells to make it fit, and it crushes the adjacent cells, which cant happen.
Here is a sample of what i want:
<table style={table_style_sub}>
<tr>
<td><b>Client Name:</b></td>
<td>{client2}</td>
</tr>
<tr>
<td><b>Location:</b></td>
<td>{client2Location}</td>
</tr>
<tr>
<td><b>Phone:</b></td>
<td>{client2Phone}</td>
</tr>
<tr>
<td><b>Emails:</b></td>
<td>{client2Email}</td>
</tr>
<tr>
<td style={cell_format}><b>Details:</b></td>
<td>{client2Service}</td>
</tr>
</table>
this is my table for example. Here is the formatting:
var table_style_sub={
margin: 'auto',
width: '400px',
marginBottom: '15px',
border: '1px dotted black'
}
is there any way to add to this table_style_sub to make every <td> of the appropriate table have a width of 'Xpx' without manually doing typing <td style={{width:"Xpx}}> over 300 times.
Here is the whole code if you want to see it to get an idea of how many lines i actually have: http://pastebin.com/6rzRz2Vj
You could try something like this in javascript itself,
In your code there seems to be a div with an id="messagesDiv" enclosing the table so could use that id and fetch the tds and then set their style to width in the javascript as shown below,
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="angular.min.js"></script>
</head>
<body>
<form class="index-form" name="LoginForm">
<div class="card__supporting-text mdl-color-text--white-600" id="messagesDiv">
<h3>Contact Information</h3>
<table style={table_style}>
<tr>
<td><b>Legal Name: </b></td>
<td>{legalEntity}</td>
</tr>
<tr>
<td><b>Operating Name:</b> </td>
<td>{operatingName}</td>
</tr>
<tr>
<td><b>Role: </b></td>
<td>{string_role[role]}</td>
</tr>
<tr>
<td><b>Address 1: </b></td>
<td>{address1}</td>
</tr>
<tr>
<td><b>Address 2: </b></td>
<td>{address2}</td>
</tr>
<tr>
<td><b>City:</b> </td>
<td>{city}</td>
</tr>
<tr>
<td><b>Province:</b></td>
<td>{province}</td>
</tr>
<tr>
<td><b>Country: </b></td>
<td>{country}</td>
</tr>
<tr>
<td><b>Postal Code:</b></td>
<td>{postalCode}</td>
</tr>
<tr>
<td><b>Phone:</b></td>
<td>{phone}</td>
</tr>
<tr>
<td><b>Fax:</b></td>
<td>{fax}</td>
</tr>
<tr>
<td><b>Email:</b></td>
<td>{email}</td>
</tr>
<tr>
<td><b>Admin Contact:</b></td>
<td>{adminContact}</td>
</tr>
<tr>
<td><b>Techncal Contact:</b></td>
<td>{technicalContact}</td>
</tr>
</table>
</div>
</form>
<script>
var div=document.getElementById("messagesDiv");
var tds=div.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].style.width='200px';
}
</script>
</body>
</html>

How can I search in a HTML table without using any mysql queries, just a plain javascript or jquery to be specific?

About this problem, I saw a some solution here at Stack Overflow and the solution redirects me here: http://jsfiddle.net/9hGym/
On JS fiddle, the code works but when I implement it on my editor and run it, it's not working. By the way, as a library I used Google CDN, I don't know if it is proper way, so help me. Here's my code by the way..
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language = "javascript">
// Write on keyup event of keyword input element
$("#search").keyup(function(){
_this = this;
// Show only matching TR, hide rest of them
$.each($("#table tbody").find("tr"), function() {
console.log($(this).text());
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
});
</script>
</head>
<body>
<div class="row large-centered">
<h1>World of Warcraft characters. <small>Mine and my brothers, we share.</small></h1>
</div>
<div class="row large-centered">
<input type="text" id="search" placeholder="Type to search..." />
<table id="table" width="100%">
<thead>
<tr>
<th>Character name</th>
<th>Class</th>
<th>Realm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Benjamin.</td>
<td>Rogue.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Cachoito.</td>
<td>Hunter.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Contemplario.</td>
<td>Paladin.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Elthron.</td>
<td>Death Knight.</td>
<td>Agamaggan ES.</td>
</tr>
<tr>
<td>Giloh.</td>
<td>Priest.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Kitialamok.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Magustroll.</td>
<td>Mage.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Marselus.</td>
<td>Mage.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Mistrala.</td>
<td>Warrior.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Suavemente.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Tittus.</td>
<td>Monk.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Yarlokk.</td>
<td>Warlock.</td>
<td>Uldum ES.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You should place the javascript code within a $(document).ready, this will ensure the function is run after the DOM is ready.
<script language = "javascript">
$( document ).ready(function(){
// Write on keyup event of keyword input element
$("#search").keyup(function(){
_this = this;
// Show only matching TR, hide rest of them
$.each($("#table tbody").find("tr"), function() {
console.log($(this).text());
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
});
});
</script>
You can try to use getElementsByTagName, and catch all "TD" elements, like this:
<html>
<body>
<script>
function _Change()
{
var TD = document.getElementsByTagName('td');
i=0;
do {
if ( TD[i].innerHTML.trim().localeCompare("three") == 0 ) TD[i].innerHTML = "3";
i++;
} while(i<TD.length)
}
</script>
<table border=1>
<tr><td> one </td> <td> two </td></tr>
<tr><td> three </td> <td> four </td></tr>
<tr><td> five </td> <td> six </td></tr>
</table>
<button onclick="_Change()"> change </button>
</body>
</html>

Html, Javascript & JQuery

General info: I am trying to make a table using the JQuery mobile. Up to this point my table looks good however, I have some minor issues.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<style>
th
{
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even)
{
background:#e9e9e9;
}
</style>
</head>
<body>
<h1>My Name</h1>
<div data-role="page" id="pageone">
<div data-role="header">
<h1> Cs496 Hw2</h1>
<h2> By: My Name here</h2>
</div>
<div data-role="main" class="ui-content">
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
<thead>
<tr>
<th data-priority="1">No.</th>
<th>School Name</th>
<th data-priority="2">LOGO</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td id="schoolName_0">schools[0].name</td>
<td id="schoolImage_0">schools[0].image</td>
</tr>
<tr>
<td>2</td>
<td id="schoolName_1">schools[1].name</td>
<td id="schoolImage_1">schools[1].image</td>
</tr>
<tr>
<td>3</td>
<td id="schoolName_2">schools[2].name</td>
<td id="schoolImage_2">schools[2].image</td>
</tr>
<tr>
<td>4</td>
<td id="schoolName_3">schools[3].name</td>
<td id="schoolImage_3">schools[3].image</td>
</tr>
<tr>
<td>5</td>
<td id="schoolName_4">schools[4].name</td>
<td id="schoolImage_4">schools[4].image</td>
</tr>
<tr>
<td>6</td>
<td id="schoolName_5">schools[5].name</td>
<td id="schoolImage_5">schools[5].image</td>
</tr>
<tr>
<td>7</td>
<td id="schoolName_6">schools[6].name</td>
<td id="schoolImage_6">schools[6].image</td>
</tr>
</tbody>
</table>
<script type='text/javascript'>
function school(name,image){
this.name = name;
this.image = image;
}
var schools = [
new school('Oregon State University', "http://www.sports-logos-screensavers.com/user/OregonStateBeavers.jpg"),
new school('University of Oregon', "http://www.sports-logos-screensavers.com/user/Oregon_Ducks06.jpg"),
new school('Stanford University', "http://www.sports-logos-screensavers.com/user/Stanford_Cardinal.jpg")
new school('University of Southern California', "http://www.sports-logos-screensavers.com/user/USC_Trojans2.jpg"),
new school('University of Washington', "http://www.sports-logos-screensavers.com/user/Washington_Huskies2.jpg"),
new school('San Diego State University', "http://www.sports-logos-screensavers.com/user/SanDiegoStateAztecs3.jpg"),
new school('Florida State University', "http://www.sports-logos-screensavers.com/user/FloridaStateSeminoles.jpg")
];
</script>
</div>
</body>
</html>
Q: What I want to do is use Jquery to insert the contents of the schools array into the correct columns and rows. I wanted to do this by making an array of objects and then insert the associated element in the correct location in the table (where logos are links to images).
I have tried using both Jquery's append and appendto commands in the script portion of my html but that did not work. Also I tried using the document.getElementbyId(...) but that did'nt work either. I believe the script portion of my html is never being called.
Any Ideas are welcome.
The reference to schools[x].name and schools[x].image is not how javascript, or jQuery for that matter, will execute those. Infact this is probably rendering as straight text in your html <td> tags rather than the array element value you are hoping for.
Here is what I would do.
First, add an appropriate class to each of the <td> elements, and a rel attr to hold the counter like so:
<tr>
<td>1</td>
<td class='name' rel='0'></td>
<td class='image' rel='0'></td>
</tr>
Then, iterate over each of the <td> elements in the table, using the rel tag as the array index to retrieve the values from; finally, apply the values to the <td> tags with the .html('...') function, like so:
$.each( $("table#myTable tr td"), function(i,e){
var $this = $(this), //set $(this) object to a variable rather than referencing it multiple times
rel = parseInt( $this.attr('rel') );
//only look for td elements that have a class
if( $this.hasClass('name') )
$this.html( schools[ rel ].name );
if( $this.hasClass('image') )
$this.html( '<img src="' + schools[ rel ].image + '"/>' );
});
I haven't tested this, but I think the logic is sound...

fetch HTML Element object using javascript, mootools

Please check my HTML below:
<table cellpadding="0" cellpadding="0" border="0">
<tr>
<td>
<div class="toogler">Demo1</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo1 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo1</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo1 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo2</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo2 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo3</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo3 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo4</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo4 Content</div>
</td>
</tr>
</table>
Here is my JS Code:
<script type="text/javascript" language="javascript">
$$('.toogler').each(function(e){
alert(e);
// this will alert all the toogler div object
});
</script>
my problem is that how can i fetch the object of the next div with class element
if i have object of the first toogler then how can i get the object of the next first div which class 'element'
I don't want to give the ids to the elements
if you can't alter the html output and refactor as suggested by oskar (best case), this works:
e.getParent().getParent().getNext().getFirst().getFirst() - it will return you the next div but it's slow.
unfortunately, tables break .getNext("div.element") as it's not a sibling.
another way that works is this (if their lengths match) - it will be MUCH faster if the reference is put in element storage as a 1-off:
var tooglers = $$("div.toogler"), elements = $$("div.element");
tooglers.each(function(el, i) {
console.log(elements[i]);
el.store("contentEl", elements[i]);
});
i don't like either solution though, not maintainable / scalable enough.
You shall have to iterate through and check for the class one by one.
The easiest way of assigning a toggler to the toggled element:
$$('.toogler').each(function(e, index){
console.log($$('.element')[index]);
});
Here's a working example: http://jsfiddle.net/oskar/aTaBB
Also, get rid of the table.
Try using Element.getNext([match]).
<script type="text/javascript" language="javascript">
$$('.toogler').each(function(e){
alert(e);
// Get the next sibling with class element.
var nextElement = e.getNext('.element');
alert(nextElement);
});
</script>

How to append tr to top of table

how can i append a new tr to the top of the table instead of under other tr.
Example:
<table width='100%'>
<tr><td>something</td><td>else here</td></tr>
<tr><td>something2</td><td>else here2</td></tr>
</table>
After a click event in jQuery, how can i place
<tr><td>something3</td><td>else here3</td></tr>
at the top of the table so it now looks like
<table width='100%'>
<tr><td>something3</td><td>else here3</td></tr>
<tr><td>something</td><td>else here</td></tr>
<tr><td>something2</td><td>else here2</td></tr>
</table>
Any help on this would be greatly appreciated.
$('table').prepend('<tr><td>something3</td><td>else here3</td></tr>');
or...
$('<tr><td>something3</td><td>else here3</td></tr>').prependTo('table');
More info on 'prepend': http://docs.jquery.com/Manipulation/prepend
More info on 'prependTo': http://docs.jquery.com/Manipulation/prependTo
This JS is IE specific at the moment, but it shouldn't be too hard to make it multi-browser compatible.
<html>
<body>
<script language="JavaScript">
function function1() {
var myRow = document.all.myTable.insertRow(0);
var myCell = myRow.insertCell();
myCell.innerText = "The added cell";
}
</script>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
<tr>
<td width="100">3</td>
<td width="100">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<button onclick="function1();">Add a cell</button>
</body>
</html>

Categories