`

HTM中几个常用的Element的Javascript用法（Form，Table，List）

JavaScriptHTMLTableFormList 
阅读更多

Form in HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A sample Form Using Get</title>
</head>
<body BGCOLOR="#FDF5E6">
	<h2 Align="center">A Sample Form Using Get</h2>
	<form id="infoForm" method="get" action="parameters">
		First name: <input id="firstName" type="text" name="firstName"
			value="Jingyang" /><br /> Last name: <input id="lastName" type="text"
			name="lastName" value="Yu" />
		<p />

		<input type="radio" name="sex" id="male" value="male"/>Male<br /> <input
			type="radio" name="sex" id="female" value="female"/>Female
		<p />

		<input type="checkbox" name="vehicle" value="Bike" id="bike" />I have
		a bike<br /> <input type="checkbox" name="vehicle" value="Car"
			id="car" onclick="displayCarSelect()" />I have a car <select
			name="cars" style="display: none" id="carSelect">
			<option value="volvo">Volve</option>
			<option value="audi">Audi</option>
			<option value="bmw">BMW</option>
			<option value="vw">VW</option>
		</select>
		<p />
		<p />

		<input type="button" value="submit" id="sub"/>
	</form>
</body>
</html>
	<script type="text/javascript">
		function displayCarSelect() {
			if (document.getElementById("car").checked)
				document.getElementById("carSelect").style.display = "block";
			else
				document.getElementById("carSelect").style.display = "none";
		}

		function trim(s) {
			return s.replace(/^\s*/, "").replace(/\s*$/, "");
		}

		function check() {
			var firstName = document.getElementById("firstName").value;

			var form = document.getElementById("infoForm");
			var lastName = form.lastName.value;
			var error = "";

			if (trim(firstName) == null || trim(firstName) == "") {
				error += "\n first name can not be empty";
				form.firstName.focus();
			}
			if (trim(lastName) == null || trim(lastName) == "") {
				error += "\n last name can not be empty";
				form.lastName.focus();
			}
			
			if(!document.getElementById("male").checked&&!document.getElementById("female").checked){
				error+="\n please select your sex";
			}
			if (error != "") {
				alert(error);
			} else {
				form.submit();
			}
		}
		document.getElementById("sub").onclick=check;
	</script>

  

 

Table in HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>access table element</title>
</head>
<body>
<div id="change">
Change the
<input id="rowToChange" type="number" size="2"/> row,
the <input id="colToChange" type="number" size="2" /> column with the value
<input id="value" type="text" size="16"/>   
<input id="btnChange" type="button" value="Change" onclick="change()"/>
</div>
<br/><br/>
<div id="insert">
Insert in the
<input id="rowToInsert" type="number" size="2"/> row,
with the First name: 
<input id="firstName" type="text" size="16"/> and the 
Last name: 
<input id="lastName" type="text" size="16"/>     

<input id="btnInsert" type="button" value="Insert" onclick="insert()"/>
</div>
<br/><br/>
<div id="delete">
Delete the
<input id="rowToDelete" type="number" size="2"/> row 
<input id="btnDelete" type="button" value="Delete" onclick="deleteRow()"/>
</div>
<br/><br/>
<div id="table">
<table id="t" border="1">
<caption>Name Table</caption>
<thead>
	<tr>
		<th>First Name</th>
		<th>Last Name</th>
	</tr>
</thead>
<tr>
	<td>Jingyang</td>
	<td>Yu</td>
</tr>
<tr>
	<td>Yufeng</td>
	<td>Guo</td>
</tr>
<tr>
	<td>Christian</td>
	<td>Meier</td>
</tr>
</table>
</div>
<br/><br/>
<div id="getValue">
Display the
<input id="rowToSelect" type="number" size="2"/> row,
the <input id="colToSelect" type="number" size="2" /> column with the value
<input id="btnGet" type="button" value="Get" onclick="get()"/><br/>
<textarea id="textForSelect" rows="2" cols="10" readonly></textarea>
</div>
</body>
</html>

 

<script type="text/javascript">
function get(){
	var table=document.getElementById("t");
	var row = document.getElementById("rowToSelect").value;
	row = parseInt(row);
	var col=document.getElementById("colToSelect").value;
	col= parseInt(col);
	
	if(isNaN(row)){
		alert("the input of the row must be a number");
		return false;
	}
	if(isNaN(col)){
		alert("the input of the column must be a number");
		return false;
	}
	
	if(row>table.rows.length ||col>table.rows.item(row-1).cells.length){
		alert("selected table cell is not exist");
		return false;
	}
	
	//alert( t.rows[row-1].cells[col-1].innerHTML);
	document.getElementById("textForSelect").innerHTML=t.rows[row-1].cells[col-1].innerHTML;
		
}

function change(){
	var table=document.getElementById("t");
	var row = document.getElementById("rowToChange").value;
	row = parseInt(row);
	var col=document.getElementById("colToChange").value;
	col= parseInt(col);
	
	if(isNaN(row)){
		alert("the input of the row must be a number");
		return false;
	}
	if(isNaN(col)){
		alert("the input of the column must be a number");
		return false;
	}
	
	if(row>table.rows.length ||col>table.rows.item(row-1).cells.length){
		alert("selected table cell is not exist");
		return false;
	}
	
	t.rows[row-1].cells[col-1].innerHTML = document.getElementById("value").value;
}

function trim(s) {
	return s.replace(/^\s*/, "").replace(/\s*$/, "");
}

function insert(){
	var table=document.getElementById("t");
	var row = document.getElementById("rowToInsert").value;
	row = parseInt(row);
	var firstName = document.getElementById("firstName").value;
	var lastName = document.getElementById("lastName").value;
	if(trim(firstName)==null||trim(firstName)==""){
		alert("first name can not be empty");
		return false;
	}
	if(trim(lastName)==null||trim(lastName)==""){
		alert("last name can not be empty");
		return false;
	}
	
	if(isNaN(row)){
		alert("the input of the row must be a number");
		return false;
	}
	if(row>table.rows.length){
		var r = confirm("the row number is bigger than the current table.\n"+"The value will be inserted into the end of the table");
		if(r==true){
			var r= table.insertRow(table.rows.length);
			r.insertCell(0).innerHTML = firstName;
			r.insertCell(1).innerHTML = lastName;
		}else{
			return false;
		}
	}
	var r= table.insertRow(row);
	r.insertCell(0).innerHTML = firstName;
	r.insertCell(1).innerHTML = lastName;
}

function deleteRow(){
	var table=document.getElementById("t");
	var row = document.getElementById("rowToDelete").value;
	row = parseInt(row);
	if(isNaN(row)){
		alert("the input of the row must be a number");
		return false;
	}
	if(row>=table.rows.length){
		var r = confirm("the row number is bigger than the current table.\n"+"The lat row will be deleted.");
		if(r==true){
			table.deleteRow(table.rows.length-1);
		}else{
			return false;
		}
	}
	
	var firstName = table.rows[row].cells[0].innerHTML;
	var lastName = table.rows[row].cells[1].innerHTML
	var r = confirm("Do you want to delete the name:'"+firstName+" "+lastName+"' in the table?" );
	if(r==true){
		table.deleteRow(row);
	}else{
		return false;
	}
}
</script>

 

List in HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample List</title>
</head>
<body>
<div id="list">
Courses:
<ul id="courses">
	<li>Software Engineering</li>
	<li>Database</li>
</ul>
</div>
<div id="insert">
Insert course's name into the list: 
<input type="text" id="value" size="20"/>   
<input type="button" id="btnInsert" value="Insert" onclick="insert()"/>
</div>
<br/><br/>
<div id="insertBefore">
Insert course's name on the top of the list : 
<input type="text" id="value2" size="20"/>   
<input type="button" id="btnInsertBefore" value="Insert Before" onclick="insertOnTop()"/>
</div>
</body>
</html>

 

<script type="text/javascript">
function trim(s) {
	return s.replace(/^\s*/, "").replace(/\s*$/, "");
}
	function insert(){
		var ul= document.getElementById("courses");
		var li = document.createElement("li");
		var value = document.getElementById("value").value;
		
		if(trim(value)==null||trim(value)==""){
			alert("can not insert cours without name");
			return false;
		}
		li.innerHTML= value;
		ul.appendChild(li);
	}
	
	function insertOnTop(){
		var ul= document.getElementById("courses");
		var li = ul.firstChild.nextSibling.cloneNode(false);
		var value = document.getElementById("value2").value;
		if(trim(value)==null||trim(value)==""){
			alert("can not insert cours without name");
			return false;
		}
		li.innerHTML= value;
		ul.insertBefore(li,ul.firstChild);
	}
</script>

 

分享到：
| Ajax创建XMLHttpRequest
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    【JavaScript源代码】element-ui中el-upload多文件一次性上传的实现.docx

    在JavaScript和前端开发中，Element-UI是一个流行的UI组件库，它提供了丰富的界面元素和交互功能。在处理文件上传时，Element-UI的`el-upload`组件默认情况下会对每个文件发送单独的上传请求。然而，有时我们需要将...

    网页设计实验 Javascript的使用

    在网页设计实验中，JavaScript的使用通常涉及到以下几个方面： 1. **创建表格**：在HTML中，表格是由`&lt;table&gt;`元素定义的，`&lt;tr&gt;`代表表格的一行，`&lt;td&gt;`代表表格的一个单元格。如果希望某列数据加粗显示，可以使用...

    webwork 中table动态增加行列

    这个类可能包含以下几个关键方法： 1. `addRow()`: 这个方法会在表格中添加新的行。它可能需要从请求参数中获取新行的数据，然后更新模型对象，如List或Map，这些对象在视图层被用来渲染表格。 2. `deleteRow()`: ...

    JavaScript 圣经第5版-Javascript编程宝典--黄金版 .rar

    Chapter 27: Table and List Objects. Chapter 28: The Navigator and Other Environment Objects. Chapter 29: Event Objects. Chapter 30: Style Sheet and Style Objects. Chapter 31: Positioned Objects. ...

    jqueryform分页

    首先，jQuery Form是一个插件，它扩展了原生JavaScript的表单提交功能，支持异步提交，即AJAX方式，这为实现无刷新分页提供了基础。无刷新分页意味着用户在切换页面时，页面不会完全重新加载，而是仅更新与分页相关...

    轻松学习javascript

    在网页中嵌入JavaScript有多种方式，这里列举几种常见的方法： - **内联脚本**：直接在HTML元素中通过`on...`事件属性来添加JavaScript代码。 ```html ('Hello')"&gt;点击我 ``` - **内部脚本**：在`&lt;head&gt;`或`...

    form表单复选框取值

    在给定的Java代码中，`deleteContactManagement`方法处理这个请求。`request.getParameterValues("ch")`用于获取所有名为`ch`的复选框的值，返回一个字符串数组。这些值对应于用户在前端选中的复选框的ID。 ```...

    JQuery 动态生成Table表格实例代码

    JQuery 动态生成Table表格实例代码中主要涉及的知识点包括JQuery的基本使用、动态创建DOM元素、DOM操作方法以及事件处理。JQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和...

    解决JS组件bootstrap table分页实现过程中遇到的问题_.docx

    在使用 Bootstrap Table 实现分页功能时，可能会遇到各种问题，本文主要针对服务器端取不到 form 值、设置传递到服务器的参数以及后台取不到 pageSize 信息这三个问题进行了详细的解答。通过以上提供的解决方案，...

    element-ui 关于获取select 的label值方法

    在Element UI框架中，`el-select`组件是一个常用的下拉选择器，用于展示一组可选项供用户选择。本文将详细讲解如何在Element UI中获取`el-select`组件选中的`label`值，以及如何同时获取`value`和`label`的值。 1. ...

    【Vue-Element】-Vue 2.0 的桌面端组件库 -Element详解

    可以通过官方文档了解各个组件的使用方法和配置选项。官网地址为：[https://element.eleme.cn/#/zh-CN](https://element.eleme.cn/#/zh-CN)。建议重点关注以下几个方面： 1. **组件的引入和使用**：了解如何在项目...

    Bootstrap table分页问题汇总

    Bootstrap Table 是一个流行的前端数据展示库，它基于 HTML 和 JavaScript，使用 Twitter Bootstrap 框架的样式。在本文中，我们将深入探讨 Bootstrap Table 的分页功能及其常见问题及解决方案。 ### 问题1：服务器...

    用js创建form表单并提交.docx

    在这个文档中，我们看到一个基于JavaServer Pages (JSP) 的Web应用示例，它使用了JavaScript来处理用户界面交互。以下是对相关知识点的详细解释： 1. **HTML表单**：HTML中的`&lt;form&gt;`元素用于创建表单，它包含了...

    Table重复表单组转json数组

    table添加记录，由于name相同，form直接获取存在问题，所以将Table中的每条重复元素转为json数组在传给后台。

    解决JS组件bootstrap table分页实现过程中遇到的问题

    在使用JavaScript组件bootstrap table进行分页实现的过程中，开发者可能会遇到一系列的问题。这些主要问题以及解决方法包括： 1. 服务器端取不到form值的问题： 开发者可能会遇到的情况是，从客户端发送到服务器端...

    layui table复选框禁止某几条勾选的实例

    Layui是一个轻量级的前端框架，提供了丰富的UI组件，包括表格，而复选框则是表格中常用的交互元素。 首先，我们需要了解Layui table的基本结构。Layui表格通常包含thead（表头）和tbody（数据部分）。在tbody中的每...

    js form表单input框限制20个字符，10个汉字代码实例.docx

    本文将详细介绍如何使用JavaScript来实现对Form表单中的Input框字符输入限制的功能，具体来说，我们将限制输入的最大长度为20个字符（包括全角字符），或等效于10个汉字。 #### 二、实现原理概述 要实现上述功能，...

    layui table去掉右侧滑动条的实现方法

    在网页开发中，Layui 是一款非常流行的前端框架，提供了丰富的组件，其中包括表格（table）组件。在某些场景下，我们可能希望去除表格的右侧滑动条，以获得更简洁的界面展示或者适应特定的设计需求。本篇文章将详细...

Magicbox
Global site tag (gtag.js) - Google Analytics