2012年5月16日 星期三

[javascript][html] Dynamic array create by javascript

Posted by   on   in ,   / No comments 




<javascript>

function DeviceNameList()

{

     var i = 1



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

     var DeviceRulesTableNumber = DeviceRulesTable.length;



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

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



      for(i = 0 ; i < DeviceRulesTableNumber - 1; 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(DeviceRulesTable[i+1].cells[0].innerHTML);

          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(DeviceRulesTable[i+1].cells[0].innerHTML);

          data.appendChild(text);



          row.appendChild(data);

          table.appendChild(row);      

        }

      }

}

</javascript>

<html>

          <TABLE id="DeviceNameDisplay" class="formInsideRowSpace CSSStyle1">

          </TABLE>









          <table id="DeviceRulesTable"><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>

              <tr>

                <td class="CSSStyle1">abc</td>

                <td class="CSSStyle1">00:16:32:FF:B6:A1</td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">mypolicy</option>

                    </select>

                </td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">default</option>

                    </select>              

                </td>

                <td class="CSSStyle1"><input type="checkbox"></td>

              </tr>

              <tr>

                <td class="CSSStyle1">abcd</td>

                <td class="CSSStyle1">00:16:32:FF:B6:A2</td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">mypolicy</option>

                    </select>

                </td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">default</option>

                    </select>              

                </td>

                <td class="CSSStyle1"><input type="checkbox"></td>

              </tr>

              <tr>

                <td class="CSSStyle1">edf</td>

                <td class="CSSStyle1">00:16:32:FF:B6:A3</td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">mypolicy</option>

                    </select>

                </td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">default</option>

                    </select>              

                </td>

                <td class="CSSStyle1"><input type="checkbox"></td>

              </tr>

              <tr>

                <td class="CSSStyle1">Khan1</td>

                <td class="CSSStyle1">00:16:32:FF:B6:A3</td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">mypolicy</option>

                    </select>

                </td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">default</option>

                    </select>              

                </td>

                <td class="CSSStyle1"><input type="checkbox"></td>

              </tr>

              <tr>

                <td class="CSSStyle1">Khan2</td>

                <td class="CSSStyle1">00:16:32:FF:B6:A3</td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">mypolicy</option>

                    </select>

                </td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">default</option>

                    </select>              

                </td>

                <td class="CSSStyle1"><input type="checkbox"></td>

              </tr>

              <tr>

                <td class="CSSStyle1">Khan3</td>

                <td class="CSSStyle1">00:16:32:FF:B6:A3</td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">mypolicy</option>

                    </select>

                </td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">default</option>

                    </select>              

                </td>

                <td class="CSSStyle1"><input type="checkbox"></td>

              </tr>

              <tr>

                <td class="CSSStyle1">Khan4</td>

                <td class="CSSStyle1">00:16:32:FF:B6:A3</td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">mypolicy</option>

                    </select>

                </td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">default</option>

                    </select>              

                </td>

                <td class="CSSStyle1"><input type="checkbox"></td>

              </tr>

              <tr>

                <td class="CSSStyle1">Khan5</td>

                <td class="CSSStyle1">00:16:32:FF:B6:A3</td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">mypolicy</option>

                    </select>

                </td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">default</option>

                    </select>              

                </td>

                <td class="CSSStyle1"><input type="checkbox"></td>

              </tr>

              <tr>

                <td class="CSSStyle1">Khan6</td>

                <td class="CSSStyle1">00:16:32:FF:B6:A3</td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">mypolicy</option>

                    </select>

                </td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">default</option>

                    </select>              

                </td>

                <td class="CSSStyle1"><input type="checkbox"></td>

              </tr>

              <tr>

                <td class="CSSStyle1">Khan7</td>

                <td class="CSSStyle1">00:16:32:FF:B6:A3</td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">mypolicy</option>

                    </select>

                </td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">default</option>

                    </select>              

                </td>

                <td class="CSSStyle1"><input type="checkbox"></td>

              </tr>

              <tr>

                <td class="CSSStyle1">Khan8</td>

                <td class="CSSStyle1">00:16:32:FF:B6:A3</td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">mypolicy</option>

                    </select>

                </td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">default</option>

                    </select>              

                </td>

                <td class="CSSStyle1"><input type="checkbox"></td>

              </tr>

              <tr>

                <td class="CSSStyle1">Khan9</td>

                <td class="CSSStyle1">00:16:32:FF:B6:A3</td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">mypolicy</option>

                    </select>

                </td>

                <td class="CSSStyle1">

                    <select style="width: 140px;">

                    <option value="0" selected="selected">default</option>

                    </select>              

                </td>

                <td class="CSSStyle1"><input type="checkbox"></td>

              </tr>

          </tbody></table>

</html>

Related Posts:

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)