js動態控制表單的tr，td的顯示和隱藏
無論是事先寫好的，還是動態生成的，要找到指定的tr或td都必須知道其相關的一個屬性，未必必須是id或name，然後無論是在一個table還是多個 table都可以通過document.getElementsByTagNames( "tr ")或td，取得集合，……再根據知道的屬性再找，最後設定顯示/隱藏
方法一：
document.getElementById( "控制元件ID ").style.visibility= "hidden ";
document.getElementById( "控制元件ID ").style.visibility= "visible ";
方法二：
document.getElementById( "控制元件ID ").style.display= "none ";
document.getElementById( "控制元件ID ").style.display= "inline ";
方法一隱藏後 頁面的位置還被控制元件佔用 只是不顯示 類似於.net驗證控制元件的Display=Static
方法二隱藏後 頁面的位置不被佔用 類似於.net驗證控制元件的Display=Dynamic
我寫的一個根據下拉選單的不同選擇值來顯示下邊的一個input表單的顯示和隱藏
js：
function listchange(){
var sel=document.getElementsByName('tasklist_type');
for(var i=0;i<tasklist_type.options.length;i++)
{
if(tasklist_type.options[i].selected)
{
if(tasklist_type.options[i].value==0){
document.getElementById( "tasklistoriginalno").style.display= "none";
document.getElementById("tasklist_originalno").value = "";
/*上面紅色的這句話用處很大的，因為你想隱藏掉下面的一個表單，那麼這個表單的值也就不需要寫入資料庫了，所以記得在隱藏的同時將被隱藏表單的值清空；當然要是你不嫌麻煩的話在表單的資料提交到php的資料處理頁面的時候對
tasklist_type根據其值是0還是1來行進判斷寫不寫入
tasklist_originalno
的值
*/
}
if(tasklist_type.options[i].value==1){
document.getElementById( "tasklistoriginalno").style.display= "";
}
}
}
}
html：
<tr height='30'>
<td> <{$lang_tasklist_type}>: </td>
<td>
<select name="tasklist_type" id="tasklist_type" onchange="listchange();return false;">
<option value="null" ><{$lang_tasklist_sel}></option>
<option value="0" ><{$lang_tasklist_common}></option>
<option value="1" ><{$lang_tasklist_supplement}></option>
</select>
</td>
</tr>
<tr height='30' id='tasklistoriginalno'>
<td> <{$lang_tasklist_originalno}>:</td>
<td colspan='3'><input type='text' id='tasklist_originalno' name='tasklist_originalno'/></td>
</tr>
---------------------------------------------------------------------------------------------
上面的程式碼在IE6和FF下都能成功實現效果，但是在IE8下不能得到相應的效果，原因出在在IE8下用上面的程式碼無法獲取到下拉列表的值，經測試下面的程式碼可以：
js
function listchange()
{
var sel=document.getElementsByName("tasklist_type")[0].value;
//獲取下拉表單的value值
if(sel=='0')
{
document.getElementById( "tasklistoriginalno").style.display= "none"; //隱藏id為tasklistoriginalno的td
document.getElementById("tasklist_originalno").value = ""; //並將其值賦為空
}
if(sel=='1')
{
document.getElementById( "tasklistoriginalno").style.display= ""; //當下拉表單的值為0時顯示
}
}
下面是測試的例子，也是我在網上看到的，我們將其copy到儲存到一個html頁面中在IE8下開啟，OK：
<!--有表單---->
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<script type="text/javascript">
function optChange(){
var name=document.areaName.area.options[document.areaName.area.selectedIndex].text;
alert(name);
}
</script>
<body>
<form name="areaName">
<select name="area" onchange="optChange()">
<option value="上海">上海</option>
<option value="南京">南京</option>
<option value="北京">北京</option>
<option value="成都">成都</option>
<option value="長沙">長沙</option>
<option value="山西">山西</option>
</select>
</form>
</body>
</html>
<!---無表單--->
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<script type="text/javascript">
function optChange(){
var name=document.getElementsByName("area")[0].value;
alert(name);
}
</script>
<body>
<select name="area" onchange="optChange()">
<option value="上海">上海</option>
<option value="南京">南京</option>
<option value="北京">北京</option>
<option value="成都">成都</option>
<option value="長沙">長沙</option>
<option value="山西">山西</option>
</select>
</body>
</html
相關推薦
js動態控制table的tr，td增加及刪除
html： <table id='wifi_clients_table' style="color:#0099CC;font-size:12px;" class="table table-striped table-bordered tabl
js動態控制表單的tr，td的顯示和隱藏
無論是事先寫好的，還是動態生成的，要找到指定的tr或td都必須知道其相關的一個屬性，未必必須是id或name，然後無論是在一個table還是多個 table都可以通過document.getElementsByTagNames( "tr ")或td，取得集合，……再根據知道
js動態控制表單的顯示和隱藏
文章一： 無論是事先寫好的，還是動態生成的，要找到指定的tr或td都必須知道其相關的一個屬性，未必必須是id或name，然後無論是在一個table還是多個 table都可以通過document.getElementsByTagNames( "tr ")或td，取得集合，……
js控制表單提交，新視窗開啟
今天做網銀支付的時候，需要做到點選支付的時候提交訂單，然後新視窗開啟支付介面。 思路1：window.open(''),這個直接被pass了，因為銀行的服務一般都是需要post資料的。就算是可以用get傳遞引數，window.open會被大部分瀏覽器攔截彈窗； 思路2
JS動態生成表單，並新增行雙擊事件
//獲取某一出庫型別某日期所有出庫單 累計金額列表function getOutSheetAmtList(){ var hosnum=$('#hosnum').val(); var sdate=$('#sdate').val();//記賬日期 始 var edate=$('#eda
table標籤中新增input表單時，td會發生變化
1、在table標籤中設定 style = "table-layout:fixed " 2、在第一個tr標籤中td設定 width 固定長度或比例 ，第一個tr標籤中的td不要使用 colspan <table style = "table-layo
一個form表單中，上傳和接收多個相同的name欄位引數
一般我們在同一個表單中，都會提交不同的name欄位。可是，我遇到了提交相同欄位的情況，例子如下： <form action="test_receive.php" method="post"> <div> <
使用js控制表單重複提交（1加鎖，2事件方式，3 EasyUI中解決表單重複提交）
方法一、var flag = true; $(function() { $("#interested").click(function() { beInterested(); }); }); function beInterested() { //$("#inte
js 監測from表單中的input和select，時時監測，沒有輸入或選擇信息報錯，不允許提交數據
height ssss txt input OS 表達 tip eight html 1.html 代碼為 在input和select同級元素中添加 .error的標簽，用來存放報錯信息 <form action="" method="post" enctype="
Django通過Ajax利用FormData動態提交表單（包括檔案，字串）
0 需求背景 有的時候我們上傳表單，經過後臺處理之後再分發回原來頁面，這時必定會重新整理這個頁面。為了解決這個問題，我們採用JS動態提交表單元素，如：file、text等型別，可以很好的解決這一問題。 1 DOM結構 <form method="post" enctype=
在JS中模擬表單的post提交，進行頁面的跳轉
封裝為Post(URL, PARAMTERS) 函式： /* *功能： 模擬form表單的提交 *引數： URL 跳轉地址 PARAMTERS 引數 */ function Post(URL
js控制表單奇偶行樣式
一、如果使用JQuery的話可以直接JQuery的 $("tr:odd").addClass("clazzName"); $("tr:even").addClass("clazzName"); 二、如果是使用純js的話 1.先獲取table標籤，var table = document.getEle
JQuery 動態建立表單，並自動提交
前言：寫這個是為了實現使用cookie進行自動登入的功能， 下面的程式碼是一個元素一個元素進行建立和賦值的， (可以嘗試下將所有的html程式碼(form、input）全部拼好以後放到${ } 中，再進行提交。) submit的時候注意下寫法，就這樣 //獲取cookie中的
js動態生成勾選框，可單選可多選
1、動態生成的位置，html程式碼： <body> <div class="show" id="show"> </div> </body> 2、這是ajax()的一部分，從資料庫取得所需的資料succes
利用JS實現按鈕onclick提交表單時，按鈕無法響應問題
<%@page import="dao.library.com.UserDao"%> <%@page import="java.util.List"%> <%@page import="entity.library.com.User"%>
js提交form表單，並傳遞引數
//增加的函式 begin function queryFun(){ var type = $("#artType").val(); var hasInputed = "1";//表示輸入了要搜尋 的資訊 if($("#query").val()=="選手姓名/編號"){
js通過後臺數據回填form表單時，select和radio選中問題
以select為例，radio類似 js通過後臺數據回填form表單時，設定select選中時，發現只能有一次有效，第二次就不能正常選中select了，問題是在select有2個被設定成了： selected = "selected" 所以在設定select屬性之前需要
js 拼接 當前系統時間 動態提交表單！
<!--這是html內容--> <li class="leftmenuli_2"><a href="#" id="emppro"><s:text name="
利用js編寫一個簡單的html表單驗證，驗證通過時提交資料(附原始碼)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
js 簡單實現表單資料的增添，單項刪改，多項刪除，修改以及全選功能
// 新增商品函式 function add(){ // 獲取表單元素 var table = document.getElementById("order"); // 以表單的行數為索引插入行