有关js方面知识的整理

最新推荐文章于 2023-12-09 15:24:20 发布
最新推荐文章于 2023-12-09 15:24:20 发布
阅读量996 收藏
点赞数
分类专栏： JavaScript 文章标签： class div input c border textbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xue_feitian/article/details/5983080
版权

1、

框架大概是这样的
<frameset rows="*" cols="162,*">
  <frame src="left.html" name="leftFrame" id="leftFrame" />
  <frame src="main.html" name="mainFrame" id="mainFrame" />
</frameset>

 

window.parent.frames[‘leftFrame’]
window.parent.frames[‘mainFrame’]

 

document.frames["main"].contentWindow.document.getElementById('控件的ID');//获取iframe控件的值
父控件的值
window.parent.frames[""]

-------------------------------------------------------------------------------------------------------------------------------------

2、含有隐藏控件时 js如何判断隐藏的控件是否处于试用状态 是否需要进行验证

隐藏的控件：

  <c:if test="${not empty error}">
    <tr>
  <td height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">文件路径</span></div></td>
        <td  height="20" bgcolor="#FFFFFF" class="STYLE6" ><div align="left">
           <input type="text" name="Path" id="Path" size="35" value="<%=paths %>"/> <span style="color:red">*&nbsp;</span>
         </td>
     </tr>
         </c:if>

判断隐藏的控件是否处于试用状态：

  var mark = document.getElementsByName("Path");  若mark.length <0则表示处于隐藏状态 目前没有使用

                                                                                     若mark.length>0则表示目前处于试用状态 需要对其进行是否为空的验证

------------------------------------------------------------------------------------------------------------------------------------

3、 含有隐藏控件时的 js判断是否为空的验证

var mark = document.getElementsByName("Path");
 if(isNull("upStatus")&& mark.length <= 0){
  alert("请先上传或者填写路径！");
     return false;
 }
 
  if(mark.length>0){
  if(isNull("name")){
     alert("文件名为必填项！");
  document.getElementById("name").focus();
     return false;
     }
  }

------------------------------------------------------------------------------------------------------

4、js中表单的提交方式：

document.activityForm.action="activityAction.do?functionType=upLoadFile";
 document.activityForm.submit();  ----其中的activityForm是表单的名称

原来el接收参数也可以用在js中啊：

document.fundsForm.action="fundsAction.do?functionType=fundsCheck&applicationID=${fundsForm.applicationID}&approveState=2";

-------------------------------------------------------------------------

JS 动态给表格增加/删除一行

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态给表格增加/删除一行</title>
</head>
<script language=javascript>
allCount=1
function addline()
{
 newRow=listtable.insertRow(listtable.rows.length);
 newRow.ln=allCount;
 newRow.id=allCount;
 c1=newRow.insertCell(0);
 c1.bgColor="#FFFFFF";
 c1.innerHTML="<input size=10 name=sClass"+allCount+">";
 c2=newRow.insertCell(1);
 c2.bgColor="#FFFFFF";
 c2.innerHTML="<input size=10 name=sMaterial"+allCount+">";
 c3=newRow.insertCell(2);
 c3.bgColor="#FFFFFF";
 c3.innerHTML="<input size=10 name=sSpec"+allCount+">";
 c4=newRow.insertCell(3);
 c4.bgColor="#FFFFFF";
 c4.innerHTML="<input size=10 name=sPrice"+allCount+">";
 c5=newRow.insertCell(4);
 c5.bgColor="#FFFFFF";
 c5.innerHTML="<input size=10 name=sAmount"+allCount+">";
 c6=newRow.insertCell(5);
 c6.bgColor="#FFFFFF";
 c6.innerHTML="<input size=10 name=sFactory"+allCount+">";
 c7=newRow.insertCell(6);
 c7.bgColor="#FFFFFF";
 c7.innerHTML="<input size=10 name=sDeliveryPlace"+allCount+">";
 c8=newRow.insertCell(7);
 c8.bgColor="#FFFFFF";
 c8.innerHTML="<input size=10 name=sNotes"+allCount+">";
 c9=newRow.insertCell(8);
 c9.bgColor="#FFFFFF";
 c9.align="CENTER";
 c9.innerHTML="<input type=checkbox value=t checked name=cPub"+allCount+">";
 c10=newRow.insertCell(9);
 c10.bgColor="#FFFFFF";
 c10.align="CENTER";
 c10.id="line"+allCount;
 c10.innerHTML="<input type=button value=删除 οnclick=delline(line"+allCount+")>";
 c11=newRow.insertCell(10);
 c11.bgColor="#FFFFFF";
 c11.align="CENTER";
 c11.innerHTML="<input type=button value=插入 οnclick=insertline(line"+allCount+")>";
 allCount++
}
function insertline(lineid)
{
 for(i=0;i<listtable.rows.length;i++)
 {
  if(listtable.rows[i].cells[9].id==lineid.id)
  {
   newRow=listtable.insertRow(i);
   newRow.ln=allCount;
   newRow.id=allCount;
   c1=newRow.insertCell(0);
   c1.bgColor="#FFFFFF";
   c1.innerHTML="<input size=10 name=sClass"+allCount+">";
   c2=newRow.insertCell(1);
   c2.bgColor="#FFFFFF";
   c2.innerHTML="<input size=10 name=sMaterial"+allCount+">";
   c3=newRow.insertCell(2);
   c3.bgColor="#FFFFFF";
   c3.innerHTML="<input size=10 name=sSpec"+allCount+">";
   c4=newRow.insertCell(3);
   c4.bgColor="#FFFFFF";
   c4.innerHTML="<input size=10 name=sPrice"+allCount+">";
   c5=newRow.insertCell(4);
   c5.bgColor="#FFFFFF";
   c5.innerHTML="<input size=10 name=sAmount"+allCount+">";
   c6=newRow.insertCell(5);
   c6.bgColor="#FFFFFF";
   c6.innerHTML="<input size=10 name=sFactory"+allCount+">";
   c7=newRow.insertCell(6);
   c7.bgColor="#FFFFFF";
   c7.innerHTML="<input size=10 name=sDeliveryPlace"+allCount+">";
   c8=newRow.insertCell(7);
   c8.bgColor="#FFFFFF";
   c8.innerHTML="<input size=10 name=sNotes"+allCount+">";
   c9=newRow.insertCell(8);
   c9.bgColor="#FFFFFF";
   c9.align="CENTER";
   c9.innerHTML="<input type=checkbox value=t checked name=cPub"+allCount+">";
   c10=newRow.insertCell(9);
   c10.bgColor="#FFFFFF";
   c10.align="CENTER";
   c10.id="line"+allCount;
   c10.innerHTML="<input type=button value=删除 οnclick=delline(line"+allCount+")>";
   c11=newRow.insertCell(10);
   c11.bgColor="#FFFFFF";
   c11.align="CENTER";
   c11.innerHTML="<input type=button value=插入 οnclick=insertline(line"+allCount+")>";
   allCount++
   return;
  }
 }
}
function delline(lineid)
{
 for(i=0;i<listtable.rows.length;i++)
 {
  for(j=0;j<listtable.rows[i].cells.length;j++)
  {
   if(listtable.rows[i].cells[j].id==lineid.id)
   {
    listtable.deleteRow(i);
    return;
   }
  }
 }
}
</script>

<body>
  <table width=700 height="20" border="0" align="center" cellpadding=0 cellspacing=0 id=listtable>
  <tr align=center height=20>
  <td bgcolor=#FFFFFF><b>品名</b></td>
  <td bgcolor=#FFFFFF><b>材质</b></td>
  <td bgcolor=#FFFFFF><b>规格</b></td>
  <td bgcolor=#FFFFFF><b>价格</b></td>
  <td bgcolor=#FFFFFF><b>数量</b></td>
  <td bgcolor=#FFFFFF><b>产地</b></td>
  <td bgcolor=#FFFFFF><b>交货地</b></td>
  <td bgcolor=#FFFFFF><b>备注</b></td>
  <td bgcolor=#FFFFFF><b>发布</b></td>
  <td bgcolor=#FFFFFF><b>-</b></td>
  <td bgcolor=#FFFFFF><b>-</b></td>
  </tr>
</table>
 <table width="700" height="25" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr><td align="center"><input type=button value=增加一行 οnclick=addline()></td>
 </tr>
</table>
</body>
</html>

 

动态增加表格的一行

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'MyJsp.jsp' starting page</title>
<script type="text/javascript">
function add( ) {
  //在指定id的table中插入一行
  var tb = document.getElementById("tab");
  var rnum = tb.rows.length;//判断table有多少行

  var nextrow = tb.insertRow(rnum);
  //需要几列就插入列
  textArea0 = nextrow.insertCell(0);
  textArea1 = nextrow.insertCell(1);
  textArea2 = nextrow.insertCell(2);
  textArea3 = nextrow.insertCell(3);
  textArea4 = nextrow.insertCell(4);
  textArea5 = nextrow.insertCell(5);
  rnum++;
  rnum = rnum.toString();
   var str = "<input type='text' name='textfield3' size='20' id='textbox"+rnum+"'/>";   
   var str1 = "<input type='text' name='textfield3' size='30' id='textbox"+rnum+"'/>";            
  
    textArea0.innerHTML =str;
    textArea1.innerHTML =str1;
    textArea2.innerHTML =str;
    textArea3.innerHTML =str1;
    textArea4.innerHTML =str1;
    textArea5.innerHTML =str1;
}

</script>
  </head> 
 <body>
<div align="center" class="STYLE1">
  <p>在线报名表</p>
  <form id="form1" name="form1" method="post" action="">
  <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce" id="tab" >
    <tr>
      <td height="39"  width="96%" colspan="8" bgcolor="#d3eaef"><div align="center"><span class="STYLE3">
      <textarea name="titles" id="titles"></textarea></span></div></td>
    </tr>
    <tr>
      <td width="12%"  bgcolor="#d3eaef"><div align="left"><span class="STYLE3">单位名称：</span></div></td>
      <td width="36%" colspan="3" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
        <input name="textfield" type="text" size="30" />
        </span></div></td>
      <td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">通讯地址：</span></div></td>
      <td width="36%" colspan="3" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
        <input name="textfield2" type="text" size="30" />
      </span></div></td>
    </tr>
    <tr>
    
    </tr>
    <tr>
      <td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE6">电子邮箱：</span></div></td>
      <td width="84%" colspan="7" bgcolor="#FFFFFF"><div align="left"><span class="STYLE6">
        <input name="textfield2" type="text" size="30" />
      </span></div></td>
    </tr>
    <tr >
      <td width="24%" colspan="2" bgcolor="#d3eaef"><span class="STYLE3">联系人：</span></td>
   
      <td width="24%" colspan="2" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">电话：</span></div></td>
      <td width="24%" colspan="2" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">传真：</span></div></td>
       <td width="24%" colspan="2" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">邮编：</span></div></td>
    </tr>
    <tr>
     <td colspan="2" bgcolor="#FFFFFF">
        <input name="textfield3" type="text" size="20" />
     </td>
         <td colspan="2" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
     区号：   <input name="textfield3" type="text" size="20" />
      </span></div></td>
        <td colspan="2" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
     区号：   <input name="textfield3" type="text" size="20" />
        <td colspan="2" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
        <input name="textfield3" type="text" size="20" />
      </span></div></td>
    </tr>
    <tr>
      <td bgcolor="#d3eaef" colspan="8"><div align="left"><span class="STYLE3"><input type="button" name="name" id="name" οnclick="add('tab')" value="新增编辑域"/></span></div></td>
      </tr>
    <tr>
      <td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">序号：</span></div></td>
      <td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">姓名:</span></div></td>
      <td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">性别：</span></div></td>
      <td width="24%" bgcolor="#d3eaef" colspan="2"><div align="left"><span class="STYLE3">职务/职称</span></div></td>
      <td width="24%" bgcolor="#d3eaef" colspan="2"><div align="left"><span class="STYLE3">工作单位</span></div></td>
      <td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">联系方式</span></div></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
        <input name="textfield54" type="text" size="20" />
      </span></div></td>
       <td bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
        <input name="textfield54" type="text" size="30" />
      </span></div></td>
       <td bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
        <input name="textfield54" type="text" size="20" />
      </span></div></td>
       <td bgcolor="#FFFFFF" colspan="2"><div align="left"><span class="STYLE3">
        <input name="textfield54" type="text" size="30" />
      </span></div></td>
       <td bgcolor="#FFFFFF" colspan="2"><div align="left"><span class="STYLE3">
        <input name="textfield54" type="text" size="30" />
      </span></div></td>
       <td bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
        <input name="textfield54" type="text" size="30" />
      </span></div></td>
      </tr>
  </table>
  </form>
  <p>&nbsp;</p>
</div>
</body>
</html>
----------------------------------------------

6、 js控制显示的表单

function readonlytag(sec){

var appType=sec.value;
 var tbl1 = document.getElementById("tbl1");
 var tbl2 = document.getElementById("tbl2");

if(appType==0){
  tbl1.style.display="block";
  tbl2.style.display="none";

}

if(appType==0){
  tbl1.style.display="none";
  tbl2.style.display="block";

}

jsp内容：

<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce" >

       <tr>
    <td >申请类型</td>
      <td><select name="appType" id="appType" οnchange="readonlytag(this)">
            <c:forEach items="${appTypeList}" var="code">
         <option  value="${code.codeNo}">   ${code.content}
                     </option>
                   </c:forEach>
                 </select>
       </td>
    </tr>
  </table>

  <table style="display:block" id="tbl1" ></table>

  <table style="display:block" id="tbl2"></table>

 

JavaScript基础知识整理
02-26
JavaScript是一种广泛应用于前端开发的直译式脚本语言，它基于对象、事件驱动，并具有安全性。JavaScript主要在浏览器环境中运行，被解释执行，用于增强网页的...了解并掌握这些基础知识，对于进行前端开发至关重要。
javascript基础知识整理
10-29
JavaScript是Web开发中不可或缺的一部分，尤其对于初学者来说，掌握其基础知识至关重要。下面将详细讲解JavaScript的基础知识，包括创建脚本、隐藏脚本、处理浏览器兼容性问题、链接外部脚本、注释、输出到浏览器、...
js常用方法总结
weixin_45591016的博客
11-13 193
jsp jsp 文件头 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <%@ taglib prefix="fmt" uri="http://j...
request.getScheme()的使用方法
try_and_do的博客
10-24 1746
&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;%@ page isELIgnored="false" %&gt; &lt;%@taglib uri="http://java.sun.com/jsp/jstl/core&quo
request.getScheme() 使用方法
热门推荐
zy18729286306的专栏
03-20 3万+
今天在看代码时，发现程序使用了 request.getScheme() 。不明白是什么意思，查了一下。结果整理如下： 1、request.getScheme() 返回当前链接使用的协议；一般应用返回http;SSL返回https; 2、在程序中的应用如下： String path = request.getContextPath(); String basePath = r
如何获取URL链接是http还是https
vividly的学习小站
06-23 2万+
如题： 一般在后端有三种方式获取。 1，JAVA截取链接地址。 String URL = request.getRequestURL().toString(); if(!URL.startsWith("https:")) { System.out.println("HTTPS"); } 2，JAVA获取协议 if("http".equals(reque
js基础知识整理之 —— Math
monkey7
07-27 192
js基础知识总结 Math的使用
js基础知识整理之 —— 闭包
monkey7
07-28 160
什么叫做闭包 闭包的作用
JavaScript基础知识整理（最全知识点, 精简版，0基础版）
最新发布
xiaoxie_life_study
12-09 706
JavaScript基础知识整理（最全知识点, 精简版，0基础版）本片博客介绍了JavaScript的基础知识的内容，是自己学完后的总结，希望也可以帮助正在学习的你，后续也会继续更新js高级的相关知识。
JS基础知识整理
QTFYING的博客
04-02 292
1.while循环 2.for循环 3.定义函数 4.函数表达式 5.变量的范围 6.创建一个对象 7.对象中的数组 8.更新与删除对象中的属性 9.为对象添加方法 10.循环输出对象的属性 11.querySelector和querySelectorAll 12.访问元素的属性 nodename 元素节点名称 innerText 元素内容 paren...
js基础知识整理之 —— 五种输出方式
monkey7
07-28 1233
js的五种输出方式
Javascript基础知识整理.doc
11-27
Javascript基础知识整理 JavaScript是一种高级的、动态的、弱类型的编程语言，主要用于客户端脚本编程。它可以在浏览器中执行，实现网页的交互性和动态效果。本文将对JavaScript的基础知识进行整理和总结，包括脚本...
tomcat中的server.xml中的配置文件中<Host appBase="webaps"修改appBase引起的路问题
xue_feitian的专栏
11-01 2万+
为了实现项目访问时可地址以直接通过访问ip和端口号就能直接访问 也就是直接访问http://localhost:8080/   而不用这样：http://localhost:8080/gxedu  项目名称是：gxedu  现在将tomcat中的server.xml中的  unpackWARs="true" autoDeploy="true"  xmlValidation="false" xmlNamespaceAware="false">  改成如下：  unpackWARs="true" autoDep
cookie的操作 添加 获取 删除cookie
xue_feitian的专栏
08-02 4043
cookie的操作 添加 获取 删除cookie 每个web服务器保存的cookie数不能超过20个 浏览器保存cookie不能超过300个 每个cookie保存的数据不能超过4kb 是不是你保存的数据量过大了 除了名字与值外，每个cookie都有四个可选的属性，分别是e
js闭包的研究
xue_feitian的专栏
08-16 746
在看书遇到了讲解js闭包的地方，讲的太学术了 根本不明白 最近在网上搜集了些资料 发现了一些通俗易懂的讲解 终于弄明白了 要理解闭包，首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种：全局变量和局部变量。 Javascript语言的特殊之处，
<a href="#" 与<a href="javascript:void(0)"的区别
xue_feitian的专栏
12-28 593
a href=#与 a href=javascript:void(0) 的区别＃包含了一个位置信息<br />默认的锚点是＃top 也就是网页的上端<br />而javascript:void(0)  仅仅表示一个死链接<br />这就是为什么有的时候页面很长浏览链接明明是＃可是却跳动到了页首<br />而javascript:void(0) 则不是如此 <br />所以调用脚本的时候最好用void(0)<br />或者<input onclick><br /><div onclick>等<br />
javascript中的继承
xue_feitian的专栏
07-19 466
js中定义类或对象一般使用“构造函数+原型”方式：用构造函数定义所有非方法的成员，用原型定义方法成员 js中的继承有三种方法，对象冒充，原型链，对象冒充+原型链/**  1、对象冒充   将Parent中执行的this绑定到对象child上 //写法1function Paren
JavaScript基础知识整理：了解JavaScript的基本结构和使用方法
通过掌握JavaScript的基础知识和技能，可以打开更广阔的web开发世界，实现更多更复杂的功能和效果。JavaScript的应用场景非常广泛，涵盖了网页动态效果、表单验证、数据处理、接口调用等方方面面，是web开发者必备的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值