基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建表格和增加表格行數(shù)
更新時(shí)間：2015年12月20日 09:17:11 作者：程序員小菜
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建表格和增加表格行數(shù)的相關(guān)資料,需要的朋友可以參考下
在工作，項(xiàng)目需求中，有時(shí)候表格的行數(shù)不能夠滿足我們的需求，這時(shí)需要我們動(dòng)態(tài)的增加表格的行數(shù)，下面小編通過(guò)一段代碼實(shí)例給大家介紹js創(chuàng)建表格和增加表格的行數(shù)的方法，并且還實(shí)現(xiàn)了隔行變色功能。對(duì)此感興趣的朋友可以參考一下代碼：
js代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動(dòng)態(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實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建表格和增加表格行數(shù)的相關(guān)代碼，希望大家喜歡。
相關(guān)文章
利用原生js實(shí)現(xiàn)html5小游戲之打磚塊（附源碼）
這篇文章主要給大家介紹了關(guān)于利用原生js實(shí)現(xiàn)html5小游戲之打磚塊的相關(guān)資料，這是最近工作遇到的一個(gè)小需求，文中通過(guò)示例代碼介紹的非常詳細(xì)，并分享了完整的源碼供大家參考學(xué)習(xí)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
DOM操作原生js 的bug,使用jQuery 可以消除的解決方法
下面小編就為大家?guī)?lái)一篇DOM操作原生js 的bug,使用jQuery 可以消除的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
深入探究使JavaScript動(dòng)畫流暢的一些方法
這篇文章主要介紹了使JavaScript動(dòng)畫流暢的一些方法,包括與CSS動(dòng)畫效果的一些對(duì)比,需要的朋友可以參考下2015-06-06
Extjs 中的 Treepanel 實(shí)現(xiàn)菜單級(jí)聯(lián)選中效果及實(shí)例代碼
這篇文章主要介紹了Extjs 中 Treepanel 實(shí)現(xiàn)菜單級(jí)聯(lián)選中效果,需要的朋友可以參考下2017-08-08
Javascript使用post方法提交數(shù)據(jù)實(shí)例
這篇文章主要介紹了Javascript使用post方法提交數(shù)據(jù),實(shí)例分析了javascript實(shí)現(xiàn)post提交數(shù)據(jù)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
下面小編就為大家?guī)?lái)一篇使用原生js封裝的ajax實(shí)例(兼容jsonp)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
jquery pagination插件動(dòng)態(tài)分頁(yè)實(shí)例(Bootstrap分頁(yè))
這篇文章主要為大家分享了Bootstrap靜態(tài)分頁(yè)和jquery pagination插件動(dòng)態(tài)分頁(yè)兩個(gè)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
window.event.srcElement 得到事件源對(duì)象
window.event.srcElement 得到事件源對(duì)象代碼，大家可以參考腳本之家以前發(fā)的代碼，多瀏覽兼容的。2009-05-05
Js 獲取HTML DOM節(jié)點(diǎn)元素的方法小結(jié)
在Web應(yīng)用程序特別是Web2.0程序開發(fā)中，經(jīng)常要獲取頁(yè)面中某個(gè)元素，然后更新該元素的樣式、內(nèi)容等。2009-04-04
這篇文章主要介紹了JS異步加載進(jìn)度條 的相關(guān)資料,需要的朋友可以參考下2016-05-05