Jquery 動(dòng)態(tài)循環(huán)輸出表格具體方法
1、有一個(gè)同學(xué)叫我實(shí)現(xiàn)一個(gè)這樣的功能就像PHP,在表單中輸入數(shù)字,然后網(wǎng)頁就出現(xiàn)相應(yīng)的數(shù)量;如果是PHP的話就簡單多了,Jquery實(shí)現(xiàn)還是第一個(gè),就開始狂的實(shí)驗(yàn),最后還是實(shí)現(xiàn)了(知識(shí)點(diǎn):Jquery創(chuàng)建節(jié)點(diǎn)、獲取表單的值、循環(huán)語句)
Jquery代碼:
<script type="text/javascript" language="javascript">
$(function(){
$("#btn").click(function(){ //選擇ID為btn的元素,添加點(diǎn)擊事件
var result = $("input[name='text']").val(); //獲取name為'text的文本框的值,并定義為變量result
$("div").remove(".abc"); //作用是:每次執(zhí)行時(shí)就把含有.abc這個(gè)類的div刪除;
for(i=1;i<=result;i++){ //for循環(huán),定i=1,每次循環(huán)就加1; 當(dāng)i的值由1循環(huán)到等于result的值一樣時(shí)(即“文本框的name='text'的值”)就停止循環(huán)
var createobj = $("<div class='abc'>創(chuàng)建的節(jié)點(diǎn)</div>"); //把div定義為變量createobj
$("body").append(createobj); //把createobj這個(gè)變量追加到html中的'body'里
}
});
});
</script>
HTML代碼:
<body>
<input type="text" id="text" name="text" />
<input type="button" id="btn" value="確定" />
</body>
CSS代碼:
<style>
.abc {height:50px;width:50px; margin:20px;background:#ccc;}
</style>
- jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法【測試可用】
- 原生JS和JQuery動(dòng)態(tài)添加、刪除表格行的方法
- JQuery動(dòng)態(tài)添加和刪除表格行的方法
- JQuery實(shí)現(xiàn)表格動(dòng)態(tài)增加行并對(duì)新行添加事件
- 基于jQuery的動(dòng)態(tài)表格插件
- 基于jquery的動(dòng)態(tài)創(chuàng)建表格的插件
- JQuery Ajax動(dòng)態(tài)生成Table表格
- jquery動(dòng)態(tài)增加刪除表格行的小例子
- jQuery實(shí)現(xiàn)html表格動(dòng)態(tài)添加新行的方法
- Jquery 動(dòng)態(tài)生成表格示例代碼
- jQuery實(shí)現(xiàn)的簡單動(dòng)態(tài)添加、刪除表格功能示例
相關(guān)文章
再說AutoComplete自動(dòng)補(bǔ)全之實(shí)現(xiàn)原理
再說AutoComplete自動(dòng)補(bǔ)全之實(shí)現(xiàn)原理,這里以asp.net后臺(tái)為主,考慮到性能最好是生成xml并入緩存。2011-11-11JQuery操作Select的Options的Bug(IE8兼容性視圖模式)
JQuery在IE8兼容性視圖模式下操作Select的Options的Bug在本文進(jìn)行重現(xiàn)并給出詳細(xì)的解決方法,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-04-04jQuery中slideUp 和 slideDown 的點(diǎn)擊事件
這篇文章主要介紹了jQuery中slideUp 和 slideDown 的點(diǎn)擊事件的相關(guān)資料,需要的朋友可以參考下2015-02-02Jquery實(shí)現(xiàn)遮罩層的簡單實(shí)例(就是彈出DIV周圍都灰色不能操作)
下面小編就為大家?guī)硪黄狫query實(shí)現(xiàn)遮罩層的簡單實(shí)例(就是彈出DIV周圍都灰色不能操作)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07JQuery讀取XML文件數(shù)據(jù)并顯示的實(shí)現(xiàn)代碼
今天向大家演示如何通過JQuery框架為空白HTML文檔加載從XML文件讀取的數(shù)據(jù)并顯示出來。我們將會(huì)主要用到JQuery自帶過程$.get 。2009-12-12jQuery獲取table表中的td標(biāo)簽(實(shí)例講解)
下面小編就為大家?guī)硪黄猨Query獲取table表中的td標(biāo)簽(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07jQuery實(shí)現(xiàn)點(diǎn)擊旋轉(zhuǎn),再點(diǎn)擊恢復(fù)初始狀態(tài)動(dòng)畫效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊旋轉(zhuǎn),再點(diǎn)擊恢復(fù)初始狀態(tài)動(dòng)畫效果,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12