2012年5月16日 星期三

[javascript][HTML] Dynamic create array work in IE8 && FF

[javascript][HTML] Dynamic create array work in IE8 && FF



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<link type="text/css" href="css/GlobleStyle.css" rel="stylesheet">

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>UPC Cable Gateway Configuration: Parental Control - Basic Setup</title>

<script language="javascript">

<!--

var DeviceName = new Array("abc","abcd","edf","Khan1","Khan2","Khan3","Khan4","Khan5","Khan6","Khan7","Khan8","Khan9");

var MACAddress = new Array("00:16:32:FF:B6:A1","00:16:32:FF:B6:A2","00:16:32:FF:B6:A3","00:16:32:FF:B6:A4","00:16:32:FF:B6:A5","00:16:32:FF:B6:A6","00:16:32:FF:B6:A7","00:16:32:FF:B6:A8","00:16:32:FF:B6:A9","00:16:32:FF:B6:B0","00:16:32:FF:B6:B1","00:16:32:FF:B6:B2");

var WebSiteFilters = new Array("mypolicy");

var ToDFilters = new Array("default");



function DeviceNameRuleTable()

{

     var i;

     var DeviceNameLength = DeviceName.length;





    if (msieversion() >= 7)

    {

     for(i = 0 ; i < DeviceNameLength ; i++)

      {



          var table = document.getElementById("DeviceRulesTable");

          var tablebody = document.createElement('tbody');

          var row = document.createElement('tr');



          var data1 = document.createElement('td');

          data1.setAttribute("className", "CSSStyle1");

          var datacontent1 = document.createTextNode(DeviceName[i]);

          data1.appendChild(datacontent1);

          row.appendChild(data1);



          var data2 = document.createElement('td');

          data2.setAttribute("className", "CSSStyle1");

          var datacontent2 = document.createTextNode(MACAddress[i]);

          data2.appendChild(datacontent2);

          row.appendChild(data2);



          var data3 = document.createElement('td');

          data3.setAttribute("className", "CSSStyle1");

          var datacontentElement3 = document.createElement('select');

          datacontentElement3.style.setAttribute('cssText', 'width: 140px;');

          datacontentElement3.options[0]=new Option(WebSiteFilters[0]);

          data3.appendChild(datacontentElement3);

          row.appendChild(data3);



          var data4 = document.createElement('td');

          data4.setAttribute("className", "CSSStyle1");

          var datacontentElement4 = document.createElement('select');

          datacontentElement4.style.setAttribute('cssText', 'width: 140px;');

          datacontentElement4.options[0]=new Option(ToDFilters[0]);

          data4.appendChild(datacontentElement4);

          row.appendChild(data4);



          var data5 = document.createElement('td');

          data5.setAttribute("className", "CSSStyle1");

          var datacontentElement5 = document.createElement('input');

          datacontentElement5.type="checkbox"

          data5.appendChild(datacontentElement5);

          row.appendChild(data5);

          tablebody.appendChild(row);

          table.appendChild(tablebody);

      }



      var table = document.getElementById("DeviceNameDisplay");

      var tablebody = document.createElement('tbody');

      for(i = 0 ; i < DeviceNameLength ; i++)

      {

          if(i % 4 != 0)

          {

            var data = document.createElement('td');

            data.style.setAttribute('cssText', 'background:#267fc0;padding-right:100px;margin-right:1px;');

            var text = document.createTextNode(DeviceName[i]);

            data.appendChild(text);



            row.appendChild(data);



            continue;

          }

          else

          {

            var row = document.createElement('tr');

            var data = document.createElement('td');

            data.style.setAttribute('cssText', 'background:#267fc0;padding-right:100px;margin-right:1px;');

            var text = document.createTextNode(DeviceName[i]);

            data.appendChild(text);



            row.appendChild(data);

            tablebody.appendChild(row);

            table.appendChild(tablebody);      

          }

      }



    }

    else

    {

      for(i = 0 ; i < DeviceNameLength ; i++)

      {



          var table = document.getElementById("DeviceRulesTable");

          var row = document.createElement('tr');



          var data1 = document.createElement('td');

          data1.setAttribute("class", "CSSStyle1");

          var datacontent1 = document.createTextNode(DeviceName[i]);

          data1.appendChild(datacontent1);

          row.appendChild(data1);



          var data2 = document.createElement('td');

          data2.setAttribute("class", "CSSStyle1");

          var datacontent2 = document.createTextNode(MACAddress[i]);

          data2.appendChild(datacontent2);

          row.appendChild(data2);



          var data3 = document.createElement('td');

          data3.setAttribute("class", "CSSStyle1");

          var datacontentElement3 = document.createElement('select');

          datacontentElement3.setAttribute("style", "width: 140px;");

          datacontentElement3.options[0]=new Option(WebSiteFilters[0]);

          data3.appendChild(datacontentElement3);

          row.appendChild(data3);



          var data4 = document.createElement('td');

          data4.setAttribute("class", "CSSStyle1");

          var datacontentElement4 = document.createElement('select');

          datacontentElement4.setAttribute("style", "width: 140px;");

          datacontentElement4.options[0]=new Option(ToDFilters[0]);

          data4.appendChild(datacontentElement4);

          row.appendChild(data4);



          var data5 = document.createElement('td');

          data5.setAttribute("class", "CSSStyle1");

          var datacontentElement5 = document.createElement('input');

          datacontentElement5.type="checkbox"

          data5.appendChild(datacontentElement5);

          row.appendChild(data5);



          table.appendChild(row);

      }



      var table = document.getElementById("DeviceNameDisplay");

      for(i = 0 ; i < DeviceNameLength ; i++)

      {

          if(i % 4 != 0)

          {

            var data = document.createElement('td');

            data.setAttribute("style", "background:#267fc0;padding-right:100px;margin-right:1px;");

            var text = document.createTextNode(DeviceName[i]);

            data.appendChild(text);



            row.appendChild(data);



            continue;

          }

          else

          {

            var row = document.createElement('tr');

            var data = document.createElement('td');

            data.setAttribute("style", "background:#267fc0;padding-right:100px;margin-right:1px;");

            var text = document.createTextNode(DeviceName[i]);

            data.appendChild(text);



            row.appendChild(data);

            table.appendChild(row);      

          }

      }

    }

}




function msieversion()

{

  var ua = window.navigator.userAgent

  var msie = ua.indexOf ( "MSIE " )



  if ( msie > 0 )  // If Internet Explorer, return version number

      return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))

  else                 // If another browser, return 0

      return 0



}

-->

</script>

</head>

<body lang="en" onload="DeviceNameRuleTable();">

<table id="AutoNumber1" style="border-collapse: collapse;" border="0" bordercolor="#f0eff5" cellpadding="0" cellspacing="0" width="100%">

  <tbody>

    <tr>

      <td style="border-width: 1px; border-left-style: none; border-right-style: solid; color: rgb(224, 224, 232); width: 240px;" bordercolor="#E0E0E8" rowspan="2" align="center" height="116" valign="top">

      <table style="width: 246px;"><tbody>

            <tr class="FirstSubMenuItemsPosition">

              <td id="StatusSystem"><a class="FirstLevelSubMenuItemsAfter" href="RgParentalControlDeviceRules.htm">Device Rules</a><br></td>

            </tr>

            <tr class="FirstSubMenuItemsPosition">

              <td id="StatusSystem"><a class="FirstLevelSubMenuItemsBefore" href="RgParentalControlBasicSetup.htm">Basic Setup</a><br></td>

            </tr>

            <tr class="FirstSubMenuItemsPosition">

              <td id="StatusSystem"><a class="FirstLevelSubMenuItemsBefore" href="RgParentalControlWebSiteFilters.htm">Web Site Filters</a><br></td>

            </tr>

            <tr class="FirstSubMenuItemsPosition">

              <td id="StatusSystem"><a class="FirstLevelSubMenuItemsBefore" href="RgParentalControlToDFilters.htm">ToD Filters</a><br></td>

            </tr>

        </tbody></table>

      </td>

    </tr>

    <tr>

     <td>

      <form class="formInside">

              <div>

              <p class="Title">PARENTAL CONTROL</p>

              </div>

      <div style="width:730px;" class="divInside">

            <div class="InsideTitle">

                <!--[if !IE]><!--><p class="CSSStyle1">Device Rules</p><!--<![endif]-->

                <!--[if IE]><p class="CSSStyle1 InsideTitleRowSpace">Device Rules</p><![endif]-->

            </div>

            <div class="Description">

                <p>This page allows to configure device rules.</p>

            </div>

          <!--[if !IE]><!--><TABLE id="DeviceNameDisplay" class="formInsideRowSpace CSSStyle1"><tbody></tbody></TABLE><!--<![endif]-->

          <!--[if IE]><TABLE id="DeviceNameDisplay" class="CSSStyle1" style="margin-left:20px;"><tbody></tbody></TABLE><![endif]-->

          <table id="DeviceRulesTable" style="margin:20px 20px;"><tbody>

              <tr>

                <td class="formInsideRowSpace CSSStyle1">Device Name</td>

                <td class="formInsideRowSpace CSSStyle1">MAC Address</td>

                <td class="formInsideRowSpace CSSStyle1">Web Site Filters</td>

                <td class="formInsideRowSpace CSSStyle1">ToD Filters</td>

                <td class="formInsideRowSpace CSSStyle1">Delete</td>

              </tr>

          </tbody></table>

          <div style="height: 46px; width: 710px;">

          <table ><tbody>

              <tr>

                  <td style="width: 710px;" align="right"><input class="BigBlueButton" value="Save" type="button"></td>

              </tr>

          </tbody></table>

          </div>

      </div>  

      </form>

</td>

</tr>

</tbody>

</table>

</body>

</html>

Related Posts:

0 意見:

張貼留言