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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
将list转换为json失败的原因
Dec 17 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 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
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
员工离职证明范本
2015/06/12 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL