基于JavaScript實現(xiàn)動態(tài)創(chuàng)建表格和增加表格行數(shù)
更新時間：2015年12月20日 09:17:11 作者：程序員小菜
這篇文章主要介紹了基于JavaScript實現(xiàn)動態(tài)創(chuàng)建表格和增加表格行數(shù)的相關(guān)資料,需要的朋友可以參考下
在工作，項目需求中，有時候表格的行數(shù)不能夠滿足我們的需求，這時需要我們動態(tài)的增加表格的行數(shù)，下面小編通過一段代碼實例給大家介紹js創(chuàng)建表格和增加表格的行數(shù)的方法，并且還實現(xiàn)了隔行變色功能。對此感興趣的朋友可以參考一下代碼：
js代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動態(tài)操作表格</title>
</head>
<body>
<script type="text/javascript">
var n = 0;
function showTable(len)
{
wi('<table border="1" width="300" style="border-collapse:collapse"><tbody id="table">');
for (i=0;i<len;i++)
{
if (parseInt(i%2)==1)
{
bg = '#F4FAC7';
}
else
{
bg = 'white';
}
wi('<tr bgcolor='+bg+'><td>第'+(i+1)+'行</td></tr>');
}
wi('</tbody></table><br />');
wi('<input type="button" value="Add" id="add" />');
}</P>
<P>function wi(str)
{
return document.write(str);
}
showTable(10);
var add = document.getElementById("add");
add.onclick = function() {
n = n+1;
if (n%2==0)
{
bg = '#F4FAC7';
}
else
{
bg = 'white';
}
var table = document.getElementById("table");
var tr = document.createElement("tr");
tr.bgColor = bg;
var td = document.createElement("td");
td.innerHTML = '第'+(10+n)+'行';
tr.appendChild(td);
table.appendChild(tr);
}
</script>
</body>
</html>
以上內(nèi)容是基于JavaScript實現(xiàn)動態(tài)創(chuàng)建表格和增加表格行數(shù)的相關(guān)代碼，希望大家喜歡。
相關(guān)文章
利用原生js實現(xiàn)html5小游戲之打磚塊（附源碼）
這篇文章主要給大家介紹了關(guān)于利用原生js實現(xiàn)html5小游戲之打磚塊的相關(guān)資料，這是最近工作遇到的一個小需求，文中通過示例代碼介紹的非常詳細，并分享了完整的源碼供大家參考學習，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
DOM操作原生js 的bug,使用jQuery 可以消除的解決方法
下面小編就為大家?guī)硪黄狣OM操作原生js 的bug,使用jQuery 可以消除的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了使JavaScript動畫流暢的一些方法,包括與CSS動畫效果的一些對比,需要的朋友可以參考下2015-06-06
Extjs 中的 Treepanel 實現(xiàn)菜單級聯(lián)選中效果及實例代碼
這篇文章主要介紹了Extjs 中 Treepanel 實現(xiàn)菜單級聯(lián)選中效果,需要的朋友可以參考下2017-08-08
Javascript使用post方法提交數(shù)據(jù)實例
這篇文章主要介紹了Javascript使用post方法提交數(shù)據(jù),實例分析了javascript實現(xiàn)post提交數(shù)據(jù)的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
下面小編就為大家?guī)硪黄褂迷鷍s封裝的ajax實例(兼容jsonp)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
jquery pagination插件動態(tài)分頁實例(Bootstrap分頁)
這篇文章主要為大家分享了Bootstrap靜態(tài)分頁和jquery pagination插件動態(tài)分頁兩個實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
window.event.srcElement 得到事件源對象
window.event.srcElement 得到事件源對象代碼，大家可以參考腳本之家以前發(fā)的代碼，多瀏覽兼容的。2009-05-05
Js 獲取HTML DOM節(jié)點元素的方法小結(jié)
在Web應用程序特別是Web2.0程序開發(fā)中，經(jīng)常要獲取頁面中某個元素，然后更新該元素的樣式、內(nèi)容等。2009-04-04
這篇文章主要介紹了JS異步加載進度條 的相關(guān)資料,需要的朋友可以參考下2016-05-05