html怎麼增加一行
html
html增加一行的方法:先建立一個HTML範例檔案;然後透過table標籤建立一張表格;最後透過js程式碼「function addRow() {...}」方法讓表格增加一行即可。
本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。
html表格新增一行和刪除一行
主要思路:現在頁面中寫一段你想要的html程式碼樣式,然後設定為隱藏不可見(style ="display: none").然後在js中取得該段程式碼,做處理後重寫回html中
#
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>新增一行</title> </head> <body> <table> <tr> <th>序号</th> <th>姓名</th> <th>电话</th> <th>地址</th> <th>操作</th> </tr> <!--这一行是隐藏的,主要用户方便js中获取html代码--> <!--##:js中会替换成数字--> <tr id="show" style="display: none"> <td>##</td> <td> <input id="name##" /> </td> <td> <input id="phone##" /> </td> <td> <input id="address##" /> </td> <td> <button type="button" onclick="deleteRow('##')">删除</button> </td> </tr> </table> <button type="button" onclick="addRow()">新增一行</button> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script > var index = 0;//初始下标 var indexArr= new Array(); //新增一行 function addRow() { index++; indexArr.push(index); var showHtml = $("#show").html(); var html = "<tr id='tr##'>"+showHtml+"</tr>"; html = html.replace(/##/g,index);//把##替换成数字 $("#show").before($(html)); console.log("当前下标数组",indexArr); } //删除一行 function deleteRow(inde){ $("#tr" + inde).remove(); var a = indexArr.indexOf(parseInt(inde)); if (a > -1) { indexArr.splice(a, 1); console.log("当前下标数组",indexArr); } } </script> </body> </html>
登入後複製
#【推薦學習:html影片教學】
以上是html怎麼增加一行的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝?
2 週前
By DDD
Inzoi:如何申請學校和大學
3 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝?
2 週前
By DDD
Roblox:Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前
By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)