javascript动态生成表格（一）

最新推荐文章于 2024-05-03 16:02:30 发布
最新推荐文章于 2024-05-03 16:02:30 发布
阅读量902 收藏
点赞数
分类专栏： java技术 文章标签： javascript table div html button function
<%@ page pageEncoding="gbk" %>
<!--具体需求如下：
用户在网页一系列对话框中输入要生成的表格的行数和列数以及生成的位置坐标等，
然后点击“生成表格”按钮，执行javaScript脚本函数，在HTML网页指定位置上生成表格。
-->
<script>
var n=0;
function TestSecond()
{
var div=document.createElement("div");
div.id="div"+n;
var table=document.createElement("table");
table.border=1;
var xNum=document.getElementById("textX").value;
var yNum=document.getElementById("textY").value;
var textRow=document.getElementById("textRow");
var textCell=document.getElementById("textCell");
for(var i=0;i<textRow.value;i++)
{
var row=table.insertRow();
for(var j=0;j<textCell.value;j++)
{
var cell=row.insertCell();
cell.innerText="***";
cell.width=50;
}
}
  div.appendChild(table);
 
  div.style.position="absolute";
      div.style.left = document.all.textX.value + "px";
      div.style.top = document.all.textY.value + "px";
  document.body.appendChild(div);
}
</script>
<html>
<body>
<table align="center">
<tr>
<td>行数：</td>
<td><input type="text" id="textRow"/>
</td>
</tr>
<tr>
<td>列数：</td>
<td><input type="text" id="textCell"/>
</td>
</tr>
<tr>
<td>座标X：</td>
<td><input type="text" id="textX"/>
</td>
</tr>
<tr>
<td>座标Y：</td>
<td><input type="text" id="textY"/>
</td>
</tr>
<tr>
<td align="center" colspan="2"><input type="button" value="生成表格" onClick="TestSecond();" /></td>
</tr>
</table>
<p>
</body>
</html> 
ipsen2006
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中动态生成表格
嗨皮的博客
11-05 2753
JavaScript中动态生成表格案例，涉及到数组的遍历以及节点的追加和删除
动态生成表格
weixin_51415327的博客
09-02 162
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&gt...
最详细的JS动态创建表格以及实现分页!_新建20 15的单元格动态网页
2401_84418883的博客
05-03 457
完整页面在搜索框输入关键字4，并查找的情况下。(图二)
JavaScript实现动态写入表格
程序员大腾的博客
07-25 2128
如果我们在写程序的时候，接收到了后台传入的数据，怎么样用原生JavaScript把数据写入表格呢？如果第二次传来的数据与第一次不一样的话该怎么办呢？
html生成动态表格（js程序）
10-16
用js代码实现动态生成表格，可输入行数，列数。点击按钮可以生成相对应的表格的小程序
动态生成 指定列数、行数的表格。
qq_43643691的博客
08-27 880
动态生成 指定列数、行数的表格。并在每行最后一列添加一个删除按钮。点击删除按钮、删除本行！ 思路：先一点一点添加功能，先写添加表格，在写删除表格 行数： 列数： <input type=“button” id=“buttonId” value=“创建” οnclick=“creat()” /> ———————————————— 版权声明：本文为CSDN博主「sd...
JavaScript动态生成表格案例
05-23
这是一个动态生成表格的 HTML 页面，使用了 JavaScript 动态生成表格内容。这个表格显示了一组学生的成绩信息，包括姓名、科目和得分，并提供了删除操作。 在页面中，先声明了一个 table 元素，并设置了 id 为 ...
JavaScript动态生成表格的示例
01-18
通过JS来写动态的表格（有多少组数据，就自动创建多少行表格） 为学习和演示，采用固定的数据，不涉及调用后台数据 代码实现： HTML内容： 姓名 科目 成绩 操作 <tbody></tbody> CSS内容： table ...
JavaScript实现动态生成表格
10-15
总结来说，JavaScript动态生成表格是网页开发中常见的一种功能，它通过获取用户输入、构建HTML字符串和操作DOM来实现。理解这个过程有助于开发者创建更复杂、更动态的网页交互效果。通过不断学习和实践，可以进一步...
JavaScript实现网页动态生成表格
01-21
JavaScript(JS)网页–动态生成表格，供大家参考，具体内容如下 在网页中，动态生成列表的内容，将数组中的object加入到列表中（没学到数据库）。在HTML中创建thead，然后通过JavaScipt动态生成tbody。并且在每行...
JavaScript：动态生成表格
抛弃幻想，准备斗争
10-21 447
如果要想动态操作表格，那么有一个前提：强烈建议要定义好表格，而后只操作<tr>,<td>元素即可 TestDemo1.htm <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> &lt...
HTML完美动态表格(可编辑)
04-23
完美表格。在此基础上可进行AJAX开发.可编辑选项包括下拉框和文本框等。动态添加行 删除行。tab键切换。回车键改变状态等。
js算法--输入行列，生成一个表格（table）
xingguanghui_1134的专栏
08-27 1万+
html: 请输入行数: 请输入列数: 创建 javaScript: functino autocreate() { var line = document.getElementById('rows').value; var list = document.getElementById('cols').value; var
js 动态生成表格案例
a63438840的博客
09-07 1898
<1>布局：一个table表格，表格分为两个部分，上面是thead表头，表头里面仅一行，有4列（th), 下面是tbody表格内容，要求tbody中的每一行都是用js动态创建的 <body> <table> <thead> <tr> <th>姓名&...
jQuery之动态为表格添加数据
热门推荐
a1k2l45k的博客
05-19 2万+
项目需求 需要一个页面，包括一张表格，一个button(id=”button1”) button1点击事件是会在页面上方出现用来为表格添加显示框，背景为灰色 显示框中也有一个button(id=”button2),其点击事件是将显示框中的数据添加到页面 的表格中 显示框中需要包括一个div,其点击事件是关闭显示框 步骤 HTML结构和CSS美化 ...
javascript动态生成表格
开享
09-03 1410
用户在网页一系列对话框中输入要生成的表格的行数和列数以及生成的位置坐标等， 然后点击“生成表格”按钮，执行javaScript脚本函数，在HTML网页指定位置上生成表格。 --> var n=0;function TestSecond() { var div=document.createElement("div"); div.id="div"+n; var table=doc
动态表格
weixin_43908950的博客
01-04 414
简单动态表格，可增删数据 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动态表格&lt;/title&gt; &lt;style&gt; table{
JavaScript创建动态表格
walking_dead_k的博客
12-02 827
创建动态表格 利用JavaScript，根据数据信息创建动态表格 <script> //1.准备学生数据 var datas = [{ name: '夏弥', subject: 'JavaScript', score: 59 }, { name: '路明非', subject: 'JavaScript' }
Javascript动态生成表格的性能调优
张庆（网眼）
09-16 7758
客户端动态输出table数据并展示表格，是web应用中较为常见的工作。对于循环打印输出tr，td本身是一件非常僵硬和暴力的编程办法，再加上最后绑定元素innerHTML字符流输出，系统所消耗的性能代价是非常高昂的，如果我们需要展现的数据非常庞大时，那么代价也是成倍的。然而这种动态输出表格的方法是大多数客户端程序员最常用的方法。那么基于最常用的方法，如何才能降低性能成本，改善用户体验，快速安全的显示
JAVAScript动态生成表格
最新发布
05-27
JavaScript动态生成表格可以通过DOM操作来实现。以下是一些基本的步骤： 1. 首先创建一个table元素，并设置其属性（如id、border等）。 2. 创建thead元素和tbody元素，并添加到table中。 3. 创建tr元素作为thead中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值