html前端基礎：table和select操作

發布時間：2020-05-13 09:58:10

來源：億速云

閱讀：196

作者：Leah

這篇文章主要為大家詳細介紹html前端基礎中有關table和select的操作，配合代碼閱讀理解效果更佳，非常適合初學者入門，感興趣的小伙伴們可以參考一下。

table標簽和其它標簽不一樣，他有屬性和方法。

table屬性：

rows ? ? ?可以得到table的row集合

cells ? ? ?得到table所有單元格

table方法：

insertRow() ? ? ? 創建一個row并且添加到rows集合中

deleteRow(index) ? ?從表格中刪除指定行

moveRow(tr,index)　 將行移動

tr屬性：

cells ? ? 得到tr中所有單元格的集合

sectionRowIndex ? 得到該行在rows中的編號

tr方法：

insertCell ? 在tr中創建并且添加到tr的cells中

deleteCell(index) ?刪除指定index的cell

那能干什么？能干什么？干什么？什么？？？

select：

聯動列表？沒錯，你終于知道你為什么不會做聯動列表了。//首先就是為需要聯動的select添加聯動綁定

val_1

//下面是第二級

< select name = "" id = "select_2" >

//默認的下拉列表，保持和第一級一致

< /select>//綁定的聯動函數

function change() {

var select_1 = document.getElementById("select_1");

var select_2 = document.getElementById("select_2");

//最重要的就是清除第二級下拉列表

select_2.length = 0;

//根據第一級聯動的value來添加

if(select_1.value == "") {

//創建一個option

var op = new Option("value", "inner");

//添加到第二級下拉

select_2.add(op);

}

else if() {

//其他項目

};

};

沒錯，就是利用length清空下拉列表，然后通過new Option()新建的下拉項，然后通過select的add()依次添加就好了。

以上就是table和select操作的詳細內容，代碼示例簡單明了，如果在日常工作遇到此問題。通過這篇文章，希望你能有所收獲，更多詳情敬請關注億速云行業資訊頻道！

總結

以上是生活随笔為你收集整理的html表格联动,html前端基础：table和select操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。