使用 jQuery() 操作 DOM 對象要注意的小問題

js 裏使用 document.getElementById("theid") 來獲得 dom 對象,例如:

document.getElementById("table1") 就可以獲取到 id 爲 table1 的對象,就可以直接

document.getElementById("table1") .rows.length 來獲得行數。

使用 $() 可以簡寫代碼,如:

$("#table1")。但這樣獲取到的不是 dom 對象,通過 alert 打印出來的 是 object 而不是 Html的Table。

所以$("#table1").rows.length 是錯誤的。

正確的使用應該是:$("#table1")[0].rows.length;

$("#table1") 會獲取到所有的 id 爲 table1 的對象。


測試:

<body>
    <div id="div1" class="divpos">
     <form id="form1">
          id: <input type="text" class="id" name="id" /><br />
        name: <input type="text" class="name" name="name"/><br />
       number:<input type="text" class="number" name="number"/><br />
      <input type="button" value="添加" οnclick="AddRow()"/>
     </form>
    </div>

       <div id="div2" class="divpos">
         <table border="1" id="table1">
          <tr><th>id</th><th>name</th><th>number</th></tr>
        </table>
        </div>
</body>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function AddRow() {
            //var count = document.getElementById("table1").rows.length;
            //獲取table的行數
            var count = $("#table1")[0].rows.length;
            //在指定位置插入一行
            var row = $("#table1")[0].insertRow(count);
            //在行的指定位置插入單元格
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);  
            cell1.innerText = $(".id")[0].value;
            cell2.innerText = $(".name")[0].value;
            cell3.innerText = $(".number")[0].value;
            $(".id").val(""); $(".name").val(""); $(".number").val("");
        }
    </script>


----------------------------------------------------------------------------------------------------

前端的東西還是弄得比較少,js 代碼寫得不多,比較生疏。要找個時間補補。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章