`

JS：表单输出自动显示在表格里

 
阅读更多
这个很简单，先说一下实现的原理：利用 JavaScript实现表单的实时互动。 再简单介绍实现的过程：先给<body>标签的属性onload属性设置一个值，连接到相应的JavaScript函数，JavaScript函数将文本框中的内容通过innerHTML实时传递到对应ID的表格中的<td></td>标签对中，便实现了你所要的效果。

下面就给你写下具体的代码： (复制粘贴到一个TXT文档中，将后缀名改为htm就可以)

<script language="javascript">
function chk()
{
setTimeout("chk()",100);
text1.innerHTML = form1.t1.value;
text2.innerHTML = form1.t2.value;
text3.innerHTML = form1.t3.value;
}
</script>
<body onload="chk()">
<form name="form1">
<textarea name="t1"></textarea><br />
<textarea name="t2"></textarea><br />
<textarea name="t3"></textarea><br />
</form>
<table border="1" width="200" style="border-collapse: collapse" bordercolor="#008000">
<tr height="100px">
<td id="text1"></td>
</tr>
<tr height="100px">
<td id="text2"></td>
</tr>
<tr height="100px">
<td id="text3"></td>
</tr>
</table>
</body>
分享到：
| 获取客户端IP(外网)地址的方法：
评论
发表评论

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

相关推荐

    程序天下:JavaScript实例自学手册

    9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...

    《程序天下：JavaScript实例自学手册》光盘源码

    9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...

    JavaScript网页特效范例宝典源码

    实例114 在表格中显示时间 180 实例115 退出页面时显示停留时间 181 实例116 显示用户在页面的停留时间 182 实例117 显示最后修改时间 183 4.2 日期时间算法 184 实例118 计算某一天是星期几 184 实例119 判断指定...

    JS实现获取word文档内容并输出显示到html页面示例

    本文实例讲述了JS实现获取word文档内容并输出显示到html页面。分享给大家供大家参考，具体如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;...

    javascript函数的解释

    84.JS中的模态显示在IE4+行,在NN中不行:showModalDialog("URL"[,arguments][,features]); 85.JS中的退出之前使用的句柄:function verifyClose(){event.returnValue= "we really like you and hope you will stay ...

    精通javascript

    • layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章（\第14章） • 14.1.htm confirm()方法用作判断条件 • 14.2.htm alert&#40;&#41;方法与confirm()方法的使用 ...

    JavaScript完全自学宝典 源代码

    示例描述：介绍JavaScript与表单控件。 6.1.html JavaScript获取文本框的值。 6.2.html JavaScript控制文本框。 6.3.html 文本框的JavaScript特效。 6.4.html 获取select元素的值。 6.5....

    JavaScript笔记

    打桩：在指定变量位置输出变量或对象的内容 console.log(内容);--&gt;出现在控制台--&gt;日志 4.变量：js中的变量不需要提前指定类型，由赋值时动态决定 所有的变量都用var声明 5.数据类型： |--String(字符串...

    javascript完全学习手册1 源码

    javascript完全自学手册 目 录 第1篇 JavaScript基础篇 第1章 JavaScript简介 1 1.1 JavaScript概述 1 1.1.1 什么是JavaScript 1 1.1.2 JavaScript的基本特点 2 1.1.3 常用的Web开发语言 3 1.2 JavaScript的应用 4 ...

    自动填充「Autofill」-crx插件

    变量：使用特殊变量来引用其他字段值，递增/递减数字，并输出随机数据（数字，字母数字字符，甚至来自集合中的单词）-网站过滤器：在每个网站或每个网站上限制自动填充-page基础-例外：指定要从自动填充中排除的页面...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    当展开菜单时，自动向服务器发送请求，查询该菜单下的子菜单，并在客户端显示子菜单，而无需刷新整个页面。 /simpleTree.jsp 简单树 /staticTree.jsp 静态树 /dynamicTree.jsp 动态树 /css/tree....

    JSP实用技巧集合，jsp编程的一些小技巧总结

    107.在重新显示表单时保留用户已经输入的合法数据? 108.使用选代器遍历集合 109.使用特定字符串对一个字符串进行分割? 110.格式化输出数字和字符? 111.生成一定范围的随机数? 112.调用其它应用程序? 113.禁止列出...

    Ext Js权威指南(.zip.001

    1.2.4　在javascript中使用json / 4 1.2.5　在.net中使用json / 8 1.2.6　在java中使用json / 12 1.2.7　更多有关json的信息 / 15 1.3　ext js 4概述 / 15 1.4　ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...

    javascript完全学习手册2 源码

    1．3 在web页面中使用JavaScript 1．3．1 HTML的基本结构 1．3．2 在HTML中嵌入JavaScript 1．3．3 链接JavaScript文件 1．4 编写JavaScript的工具 1．4．1 使用纯文本编辑器 1．4．2 使用专业化脚本编辑工具 ...

    精通JavaScript

    • layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章（\第14章） • 14.1.htm confirm()方法用作判断条件 • 14.2.htm alert()方法与confirm()方法的使用 • 14.3....

    JavaScript应用177例

    代码说明：本章代码只能在Mozilla Firefox中运行。 7.1.htm 事件流 7.2.htm DOM2鼠标事件 7.3.htm 取消默认动作 7.4.htm 创建DOM2事件 第8章（\cha08） 8.1.htm 页面...

    jsp编程技巧集锦

    数字转中文 128 自动计算金额 129 JSP页面打印中使用WebBrowser控件 130 不刷新页面添加新的类别 131 鼠标滚动缩放图片 132 根据输入的表名生成输入数据表格 133 JSP表格输出到Excel 134.JSP...

    repertory-grid-tool:用于管理剧目网格访谈的网络表单

    Repertory Grid Tool 是一种 Web 表单，可让您管理 Repertory Grid 访谈。 遵循凯利 (1955) 的，假设人们用他们自己的术语来解释他们对世界的看法。 剧目网格是通过使用一组元素并询问人们如何区分这些元素来获得...

    JavaScript实用范例词典04-14

    9.6 在新窗口中显示表单内容... 250 9.7 允许或禁止对整个表单的访问... 251 9.8 读取表单中所有元素的名称... 252 9.9 使用E-mail发送表单... 253 9.10 查看文字字段的内容... 254 9.11 验证文字字段是否输入...

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