Currently, I am designing a table containing dates along with numerous hidden fields.
print "<td";
{ $dm=date('Y-m-d',strtotime("+".$i." days", strtotime($m)));
print " class=\"overflow\" id=\"$a::$dm\" onclick=\"function1(this)\" "
print " >";
print "<input type='hidden' id=\""."hidden:$a::$dm"."\" name=\"hiddenfield\" value='123' >";
}
print " </td>";
After that, my goal is to be able to click on a cell within the table which will result in adding a value to the hidden element and changing the color of neighboring cells.
However, once the JavaScript modifies the style, the hidden element becomes inaccessible causing the array length to decrease by one each time.
I have considered moving the hidden input fields outside of the table, but I am hesitant if this would solve the issue.
Javascript ........
> days=5;
> for (i=(c+1); i<(c+days);i++)
> {
> myTable.rows[r].cells[i].innerHTML = '';
> j=myTable.rows[r].cells[i].id;//alert(i +" "+j)
> document.getElementById(j).style.borderRightStyle = "none";
> document.getElementById(j).style.borderLeftStyle = "none";
> document.getElementById(j).className = 'active';
> ajj='hidden::'+j;alert(ajj);
> //alert(document.getElementById(ajj).value)
> alert(document.getElementsByName("hiddenfield").length);
> }
When attempting to inspect the element, I receive a console message indicating that alert(document.getElementById(ajj).value) is null.