Inside JavaScript

2017-07-07 02:10:07

As you can see in Tables 14.7 to 14.19, there's a lot of JavaScript support for working with tables. Let's take a look at some examples showing what JavaScript is good for here.

Here's an example where the user is buying an item and can specify the number of the item she wants to buy using a <SELECT> control in a table cell, and the code in the page will automatically update the total price in another table cell . You can see this code at work in Figure 14.7. When you select a number in the <SELECT> control control>, the code multiplies that number by the price per item and displays the result in the table cell on the right.

Figure 14.7. Updating table cell content on-the-fly .

This example is pretty easy to put together. You just use the <SELECT> control's ONCHANGE attribute to call a JavaScript function (named calculate here), and that gets the number selected in the <SELECT> control, performs the multiplication, and rewrites the content of the result table cell using the innerHTML property (to manipulate table cells such as this, you'll need NS6+ if using Netscape Navigator):

(Listing 14-11.html on the web site)

<HTML> <HEAD> <TITLE>Setting Cell Contents</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <H1>Setting Cell Contents</H1> <FORM> <TABLE BORDER=1> <TR> <TH>Number</TH> <TH>Price</TH> <TH>Cost</TH> </TR> <TR> <TD> <SELECT ONCHANGE="calculate(this)"> <OPTION VALUE="0">0 <OPTION VALUE="1">1 <OPTION VALUE="2">2 <OPTION VALUE="3">3 <OPTION VALUE="4">4 <OPTION VALUE="5">5 </SELECT> </TD> <TD> </TD> <TD ID="td1">   </TD> </TR> </TABLE> </FORM> </BODY> </HTML>

Tip

Note that I put a nonbreaking HTML space character (   ) into the results table cell in the preceding code; that's so this cell is not totally empty and so has a border like other cells when the table first appears.

Here's another example. This one shows how to build and alter tables on-the-fly using code that both the Netscape Navigator and Internet Explorer can execute. In this example, you can click buttons to add new rows, delete rows, add new columns, delete columns , add a caption, and so on, all using table methods .

When working with a table like this, the useful table properties and methods are the rows and cells collections, which give you access to the rows and cells in the table, and the insertRow , insertCell , deleteRow , and deleteCell methods, which enable you to alter tables on-the-fly. For this example, I'll create an empty table named table1 :

When the page first loads, I'll insert a row of three cells into this table using the insertRow method and then insert three cells using the insertCell method into that row like this in a function named init (here, I'm filling the new cells with alternating x's and o's):

function init() { var table1 = document.getElementById("table1") var row1 = table1.insertRow(0) var cell1 for (var loopIndex = 0; loopIndex < 3; loopIndex++) { cell1 = row1.insertCell(loopIndex) cell1.style.backgroundColor = "cyan" cell1.innerHTML = loopIndex % 2 ? "o" : "x" } numberCols = 3 }

This example uses similar code to insert new rows into the table when the user clicks a button. To delete a row, we can just use the deleteRow method:

function deleteRow() { document.getElementById("table1").deleteRow(0) }

There is no insertColumn method, so to insert a new column, we can loop over all the rows using the rows collection, and insert a new cell in each row with the insertCell method (we also increment the number of columns, which we're storing in the global variable numberCols the Internet Explorer <TABLE> element has a cols property that holds the number of columns, but the Netscape Navigator does not support this property, so we've got to keep track of the number of columns ourselves ):

function insertColumn() { var row1, cell1 var table1 = document.getElementById("table1") for (var loopIndex = 0; loopIndex < table1.rows.length; loopIndex++) { row1 = table1.rows[loopIndex] cell1 = row1.insertCell(0) cell1.style.backgroundColor = "cyan" cell1.innerHTML = loopIndex % 2 ? "o" : "x" } numberCols++ }

As you can see, tables are completely open to you in JavaScript. Here's the whole code for this example (note that to use methods such as insertRow and insertCell , you'll need NS6+ if using Netscape Navigator):

(Listing 14-12.html on the web site)

<HTML> <HEAD> <TITLE> Inserting and Altering Rows and Columns </TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY ONLOAD="init()"> <H1>Inserting and Altering Rows and Columns</H1> <FORM> <INPUT TYPE="BUTTON" ONCLICK="createRow()" VALUE="Create a row"> <INPUT TYPE="BUTTON" ONCLICK="insertRow()" VALUE="Insert new row 1"> <INPUT TYPE="BUTTON" ONCLICK="deleteRow()" VALUE="Delete a row"> <BR> <INPUT TYPE="BUTTON" ONCLICK="createCaption()" VALUE="Create a caption"> <INPUT TYPE="BUTTON" ONCLICK="deleteCaption()" VALUE="Remove the caption"> <BR> <INPUT TYPE="BUTTON" ONCLICK="insertColumn()" VALUE="Insert a column"> <INPUT TYPE="BUTTON" ONCLICK="deleteColumn()" VALUE="Remove a column"> </FORM> <TABLE COLS="3" ID="table1"BORDER="1"> </TABLE> </BODY> </HTML>

You can see this code at work in Figure 14.8, where I've clicked a button to add a new row to the table, and in Figure 14.9, where I've clicked a button to add a new column to the table. You can delete rows and columns as well, just by clicking buttons. For that matter, you also can add and remove a new table caption using the buttons in this example.

Figure 14.8. Adding a new table row.

Figure 14.9. Adding a new table column.

And that's it for our work with hyperlinks , lists, and tables in this chapter. As we've seen, there's a lot of power here when you're using JavaScript. In the next chapter, we'll start working with the mouse, keyboard, imagesand in-depth event handling.

Figure 14.7. Updating table cell content on-the-fly .

(Listing 14-11.html on the web site)

(Listing 14-12.html on the web site)

Figure 14.8. Adding a new table row.

Figure 14.9. Adding a new table column.

Категории