JavaScript 關於動態添加表格行問題

來源:互聯網
上載者:User

strHtml="<table border=1 id=McGrid1>"

strHtml=strHtml + "<tr><td align='center' style='display:none'>編號</td><td align='center' width='60'>姓名</td</tr></table>"

document.write(strHtml)

tr=document.all.McGrid1.insertRow()

td=tr.insertCell()

//tr.insertCell(0).style.display="none"

//tr.insertCell(0).innerText="012"

td.style.display="none"

td.innerText="012"

td=tr.insertCell()

td.innerText="張三"

//tr.insertCell(1).innerText="張三"

alert(tr.cells(1).innerText);

=========================================

rows

Every table contains a rows collection, which consists of all the rows in a table, including the header and footer rows. You can use the insertRow method to add a row to a table and, consequently, to its rows collection. Each row is equivalent to a tr element in HTML. The following code appends an empty row to the rows collection of a table called oTable.

var oRowoRow = oTable.insertRow();

By default, the insertRow method appends a row to the end of the collection; this is faster than inserting a row somewhere in the middle of the collection. However, to insert a row into the middle of a collection, you can pass an index to insertRow, as shown in the following code.

var oRowoRow = oTable.insertRow(3);

The index on the rows collection starts at zero. Therefore, the preceding code inserts a row at the fourth position of the rows collection of oTable. Once a row is created, you can insert cells into it. This is discussed in the next section.

Note   The innerText and innerHTML properties are read-only on the tr object. Therefore, you cannot use them to insert text or HTML into a row. You can, however, insert td objects into a row using the insertCell method. Then, you can insert text or HTML into the td objects by setting the innerText or innerHTML property of the cell.

You can access the members of the rows collection by using an index, the same way you access an array. Consider the following code, which iterates through the rows of oTable and sets the font to bold for each row. The code uses array syntax to access the individual members of the rows collection. The length property is used to determine the number of elements in a collection.

var curr_row;for (curr_row = 0; curr_row < oTable.rows.length; curr_row++){  oTable.rows[curr_row].style.fontWeight = "bold";}
cells

After a row is created, you can add cells to it; each row contains a cells collection. To append cells to the cells collection of a row object, call the insertCell method of the row object.

Note   By default, the insertCell method adds cells to the end of the collection, because it is faster to add a cell at the end of a row than somewhere in the middle.

The following example inserts a row into a table, and then it inserts a cell into the newly inserted row.

var oRow;var oCell;oRow = oTable.insertRow();oCell = oRow.insertCell();

Once an empty cell is added to a row, you can insert HTML into the cell by setting its innerHTML property.

var oRow;var oCell;oRow = oTable.insertRow();oCell = oRow.insertCell();oCell.innerHTML = "Download the latest version of <I>Internet Explorer</I> from here."

oRow.insertCell(3) 不是第3個位置的表格而是在第3個位置插入的表格!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.