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


Posted in Javascript onJune 29, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
JavaScript实现级联菜单的方法
Jun 29 #Javascript
node.js读取文件到字符串的方法
Jun 29 #Javascript
JavaScript模拟实现键盘打字效果
Jun 29 #Javascript
JavaScript实现把数字转换成中文
Jun 29 #Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 #Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 #Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 #Javascript
You might like
PHP中的float类型使用说明
2010/07/27 PHP
php计算税后工资的方法
2015/07/28 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
用JavaScript调用WebService的示例
2008/04/07 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
原生js调用json方法总结
2018/02/22 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python机器学习之神经网络(一)
2017/12/20 Python
Python异常处理操作实例详解
2018/05/10 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
财务出纳岗位职责
2014/02/03 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
个人职业及收入证明
2014/10/13 职场文书
导师工作推荐信
2015/03/27 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
创业计划书之旅游网站
2019/09/06 职场文书