JavaScript使表单中的内容显示在屏幕上的方法

本文实例讲述了JavaScript使表单中的内容显示在屏幕上的方法。分享给大家供大家参考。具体实现方法如下：

一、使内容水平出现

<html>
 <head>
  <title>测试</title>
  <script type="text/javascript">
   function to()
   {
   var txt=document.getElementById("txt").value;
   document.getElementById("a").innerHTML+=txt;
   }
  </script>
 </head>
 <body>
  <div id="a">在这里显示：</div>
  <button onclick="to();">输入</button>
 </body>
</html>

二、使内容以表格形式出现

<html>
 <head>
  <title>测试</title>
  <script type="text/javascript">
   function to()
   {
   var txt=document.getElementById("txt").value;
   var row=document.getElementById("ib").insertRow();
   row.align="center";
   var tt0=row.insertCell();
   tt0.innerHTML=txt;
   }
  </script>
 </head>
 <body>
  <div id="a"></div>
  <table id="ib">
  <tr>
  <th>content</th>
  </tr>
  </table>
  <input type="text" id="txt" value="" size="30">
  <button onclick="to();">输入</button>
 </body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • 基于Jquery的跨域传输数据(JSONP)

    后端: 复制代码 代码如下: <?php $json_str = json_encode(array("ddd"=>"11111111")); echo $_GET['ja'].'('.$json_str.')'; ?> 前端: 复制代码 代码如下: $.getJSON('http://www.liushan.cn/test.php?ja=?',function (json){ alert(json); }); 纯JS实现(JSONP): 复制代码

  • JS实现左右拖动改变内容显示区域大小的方法

    JS实现左右拖动改变内容显示区域大小的方法

    本文实例讲述了JS实现左右拖动改变内容显示区域大小的方法.分享给大家供大家参考.具体如下: 这里演示左右可拖动的内容显示区效果,左右拖动红条改变显示区域宽度大小,往左拖则全部显示右侧内容,往右拖则全部显示左则内容,类似QQ的聊天窗口一样,可以向上或向下拖动大小,以适合使用者的要求.本代码完全JavaScript与CSS代码结合实现,在各主流浏览器内运行的兼容性也不错,左右拖动改变大小的JS代码推荐给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2

  • js实现内容显示并使用json传输数据

    最近做一个项目,要求是div内为空 所有代码都写在<script>里面,<script>里面的文本用json传输,这个问题对于我来说有些困难. 还好,最后在教程和同事的帮助下写出来了,下面贴上源代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>测试项目</title> <script src="

  • asp.net下 jquery jason 高效传输数据

    Default.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test2<

  • ajax.js里面有内容显示效果，根据ID

    ajax.js里面有内容显示效果,根据ID 复制代码 代码如下: var http_request = false;     var success=false;     var ShowAllListFlag=1;     var DisplayArticle=true;     function makeRequest(url,cateID) { http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,...

  • java编程实现基于UDP协议传输数据的方法

    本文实例讲述了java编程实现基于UDP协议传输数据的方法.分享给大家供大家参考,具体如下: UDP协议(User Datagram Protocol,用户数据报协议)不同于TCP协议,它是不可能靠的,但是它比TCP协议具有更快的传输速度,UDP发送的数据单元称为数据报,当网络传输UDP传输UDP数据报是无法保证数据能够到达目的地,也无法保证按发送的顺序到达目的地,也就是说先发送了"hello",再发送了"world",但接收方可能会先收到"world&q

  • AJAX 异步传输数据的问题

    要异步传输的数据: Xml代码 .... <action xsi:type="basic:JavaScript" script="index += 1;"/> .... Ajax异步传输代码: Js代码 复制代码 代码如下: var postData = "input="+ escape(inputJSON) +"&script="+escape(xml)+ "&feedGeneral=&

  • Python爬虫抓取手机APP的传输数据

    Python爬虫抓取手机APP的传输数据

    大多数APP里面返回的是json格式数据,或者一堆加密过的数据 .这里以超级课程表APP为例,抓取超级课程表里用户发的话题. 1.抓取APP数据包 方法详细可以参考这篇博文:Fiddler如何抓取手机APP数据包 得到超级课程表登录的地址:http://120.55.151.61/V2/StudentSkip/loginCheckV4.action 表单: 表单中包括了用户名和密码,当然都是加密过了的,还有一个设备信息,直接post过去就是. 另外必须加header,一开始我没有加header得

  • JavaScript使表单中的内容显示在屏幕上的方法

    本文实例讲述了JavaScript使表单中的内容显示在屏幕上的方法.分享给大家供大家参考.具体实现方法如下: 一.使内容水平出现 <html> <head> <title>测试</title> <script type="text/javascript"> function to() { var txt=document.getElementById("txt").value; document.getEl

  • JavaScript判断表单中多选框checkbox选中个数的方法

    JavaScript判断表单中多选框checkbox选中个数的方法

    本文实例讲述了JavaScript判断表单中多选框checkbox选中个数的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript检测并判断出表单中多选框的选中个数,也就是checkbox被选择了多少,在以前,这个问题经常被各大论坛问到,因为检测checkbox不像检测输入框那么简单,尤其是判断个数也经常会遇到,所以说觉得这个Js代码还是很有用的,大家有兴趣的再完善一下. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ch

  • JS实现获取键盘按下的按键并显示在页面上的方法

    JS实现获取键盘按下的按键并显示在页面上的方法

    本文实例讲述了JS实现获取键盘按下的按键并显示在页面上的方法.分享给大家供大家参考,具体如下: 请你使用键盘输入一些字符,这些字符就被显示在网页的空白处,是不是少了文本框或文本域之类的东西,觉得挺不习惯呢?这个效果是应用了JavaScript中的document.onkeypress对象,监测键盘的一举一动,并记录下哪些键被按下,有意思吧,想研究Js的朋友,就从这些小例子开始吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-sh

  • Android从网络中获得一张图片并显示在屏幕上的实例详解

    Android从网络中获得一张图片并显示在屏幕上的实例详解

    Android从网络中获得一张图片并显示在屏幕上的实例详解 看下实现效果图: 1:androidmanifest.xml的内容 <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="cn.capinftotech.image" an

  • 匹配form表单中所有内容的正则表达式

    需求是这样子的: 现在有一个表单 复制代码 代码如下: <form action='mk.php'>.......</form> 表单里面的省略号代表里面的内容,里面有各式各样的标签<>. 想写一个正则表达式匹配整个form表单,包括form标签,是html文件里面的内容. 首先想到的是: 复制代码 代码如下: <form .*</form> 这样子: 复制代码 代码如下: <form [^>]*/form> 还有这样子: 复制代码

  • js清空form表单中的内容示例

    复制代码 代码如下: //清空form选择 function clearForm(id){ var formObj = document.getElementById(id); if(formObj == undefined){ return; } for(var i=0; i<formObj.elements.length; i++){ if(formObj.elements[i].type == "text"){ formObj.elements[i].value = &qu

  • 简述JavaScript提交表单的方式 （Using JavaScript Submit Form）

    最近做项目遇到用Javascript提交表单的问题, 之前也做过几次, 但是不够全面, 这次总结出了几种用JavaScript提交表单的方式, 并且对此作出了比较, 选出了一种最适合此项目的方式. 我目前正在为Sun Communication Suite做一个创建用户的小型系统,大家都知道我们可以通过表单,Ajax 和链接来访问服务器, 最简单的方法就是使用连接, 例如:<a href=UserServlet?event=SEARCH_MAILING_LIST&currentPage=1&

  • 基于vue 实现表单中password输入的显示与隐藏功能

    实现效果: 点击 "眼睛" 的时候显示与隐藏 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  • vue表单中遍历表单操作按钮的显示隐藏示例

    使用情况,vue中返回的数据循环遍历如果用到v-if时不能直接赋值true 或者false,要true 或者false push到数组里面,隐藏或显示时用 splice方法. 以下是详情 1. 第一步先在data中定义数组 data () { return { passSaveShow: [], // 通行组保存和取消的显示隐藏 passEditShow: [], // 通行组编辑的显示隐藏 checkedUnLink: [], // 取消关联是否选中 valDate: [], // 有效期显示

  • JS实现表单中点击小眼睛显示隐藏密码框中的密码

    领导交个一个任务,要求在表单中点击小眼睛显示隐藏密码框中的密码!在一些网站中经常会用到这样的功能,今天小编就给大家分享我的实现思路及代码 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 最终效果图 css样式部分,样式可根据自己喜好设置,没有过硬要求 <style> div:first-child { width: 300px; height: 50px; background-color: red; color: white; margin: 20px

随机推荐