Thứ Tư, 17 tháng 3, 2010

JavaScript HTML DOM Examples

1. Add rows to a table

<html>

<head>

<script type="text/javascript">

function insRow()

{

var x=document.getElementById('myTable').insertRow(0);

var y=x.insertCell(0);

var z=x.insertCell(1);

y.innerHTML="NEW CELL1";

z.innerHTML="NEW CELL2";

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

<tr>

<td>Row3 cell1</td>

<td>Row3 cell2</td>

</tr>

</table>

<br />

<input type="button" onclick="insRow()" value="Insert row">

</body>

</html>

2. Add cells to a table row

<html>

<head>

<script type="text/javascript">

function insCell()

{

var x=document.getElementById('tr2').insertCell(0);

x.innerHTML="John";

}

</script>

</head>

<body>

<table border="1">

<tr id="tr1">

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr id="tr2">

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="insCell()" value="Insert cell">

</body>

</html>

3. Xóa…

<html>

<head>

<script type="text/javascript">

function deleteRow(r)

{

var i=r.parentNode.parentNode.rowIndex;

document.getElementById('myTable').deleteRow(i);

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

  <td>Row 1</td>

  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>

</tr>

<tr>

  <td>Row 2</td>

  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>

</tr>

<tr>

  <td>Row 3</td>

  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>

</tr>

</table>

</body>

</html>

---------------------------------------------------------

Document Object

Write text to the output with document.write()
Write formatted text to the output with document.write()
Return the number of anchors in a document
Return the innerHTML of the first anchor in a document
Return the number of forms in a document
Return the name of the first form in a document
Return the number of images in a document
Return the id of the first image in a document
Return the number of links in a document
Return the id of the first link in a document
Return all name/value pairs of cookies in a document
Return the domain name of the server that loaded the document
Return the date and time the document was last modified
Return the URL of the document that loaded the current document
Return the title of a document
Return the full URL of a document
Open an output stream, and add some text
Open an output stream in a new window, and add some text
Difference between write() and writeln()
Alert innerHTML of an element with a specific ID
Alert the number of elements with a specific name
Alert the number of elements with a specific tagname

More Document object examples in our JavaScript reference.

Anchor Object

Return and set the value of the charset attribute of a link
Return the value of the href attribute of a link
Return and set the value of the hreflang attribute of a link
Return the name of an anchor
Return the relationship between the current document and the linked document
Change the target attribute of a link
Return the value of the type attribute of a link

More Anchor object examples in our JavaScript reference.

Area Object

Return the alternate text for an area in an image-map
Return the coordinates of an area in an image-map
Return the anchor part of the href attribute of an area
Return the hostname:port for an area in an image-map
Return the hostname for an area in an image-map
Return the port for an area in an image-map
Return the href of an area in an image-map
Return the pathname for an area in an image-map
Return the protocol for an area in an image-map
Return the querystring part of the href attribute of an area
Return the shape of an area in an image-map
Return the value of the target attribute for an area in an image-map

More Area object examples in our JavaScript reference.

Base Object

Return the base URL for all relative URLs on a page
Return the base target for all links on a page

More Base object examples in our JavaScript reference.

Button Object

Set a button to disabled when clicked
Return the name of a button
Return the type of a button
Return the text displayed on a button
Return the id of the form a button belongs to

More Button object examples in our JavaScript reference.

Form Object

Return the value of each element in a form
Return the value of the accept-charset attribute in a form
Return the value of the action attribute in a form
Return the value of the enctype attribute in a form
Return the number of elements in a form
Return the method for sending form data
Return the name of a form
Return the value of the target attribute in a form
Reset a form
Submit a form

More Form object examples in our JavaScript reference.

Frame/IFrame Objects

Align an iframe
Change the background color of the document contained in an iframe
Return the value of the frameborder attribute in an iframe
Remove frameborder of an iframe
Change the height and width of an iframe
Return the value of the longdesc attribute in an iframe
Return the value of the marginheight attribute in an iframe
Return the value of the marginwidth attribute in an iframe
Return the value of the name attribute in an iframe
Return and set the value of the scrolling attribute in an iframe
Change the src attribute of an iframe

More Frame/IFrame object examples in our JavaScript reference.

Event Object

Which mouse button was clicked?
What is the keycode of the key pressed?
What are the coordinates of the cursor?
What are the coordinates of the cursor, relative to the screen?
Was the shift key pressed?
Which element was clicked?
Which event type occurred?

Image Object

Change the height and width of an image
Change the src of an image

Option and Select Objects

Disable and enable a dropdown list
Get the id of the form that contains the dropdown list
Get the number of options in the dropdown list
Turn the dropdown list into a multiline list
Select multiple options in a dropdown list
Alert the selected option in a dropdown list
Alert the index of the selected option in a dropdown list
Change the text of the selected option
Remove options from a dropdown list

Table, TableHeader, TableRow, TableData Objects

Change the width of a table border
Change the cellPadding and cellSpacing of a table
Specify frames of a table
Specify rules for a table
InnerHTML of a row
InnerHTML of a cell
Create a caption for a table
Delete rows in a table
Add rows to a table
Add cells to a table row
Align the cell content in a table row
Vertical align the cell content in a table row
Align the cell content in a single cell
Vertical align the cell content in a single cell
Change the content of a table cell
Change the colspan of a table row

Không có nhận xét nào: