javascript中点击按钮生成表格

已于 2023-01-26 14:31:25 修改
阅读量2.7k 收藏 11
点赞数 3
分类专栏： javascript项目 文章标签： javascript
于 2022-04-05 08:48:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_58451019/article/details/123964285
版权 
<!DOCTYPE html> #这是html部分
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>
<body>

<br>
<button id="Button">添加一个信息</button>
<br>
<div>
    <table border="1" cellspacing="0">
        <tr main="Main">
            <th class="main">姓名</th>
            <th class="main">性别</th>
            <th class="main">年龄</th>
            <th class="main">年级</th>
            <th class="main">爱好</th>
            <th class="main">自我介绍</th>
            <th class="main">操作</th>
        </tr>
        <tr class="Main">
            <td class="main">
                黄某
            </td>
            <td class="main">
                女
            </td>
            <td class="main">
                18
            </td>
            <td class="main">
                三年级
            </td>
            <td class="main">
                吃，玩
            </td>
            <td>
                我喜欢编写js
            </td>
            <td class="main">
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        <tr class="Main">
            <td class="main">
                黄某2
            </td>
            <td class="main">
                男
            </td>
            <td class="main">
                19
            </td>
            <td class="main">
                二年级
            </td>
            <td class="main">
                吃，玩
            </td>
            <td class="main">
               我喜欢编写js
            </td>
            <td class="main">
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        <div id="showTable"></div>
    </table>
</div>

<br>
<div id="show">

</div>

</body>
</html>
window.onload = function (){  # 这是js部分

    document.getElementById("Button").onclick = function (){

        document.getElementById("show").innerHTML = '<table cellspacing="1" border="1">' + '<tr>'
            + '<td id="name">姓名：</td>' +
            '<td ><input type="text"></td>'+
            '</tr>'+
            '<tr>' +
            '<td >性别：</td>' +
            '<td ><input type="radio" >男 <input type="radio">女</td>'+
            '</tr>'+
            '<tr>' +
            '<td>年龄：</td>'+
            '<td><input type="text"></td>'+
            '</tr>'+
            '<tr>' +
            '<td>爱好：</td>'+
            '<td><input type="checkbox">吃 <input type="checkbox">喝 <input type="checkbox">玩 <input type="checkbox">乐</td>'+
            '</tr>'+
            '<tr>' +
            '<td>自我介绍：</td>'+
            '<td><textarea name="" id="" cols="30" rows="10"></textarea></td>'+
            '</tr>'+
            '<tr>' +
            '<td colspan="2" align="center"><button>重置</button> <button id="Button2" value="提交">提交</button></td>'
            +'</tr>'
            + '</table>';


    }

}
.main{
   padding: 1em;

}

.Button{
   margin-bottom:10px ;
   margin-top: 10px;

}
.adding_{
   margin-right: 10px !important;
   margin-left:10px !important;
}

jQuery中点击按钮创建表格
ln201009的博客
05-16 1955
1、我们先说单个元素的创建，在一个div盒子里创建一个a标签，我们就需要先写入一个按钮和一个div盒子。如下图所示，要实现的功能就是点击按钮在盒子内创建一个表格。 2、我们想要的功能需要通过jQuery来实现，所以先引入一个jQuery的插件，然后写一个script标签来写jQuery代码块。 3、首先我们先写一个页面加载事件，在jQuery中的页面加载事件是一个$符号然后一个小括号，小括号里面写function。 4、我们创建表格首先就需要先创建一个存储表格数据的数.
JS实现点击按钮表新增一行
09-04
JS实现点击按钮表新增一行
点击按钮动态生成表格
weixin_30855099的博客
06-09 657
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn">点击</button...
js点击创建表格 （创建，修改，保存，删除）
weixin_51109349的博客
11-01 616
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="cj()">在创建一行</button> <script>window.onload = function() { //创建表格 var table.
点击按钮，动态添加表格
08-10
通过按钮事件，实现动态添加表格元素,可以获得更多的表格
用按钮触发Javascript动态生成一个表格的代码
12-09
接着，我们编写JavaScript代码，定义按钮的点击事件处理函数，动态生成表格： ```javascript document.getElementById('generateTableBtn').addEventListener('click', function() { // 创建表格元素 var table =...
JavaScript实现动态生成表格
10-15
在网页中，JavaScript可以用来创建各种交互效果，包括动态生成表格。本篇文章将详细探讨如何使用JavaScript来实现动态生成表格的功能。 首先，我们需要理解动态生成表格的基本流程。在用户界面上，通常会有一个或多...
基于JavaScript代码实现自动生成表格
10-22
这表明，当用户点击这个按钮时，会执行`autocreate()`函数，该函数包含用于创建表格的JavaScript代码。这是网页中常见的交互方式之一。 知识点四：表单输入和数据获取 示例中使用了两个文本输入框`行数`和`列数`，...
ExtJs 4.2.1 点击按钮弹出表单的窗口
weixin_33690963的博客
03-17 600
　　初学ExtJs，做项目的时候想做一个这样的效果：点击按钮弹出对话框，之前一直是使用EasyUi来做的， EasyUi里有Dialog，用起来很方便，但是现在转移到ExtJs上后，发现没有Dialog这样的框架，在网上找了没有找到这样的 控件，于是搜索一下关于ExtJs 对话框的实现方法，现在将实现结果贴出来，如果有什么想法，希望多多留言！ Ext.get("btn_edit"...
JS实现点击按钮显示表格数据
syy的博客
11-06 1656
JavaScript实现点击按钮显示表格
JS实现点击按钮自动增加一个单元格的方法
01-21
本文实例讲述了JS实现点击按钮自动增加一个单元格的方法。分享给大家供大家参考。具体分析如下： 这是一个网页在线自助生成表格的特效代码。 核心功能代码是JS实现，点击网页中的添加按钮，网页中自动增加一个单元格 代码如下: <HTML> <HEAD> <TITLE>js动态生成表格</TITLE> <META content=”text/html; charset=hz-gb-2312″ http-equiv=Content-Type> </HEAD> [removed] function creates(){ newiframes=document.createElement(“TABLE”)
jQuery点击图标按钮弹出表单代码.zip
05-23
jQuery点击图标按钮弹出表单代码基于jquery-1.11.3.min.js制作，点击Quantum Paper风格按钮，弹出表单窗口，动画效果。
jquery实现通过按钮弹出表单
01-19
jquery实现通过按钮弹出表单，适用于：新建、导入等。对应博客https://blog.youkuaiyun.com/diyinqian/article/details/83691464
jQuery点击图标按钮弹出表单代码
10-08
jQuery点击图标按钮弹出表单代码
弹出表格
04-04
NULL 博文链接：https://179826097-qq-com.iteye.com/blog/1488950
html 点击按钮js自增,JS实现点击按钮自动增加一个单元格的方法
weixin_29791447的博客
07-05 977
本文实例讲述了JS实现点击按钮自动增加一个单元格的方法。分享给大家供大家参考。具体分析如下：这是一个网页在线自助生成表格的特效代码。核心功能代码是JS实现，点击网页中的添加按钮，网页中自动增加一个单元格js动态生成表格function creates(){newiframes=document.createElement("TABLE")newiframes.id="t1"newiframes.w...
js点击button，在页面上创建一个三行四列的表格
宋宋的博客
03-27 808
js点击button，在页面上创建一个三行四列的表格。
点击按钮弹出包含表单的窗口
热门推荐
reg183的专栏
06-09 1万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>测试 - layui</title> <link rel="stylesheet" href=...
第一个JavaScript（点击按钮弹出窗口）
Chenbaby_的博客
11-14 5040
点击按钮弹出窗口 input{ width:50px; height:30px; } var ok=document.getElemen
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值