On Jul 3, 6:39*pm, r_ahims...@poczta.onet.pl wrote:
Quote:
Hello,
I am learning JavaScript. I have a table on HTML page:
>
* * * * * * * * <table id="announcement_fields" border="0">
* * * * * * * * <tbody>
* * * * * * * * <tr>
* * * * * * * * <td><span class="obligatory">Offer type</span>:</td>
* * * * * * * * <td>
* * * * * * * * * * * * <select name="offer_type"
onchange="ShowAnnouncementRows();">
By convention, function names starting with a capital letter are
reserved for constructors.
Quote:
* * * * * * * * * * * * * * * * <option value="" selected>(select)</option>
* * * * * * * * * * * * * * * * <option value="B">buy</option>
* * * * * * * * * * * * * * * * <option value="H">hire</option>
* * * * * * * * * * * * * * * * <option value="S">sell</option>
* * * * * * * * * * * * * * * * <option value="E">exchange</option>
* * * * * * * * * * * * </select>
* * * * * * * * </td>
* * * * * * * * </tr>
* * * * * * * * ...
* * * * * * * * <tr>
* * * * * * * * <td><label for="caution">Caution:</label></td>
* * * * * * * * <td><input type="checkbox" name="caution"></td>
The for attribute should contain the id of the related element, not
the name.
<URL:
http://www.w3.org/TR/html4/interact/forms.html#adef-for >
Quote:
* * * * * * * * </tr>
* * * * * * * * ...
* * * * * * * * </tbody>
* * * * * * * * </table>
>
I want table rows (with input controls) to be visible depending on the
selection of offer_type. For example, I want input caution to be visible
for offer_type = "H" or "(select)".
As you see I am calling function ShowAnnouncementRows() at every change of
offer_type. Here is the code:
>
function ShowAnnouncementRows()
{
* var visibility = new Array( * * // can be more complicated
* * * * new Array(1, 1, 1, 1, 1, 1, 1, 1),
* * * * new Array(1, 1, 1, 1, 1, 0, 1, 1),
* * * * new Array(1, 1, 1, 1, 1, 1, 1, 1),
* * * * new Array(1, 1, 1, 1, 1, 0, 1, 1),
* * * * new Array(1, 1, 1, 1, 1, 0, 1, 1)
* );
That might be easier to code as an array literal:
var visibility = [
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 0, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 0, 1, 1],
[1, 1, 1, 1, 1, 0, 1, 1]
];
Quote:
* var table = document.getElementById("announcement_fields");
* var tbody = table.tBodies[0];
* if (announcementRows == null)
* {
* * announcementRows = new Array();
* * for (var r = 0; r < tbody.rows.length; r++) // remember table
* * * announcementRows.push(tbody.rows[r].innerHTML);
Don't expect to be able to use innerHTML to create individual
tableSection, row or cell elements - IE has problems with that. You
can use innerHTML to create an entire table or the content of a cell.
Quote:
* }* *
* for (var r = 1, len = tbody.rows.length; r < len; r++) // leave only first
row
* {
* * tbody.removeChild(tbody.lastChild);
* * var selIdx =
document.forms["announcement"].elements["offer_type"].selectedIndex;
* * if (selIdx -1)
* * * for (var r = 1; r < announcementRows.length; r++)
* * * * if (visibility[selIdx][r] == 1) // show visible rows
* * * * {
* * * * * var theRow = table.createElement("tr"); // HERE PROBLEM!!!
The HTMLTableElement interface doesn't have a createElement method.
<UEL:
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-64060425 >
However, it does have an insertRow method, so:
var theRow = table.insertRow(-1);
will add a new row as the last row of the table and a reference to
theRow (and you don't need to mess with the tbody).
Quote:
* * * * * theRow.innerHTML = announcementRows[r];
Won't work in IE at least, it won't let you assign to the innerHTML
property of table sections or rows.
To make this strategy work, store a reference to the rows in your
array then put back the one you want, so:
announcementRows.push(tbody.rows[r]);
then later
tbody.appendChild(announcementRows[r]);
But in any case, just set the style.display property of rows you want
hidden to "none" and those you want visible to "" (empty string).
Quote:
* * * * * tbody.appendChild(theRow);
* * * * }
}
>
I have problems with debugging JavaScript
Use Firefox with Firebug, learn IE's idiosyncrasies, check frequently
as you code.
Quote:
but using alerts I found that the
code executes to the line:
* * * * var theRow = table.createElement("tr");
and it doesn't continue. I don't know why and how to solve the problem. I
also tried document.createElement
You could use it instead of insertRow (in the browsers I've tested
it's quite a bit faster if that matters):
var newRow = document.createElement('tr');
tbody.appendChild(newRow);
but that is unnecessary given the above.
--
Rob
