專案訂單表單中htmldom技術應用
一、 本文設計目標
一個專案訂單設計中,需要處理主子表,或主表、子表1、子表2、子表3的應用情況,這裡例舉列說明,如何時在一個表格中動態增加一行資料,即一條記錄,也可以動態刪除一行資料,即刪除一條記錄,多個子表時,也同樣操作。
這裡的核心設計技術,就是用採用htmldom原生的javascript技術來實現。處理效果如下。
事實上,jquery核心知識體系的50%的內容也是如何操作htmldom技術
二、 程式設計要點如下
1、 表格設計如下
<table border="1" id="mytb"> <tr align="center"> <td align="right" width="100"> </td> <td width="100"> 學號 </td> <td width="100"> 課程號 </td> <td width="100"> 成績 </td> </tr> <tr> <td> <button type='button' onclick="delRow(this);">刪除</button> </td> <td> <input type="text" name="studId"> </td> <td> <input type="text" name="courseId"> </td> <td> <input type="text" name="score"> </td> </tr> </table> <button type="button" onclick="insertRow();">增加一條記錄</button> |
2、 動態新增一行資料,即動態新增一條記錄
<script>
function insertRow(){
vartbObj=document.getElementById("mytb");
var row=""+
"<td><buttontype='button' onclick=\"delRow(this)\">刪除</button></td>"+
"<td><inputname='studId'></td>"+
"<td><inputname='courseId'></td>"+
"<td><inputname='score'></td>"+
"";
var tr=document.createElement("tr");
tr.innerHTML=row;
tbObj.appendChild(tr);
}
</script>
3、 動態刪除一行資料,即動態刪除一條記錄
<script>
function delRow(obj){
var trObj=obj.parentElement.parentElement;
var tbObj=trObj.parentElement;
tbObj.removeChild(trObj);
}
</script>
created by 劉明
相關推薦
專案訂單表單中htmldom技術應用
一、 本文設計目標 一個專案訂單設計中,需要處理主子表,或主表、子表1、子表2、子表3的應用情況,這裡例舉列說明,如何時在一個表格中動態增加一行資料,即一條記錄,也可以動態刪除一行資料,即刪除一條記錄,多個子表時,也同樣操作。 這裡的核心設計技術,就是用採
Django小專案--待辦清單(四)(從表單中獲取資料並存入資料庫)
首先進入主頁(要記得先進入虛擬環境並且通過python mange.py runserver啟動本地伺服器),我們知道主頁匹配的網址是localhost:8000/todo/home,在瀏覽器上輸入並回車。 在頁面的右上角有一個新增待辦事項的按鈕,輸入內容並點選新
利用servlet轉發技術實現統計form表單中字母次數
需求是利用servlet轉發技術,實現對html網頁中使用者輸入的內容進行統計,統計每個字母出現的次數,忽略大小寫。其中統計功能在一個servlet中,轉發功能在另一個servlet中。 1.新建dynamic web project,命名為CounterCharact
關於form表單中button按鈕自動提交問題
courier tex w3c line 自動提交 get style href span 坑:點擊確認按鈕,form表單提交2次,發送後臺2次請求 //錯誤代碼: <Button id="btnSubmit" name="btnSubmit" cla
PHP中常用的超全局變量 表單中get和post提交方式的區別 session與cookie的區別 GD庫是做什麽用的
屬性 過程 生成報表 用戶訪問 服務器 接收 file pla request PHP中常用的超全局變量 $_GET ----->get傳送方式$_POST ----->post傳送方式$_REQUEST ----->可以接收到get和post兩種方式的值
利用ajax異步處理POST表單中的數據
利用 tex oda checkbox nbsp st表 success target .ajax //防止頁面進行跳轉 $(document).ready(function(){ $("#submit").click(function(
表單中的銀行卡格式輸入
blog 格式 max ace doc class maxlength tex his 1.這個功能需求還算比較多。 2.這個方法很簡潔。 1 <!DOCTYPE html> 2 <html> 3 <head> 4
datagrid中reoload提交時如何批量提交表單中的查詢條件
object orm arc 一個 表單 arch 復雜 查詢 直接 看標題描述有點復雜,看下圖: 直接將手工添加的一個個字段直接用一句代碼完成。 $(‘#dg_sub‘).datagrid("reload",$(‘#searchForm‘).serializeOb
SpringMVC表單中post請求轉換為put或delete請求
hidden delet path web 需要 轉化 value 參數 text 1.在web.xml文件中配置 1 <!-- HiddenHttpMethodFilter過濾器可以將POST請求轉化為put請求和delete請求! -->
表單中的添加,新增數據-測試思考點
nbsp es2017 src 新增 http ges 9.png 測試 alt 表單中的添加,新增數據-測試思考點
【轉載】表單中 Readonly 和 Disabled 的區別
作用 .net 單元 ont 應該 表單元 als 利用 取數 今天寫代碼,遇到表單提交的問題,某個字段在不同的情況下,要傳遞不同的值進行賦值,試過一些方法都有些問題,後來請教前端同學,使用 disabled 這個屬性終於搞定了問題,查到一篇講解 readonly 和 di
form表單中get和post兩種提交方式的區別
name bsp inpu get div post input 普通 表單 一、form表單中get和post兩種提交方式的區別? 1.get提交表單中的內容在鏈接處是可見的。post不可見 2.post相比於get是安全的 3.post不收限制大小,get有
form表單中多個button按鈕必須聲明type類型
orm 管理系 多個 分享 com 圖片 log bmi 一個 最近在做一個後臺管理系統,發現了一個小bug: 問題描述:form表單中有多個button按鈕(以下圖為例),如果第一個button不寫type屬性,那麽點擊第一個button按鈕會觸發submit事件; 解決
Restful風格,PUT修改功能請求,表單中存在文件報錯-HTTP Status 405 - Request method 'POST' not supported
for 文件的 文件 roo spring commons 容量 put common 解決方案配置如下 <!-- 配置文件上傳解析器 --> <bean id="multipartResolver" class="org.spri
servlet表單中get和post方法的區別
pos span 轉化 不可見 上傳文件 post div font 支持 Form中的get和post方法,在數據傳輸過程中分別對應了HTTP協議中的GET和POST方法。二者主要區別如下:1、Get是用來從服務器上獲得數據,而Post是用來向服務器上傳遞數據。2、Get
form表單中的input有哪些類型
span 添加圖片 選擇 password blog radi -s -a 圖片 text:文本框password:密碼框radio:單選按鈕checkbox:復選框file:文件選擇域hidden:隱藏域button:按鈕reset:重置按鈕submit:表單提交按鈕im
form表單中隱藏類型input的使用
rec box resp quest param value 數據 parameter == <form action="PersonSave.ashx" method="post"> <input type="hidden" name=
form表單中的enctype 屬性
用法 學習 www. enc 思考 需求 urlencode ron 應該 對於form表單中的enctype 屬性之前理解的一般,就知道是類似於一種編碼形式。後來公司做一個form表單提交數據的時候,重點是這個form表單裏有文件上傳,而我又要用vue來模擬form表單提
js 監測from表單中的input和select,時時監測,沒有輸入或選擇信息報錯,不允許提交數據
height ssss txt input OS 表達 tip eight html 1.html 代碼為 在input和select同級元素中添加 .error的標簽,用來存放報錯信息 <form action="" method="post" enctype="
在一個form表單中實現多個submit不同的action
var ctype 編號 表單 顯示 col 格式 action 否則 在button中用JS的事件綁定onclick實現,如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "