У меня проблемы как с getElementById, так и с getElementsByClass.
Я пытаюсь скрыть все столбцы таблицы, которые> 6 месяцев в прошлом и> 3 месяца в будущем.Я подумал выбрать элементы заголовка таблицы, которые содержат даты, используя их класс:
var elements = document.getElementsByClass('date_header');
Это выводит список узлов (правильные узлы отображаются в console.log ()),но он не выглядит итеративным, то есть elements [0] не определен, а elements.length равен 0.
В качестве обходного пути я решил выбрать строку заголовка по id и выполнить итерацию по дочерним узлам:
var element = document.getElementById('rent_log_table_header');
Однако содержимое элемента равно нулю.
Потяну за волосы!Понятия не имею, в чем проблема.HTML-код действителен в соответствии с W3c Validator.Протестировано в Safari 5.1.3, Firefox 10.0.2 и Chrome 17.0.963.78, оба документа document.getElementsByClass и document.getElementById завершаются ошибкой.
<!DOCTYPE html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org">
<link rel='icon'
type='image/png'
href='PropertyManagement/Media/Images/favicon.png'>
<meta http-equiv='content-type'
content='text/html; charset=us-ascii'>
<script type='text/javascript'
src='PropertyManagement/Script/Common.js'>
</script>
<script type='text/javascript'
src='PropertyManagement/Script/Rent_Log.js'>
</script>
<link type='text/css'
rel='stylesheet'
href='PropertyManagement/Style/Common.css'>
<link type='text/css'
rel='stylesheet'
href='PropertyManagement/Style/Rent_Log.css'>
<title>
Rent Log
</title>
</head>
<body id='body'
onload='__init();'>
<div id='wrapper'>
<div id='content'>
<ul id='nav_property_specific'
class='nav'>
<li class='portfolio'>
<a href='?page=Portfolio'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Back to Portfolio</span></span></span></span></a>
</li>
<li class='property__information'>
<a href='?page=Property__Information&pid=12345678'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>34
Greenhill</span></span></span></span></a>
</li>
<li class='tenants'>
<a href='?page=Tenants&pid=12345678'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Tenants</span></span></span></span></a>
</li>
<li class='rent__log'>
<a id='selected'
href='?page=Rent__Log&pid=12345678'
name="selected"><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Rent Log</span></span></span></span></a>
</li>
<li class='services'>
<a href='?page=Services&pid=12345678'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Services</span></span></span></span></a>
</li>
<li class='documents'>
<a href='?page=Documents&pid=12345678'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Documents</span></span></span></span></a>
</li>
<li class='logout'>
<a href='?page=Logout'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Logout</span></span></span></span></a>
</li>
</ul>
<div id='main'>
<form name='rent__log_form'
action='&page=Rent__Log&pid=12345678'
method='post'
id="rent__log_form">
<table id='rent_log_table'>
<tr id='rent_log_table_header'
class='calendar_header'>
<td class='name_field'>
Name
</td>
<td>
Fees
</td>
<td>
Deposit
</td>
<td class='date_header'
data-numeric-date='01 2012'
data-col-num='0'>
Jan 2012
</td>
<td class='date_header'
data-numeric-date='02 2012'
data-col-num='1'>
Feb 2012
</td>
<td class='date_header'
data-numeric-date='03 2012'
data-col-num='2'>
Mar 2012
</td>
<td class='date_header'
data-numeric-date='04 2012'
data-col-num='3'>
Apr 2012
</td>
<td class='date_header'
data-numeric-date='05 2012'
data-col-num='4'>
May 2012
</td>
<td class='date_header'
data-numeric-date='06 2012'
data-col-num='5'>
Jun 2012
</td>
<td class='date_header'
data-numeric-date='07 2012'
data-col-num='6'>
Jul 2012
</td>
<td class='date_header'
data-numeric-date='08 2012'
data-col-num='7'>
Aug 2012
</td>
<td class='date_header'
data-numeric-date='09 2012'
data-col-num='8'>
Sep 2012
</td>
<td class='date_header'
data-numeric-date='10 2012'
data-col-num='9'>
Oct 2012
</td>
<td class='date_header'
data-numeric-date='11 2012'
data-col-num='10'>
Nov 2012
</td>
<td class='date_header'
data-numeric-date='12 2012'
data-col-num='11'>
Dec 2012
</td>
</tr>
<tr>
<td class='name_field'>
John Smith
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
</tr>
<tr>
<td class='name_field'>
John Smuth
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
</tr>
<tr>
<td class='name_field'>
John Smythe
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
</tr>
</table>
<div class='button_container'>
<a href='#'
id='edit_payment_log'
class='button'
onclick='document.pressed="edit_payment_log"; Link.hyper("Rent__Log","&pid=12345678");'
name="edit_payment_log">Edit Payment Log</a>
</div>
<div id='account_info_q'
class='question'>
<div id='account_info'
class='text_field_set_question'>
<label class='question_label'>Account Information</label>
<div>
<div id='account_info_bank_name_account_info'
class='text_field_region'>
<label>Bank Name</label><label id='bank_name_account_info'
class='text_field_locked'>-</label>
</div>
<div id='account_info_sort_code_account_info'
class='text_field_region'>
<label>Sort Code</label><label id='sort_code_account_info'
class='text_field_locked'>-</label>
</div>
<div id='account_info_account_number_account_info'
class='text_field_region'>
<label>Account Number</label><label id='account_number_account_info'
class='text_field_locked'>-</label>
</div>
</div>
</div>
</div>
<div class='button_container'>
<a href='#'
id='edit_payment_info'
class='button'
onclick='document.pressed="edit_payment_info"; Link.hyper("Rent__Log","&pid=12345678");'
name="edit_payment_info">Edit Payment Information</a>
</div>
</form>
</div>
<div id='footer'>
<div id='footer_inside'>
Copyright © 2011 Our Company Ltd.<br>
All rights reserved.
</div>
</div>
</div>
</div>
</body>
</html>