`

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(外网)地址的方法：
评论
发表评论

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

相关推荐

    vxe-table vue table 表格组件功能

    vxe-table是Vue.js中一款功能强大的表格组件，它为用户提供了丰富的表格操作功能，可以大大提高开发中的表格处理效率。vxe-table组件支持多种特性，包括但不限于基础展示、尺寸调整、样式定制、交互功能和数据处理等...

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

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

    php实现表单的动态添加删除

    在本文中，我们将深入探讨如何使用PHP来实现表单的动态添加和删除功能，结合一个名为jqGrid的JavaScript表格插件。jqGrid是一款强大的数据管理工具，它提供了类似迷你UI框架的功能，允许开发者轻松地创建交互式的...

    《程序天下：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 判断指定...

    SAP BC480 课程中文自学笔记

    - 表格：组织结构化数据。 ##### 6. 表单中的脚本 - **脚本应用**：介绍如何利用JavaScript编写表单脚本来控制表单的行为，如数据验证和动态计算。 - **脚本功能**： - 数据验证：检查输入数据的有效性。 - ...

    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;...

    Layui事件监听的实现(表单和数据表格)

    Layui是一款轻量级的前端框架，它提供了丰富的组件和便利的API，其中事件监听是其核心功能之一，特别在处理表单和数据表格时显得尤为重要。本文将深入讲解Layui中事件监听的实现，主要关注表单和数据表格。 **一、...

    TCL-TK表格生成器

    "text"标签可能意味着该生成器支持处理文本数据，这在创建需要用户输入或显示大量文本的表单时非常有用。 提供的压缩包文件包括： 1. **A-TCL-TK-Form-Generator.pdf**：这可能是一份详细的用户指南或技术文档，...

    ASP.NET表格控件打印插件

    1. **捕获表格数据**：在服务器端，插件会获取表格控件的数据，这可能涉及到数据源的重新绑定，以便获取最新的数据显示。 2. **格式化数据**：根据需要，插件可能会对数据进行格式调整，比如添加页眉和页脚，设置...

    自动填充「Autofill」-crx插件

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

    Struts2之struts2标签库了解和使用案例struts025

    - `s:submit`和`s:reset`：在表单中创建提交和重置按钮。 - `s:head`：插入JavaScript和CSS资源，支持CDN加速。 案例分析（以`struts025`为例）： 假设我们有一个用户管理的应用，需要显示用户列表和添加新用户...

    精通javascript

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

    JavaScript笔记

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

    HTML元素汇总表

    22. **comment**: 用于添加注释，不会在浏览器中显示。 23. **custom**: 自定义元素，可能指自定义组件或Web Components。 24. **dataTransfer**: 与拖放操作有关，用于处理剪贴板数据。 25. **dd**: 定义列表中的...

    safari HTML5 handbook

    - **noscript标签**：定义当浏览器禁用JavaScript时显示的内容。 - **object标签**：用于嵌入外部对象，如插件或小应用程序。 - **ol标签**：定义有序列表。 - **optgroup标签**：定义选项组。 - **option标签**：...

    单元格获得焦点就能弹出时间表格的包

    该工具的核心功能是在用户聚焦到特定单元格时，自动弹出一个时间表格，用户可以直接从中选取日期，提高输入效率。 这个包的名称可能指的是My97 DatePicker，这是一个广泛应用于Web开发中的JavaScript日期选择插件，...

    JavaScript完全自学宝典 源代码

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

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