javascript 页面控制常用

最新推荐文章于 2025-08-14 17:31:00 发布

最新推荐文章于 2025-08-14 17:31:00 发布 · 119 阅读

文章标签：

#javascript #java #ViewUI

javascript 专栏收录该内容

102 篇文章

订阅专栏

本文介绍了一个包含HTML页面元素操作的示例，展示了如何通过JavaScript来动态地改变下拉列表的内容，隐藏显示表单元素，并对表格行进行增删操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
html {height:100%; overflow-x: auto; overflow-y: auto; }
body{
  height:100%;
  border:0px;
  background:url(<%=request.getContextPath()%>/resources/image/images/a_91.jpg) repeat-x;
  background-color: #ffffff;
  margin:0px;
  padding:0px;
}
iframe{
  margin:0px;
  padding-left:0px;
  padding-right:0px;
  border-left:0px;
  border-right:0px;
  overflow-y: hidden;
}

</style>
</head>
<body onload="">
<script type="text/javascript">
var flag = true;

window.onload=function(){
  var selectObj=document.getElementById('shengda');
  //for(var i=0;i<selectObj.options.length;i++){
   //if("2"==selectObj.options[i].value){
    //selectObj.options[i].selected=true;
   //}
  //}
  selectObj.selectedIndex = 2;
}
function getInfo(){
  var select = document.getElementById("shengda");
  var value = document.getElementById("shengda").value;
  var text = document.getElementById("shengda").options[document.getElementById("shengda").selectedIndex].text;
  document.getElementById("shengda").selectedIndex = 0;// 第一个被选中
  var option = document.createElement("option");
  option.value = "text";
  option.text = "这是创建的option";
  select.add(option);
}
function delSelectOpt(){
  var select = document.getElementById("shengda");
  for(var i = 0;i<select.options.length ; i++){
   if(select.options[i].selected){
    select.options.removed(i);
   }
  }
}
function hideC1(formObj){

  var els = formObj.elements;
  for(var i=0;i<els.length;i++) {
   if(els[i].type!="hidden" && els[i].type!="button" && els[i].type!="radio"){
    els[i].value = "";
   }
   //alert(els[i].value+"--"+els[i].type);
   if(els[i].type=="radio"){

    if(els[i].value == "2")
     els[i].checked = true;
    else
     els[i].checked = false;
   }

  }

  if(flag){
   document.getElementById("contain1").style.display="none";
   flag = false;
  }else{
   document.getElementById("contain1").style.display="block";
   flag = true;
  }

}

function delTest(obj){
  var currRowIndex = tbcontent.rows.length;
  var trNode = obj.parentNode.parentNode;
  //alert(trNode.sectionRowIndex);索引从0开始
  if(currRowIndex>1){
   tbcontent.deleteRow(trNode.sectionRowIndex);//直接使用tbody的id属性
  }else{
   alert("最少保留一行");
  }
}
</script>
<select id="shengda" onchange="delSelectOpt()">
<option value="1">zengshaotao</option>
<option value="2">test</option>
<option value="3">test1</option>
</select>

<input type="button" value="测试很多问题" onclick="javascript:getInfo()">
<br>
<a href="#">连接需要东西,没有文字，链接没有了意义,标签之中的内容是链接的载体</a>
<p>表单控件的内容对象才会提交到服务端。div只是起到了一个容器的作用
<br>可以直接对标签进行css的定义
<form name="" action="" method="">
<div id="contain1">
  <input type="text" value="1"/>
  <input type="text" value="11"/>
</div>
<div id="contain2">
  <input type="text" value="2" />
  <input type="text" value="22" />
</div>
<input type="radio" value="1" name="sex">男
<input type="radio" value="2" name="sex">女
<br>
<input type="button"" value="contain1" onclick="hideC1(this.form)"/>
<input type="button"" value="contain2"/>
</form>

</body>

</html>