Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >javascript表单提交的内容显示在表格中

javascript表单提交的内容显示在表格中

作者头像
别团等shy哥发育
发布于 2023-02-27 02:03:04
发布于 2023-02-27 02:03:04
8.7K00
代码可运行
举报
运行总次数:0
代码可运行

实现三个文本域的内容提交之后显示在表格中,代码直接用文本文件运行,记得后缀改为.html 运行结果

输入123,并点击提交按钮之后,数据就会显示在下面的表格中,有什么问题可以私聊我。

下面是代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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 οnlοad="chk()"> 
<form name="form1"> 
<textarea name="t1"></textarea><br /> 
<textarea name="t2"></textarea><br /> 
<textarea name="t3"></textarea><br /> 
<input type="button" value="提交" onclick="chk()">
</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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-03-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
web第四次上级作业
先看图吧 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo
编程张无忌
2021/01/26
3710
web第四次上级作业
表格复选、复选变色、以及行的间隔行
.row{BACKGROUND-COLOR:[removed]rowIndex%2==1?:JavaScript <style type="te
Java架构师必看
2021/03/22
1.5K0
Javascript中最常用的55个经典技巧(转)
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键  <table border oncontextmenu=return(false)><td>no</table> 可用于Table  2. <body onselectstart="return false"> 取消选取、防止复制  3. onpaste="return false" 不准粘贴  4. oncopy="return false;" oncut="return fal
阿豪聊干货
2018/08/09
5170
【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记。   CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页。 CSS3属性选择器 下面是CSS3的属性选择器的语法,及使用。 元素名字[元素类型=“类型名字”]:选择器名字{ 属性:值; 属性:值; }   在元素类型匹配时,就可以使用类似正则的匹配
用户1154259
2018/01/18
7480
【前端开发系列】—— CSS3属性选择器总结
Lodop打印样式问题与解决方法 原
1、<h3 class="printTitle">工商客户抄表收费通知单</h3> 标题,在打印预览时最后一个字会变小
tianyawhl
2019/04/04
4.8K1
JavaScript web编程
在实际开发中有些东西并不是静态的,要随着改变,比如表格内容,有些资料是从后台数据库中获取的,以上就是用js制作的一个表格案例,更加的灵活。 效果图如下:
用户8247415
2021/04/22
1.2K0
如果你要学JS——我正走在JS的路上(七)
使用node.removeChild()方法从DOM中删除一个子节点,返回删除的节点。
像素人
2023/11/28
2630
如果你要学JS——我正走在JS的路上(七)
其乐后台管理系统(四)--门店管理模块
前言:在此之前,我们讲解了-----本项目(Spring+SpringMVC+Mybatis)三大框架的整合及测试 ,对三大框架的整合有了一今天定的了解,那么今天给大家讲的是门店管理模块的实现,主要以前后端两个模块进行讲解,如若其中你有什么问题,可以留言告知!
不会飞的小鸟
2020/03/21
8680
老雷PHP全栈开发教程之常用html标签
布局标签 div p span a h1-h6 ul/ol li dl dt dd table thead tbody tr td th label 表单元素 form input text radio checkbox file textarea select option button 媒体元素 img audio video 其他标签 html,body head,title,meta,link style script 代码demo <!DOCTYPE
老雷PHP全栈开发
2020/07/02
4650
JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式
一:用最底层的方式,该方式用来创建别的对象树也可以 代码演示: <html> <head> <title>DHTML技术演示---表格创建--用最底层的方式,其实该方式用来创建别的对象树也可以</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> table{ border:#ff80ff;
谙忆
2021/01/21
7170
JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式
从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性
一般 val() 是获取表单的 value 属性; val(值); 设置表单的 value 属性。
Daotin
2018/08/31
2.4K0
从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性
表格使用总结
细线表格: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>细线表格</title> <style type="text/css"> table{ border-collapse:collapse; } td{height:30px;width:50px;border-spacing:0px;border-collapse:collapse;} </style> </head> <body> <h4>这个表格没
windseek
2018/06/14
4430
HTML标签学习
h1到h6:会将其中的数据加粗显示,并且显示依次减弱,标题标签自带换行功能(块级标签)
全栈程序员站长
2021/04/21
1.1K0
HTML标签学习
231个web前端的javascript特效分享(仅供本人学习,非教程类型)
<input type=”text” value=”郭强”onfocus=”if(value==’郭强’) {value=”}”onblur=”if
botkenni
2019/09/03
1.4K0
HTML入门的简单学习
1:HTML简介     1.1:HTML(Haper Text Markup language):超文本标记语言     超文本就是指页面内可以包含图片,链接,甚至音乐,程序等非文字元素     
别先生
2017/12/29
4.3K0
HTML入门的简单学习
HTML5超级简单免费入手教程
​ HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言;即除了文字之外还可以有视频、音频等内容.
张哥编程
2024/12/13
1430
HTML5超级简单免费入手教程
JavaScript案例:动态生成表格
因为里面的数据都是动态的,我们需要js动态生成,所以需要准备好模拟数据,采用对象形式存储。
岳泽以
2022/10/26
2.4K0
JavaScript案例:动态生成表格
WEB入门 四 CSS样式表深入
上一章学习了CSS的语法基础及文字效果,学习了3种选择器,选择器是CSS中非常重要的概念,本章将深入学习选择器的知识,主要包括选择器的集体声明和嵌套。面向对象编程语言中有为了实现代码的重用有继承的特性,而CSS中也有可以使用继承的特性实现代码的重用。
张哥编程
2024/12/17
2490
javaWeb技术第一篇之HTML
<font color="设置颜色" size="设置大小" face="设置字体">
海仔
2019/08/05
6180
jQuery/javascript实现网页注册的表单验证
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>注册表单验证</title> 5 <script src="jquery.j
别先生
2017/12/29
2.7K0
jQuery/javascript实现网页注册的表单验证
相关推荐
web第四次上级作业
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验