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

 更新时间:2015年06月29日 16:35:43   作者:林蛤蛤  
这篇文章主要介绍了JavaScript使表单中的内容显示在屏幕上的方法,涉及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程序设计有所帮助。

相关文章

  • 简单实现js轮播图效果

    简单实现js轮播图效果

    这篇文章主要教大家如何简单实现js轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JavaScript极简入门教程(二):对象和函数

    JavaScript极简入门教程(二):对象和函数

    这篇文章主要介绍了JavaScript极简入门教程(二):对象和函数,本文讲解了对象基础知识、函数基础知识、函数调用、异常、继承等内容,需要的朋友可以参考下
    2014-10-10
  • webpack4 optimization使用总结

    webpack4 optimization使用总结

    这篇文章主要介绍了webpack4 optimization使用总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • JS如何判断移动端访问设备并解析对应CSS

    JS如何判断移动端访问设备并解析对应CSS

    本文为大家详细介绍下JS如何判断移动端访问设备并解析对应CSS,感兴趣的朋友可以参考下
    2013-11-11
  • webpack打包的3种hash值详解

    webpack打包的3种hash值详解

    这篇文章主要为大家介绍了webpack打包的3种hash值详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 封装一个vue中也可使用的uniapp的全局弹窗组件(任何页面都可以弹出)

    封装一个vue中也可使用的uniapp的全局弹窗组件(任何页面都可以弹出)

    在写uniapp小程序的时候,弹窗提醒经常会用到,虽然弹窗的组件很多,但是通常别人封装好的弹窗组件自定义度不高,很难匹配自己的ui需求,这篇文章主要给大家介绍了封装一个vue中也可使用的uniapp的全局弹窗组件的相关资料,这个组件在任何页面都可以弹出,需要的朋友可以参考下
    2023-02-02
  • 利用JS定时器实现元素移动

    利用JS定时器实现元素移动

    这篇文章主要为大家详细介绍了利用JS定时器实现元素移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • JS中的XMLHttpRequest 对象示例详解

    JS中的XMLHttpRequest 对象示例详解

    xmlhttp是一种浏览器对象, 可用于模拟http的GET和POST请求,xmlhttp配合JavaScript可以实现页面数据在无刷新下的定时数据更新,如果应用在聊天室、文字直播上,可以取得较好的视觉效果,这篇文章主要介绍了JS——XMLHttpRequest 对象,需要的朋友可以参考下
    2024-01-01
  • JS控制日期显示的小例子

    JS控制日期显示的小例子

    这篇文章主要介绍了JS控制日期显示的小例子,有需要的朋友可以参考一下
    2013-11-11
  • IE与Firefox在JavaScript上的7个不同写法小结

    IE与Firefox在JavaScript上的7个不同写法小结

    尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去,偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行。
    2009-09-09

最新评论