利用js实现table增加一行

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量3.7k 收藏
点赞数
文章标签： table input button border function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zw_82/article/details/1110236
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<script language="javascript">
 var rowid=1;
 function $(id){
  return document.getElementById(id);
 }
 function addRow(){
  var _tab=$("test");
  var _row=_tab.insertRow();
  rowid+=1;
  var _col1=_row.insertCell();
  _col1.innerText=rowid;
  _col1.align="center";
  var _col2=_row.insertCell();
  _col2.innerHTML="<input type='text'>";
  _col2.align="center";
  var _col3=_row.insertCell();
  _col3.innerHTML="<input type='text'>";
  _col3.align="center";
  var _col4=_row.insertCell();
  _col4.innerHTML="<input type='text'>";
  _col4.align="center";

 }
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>增加行</title>
</head>

<body>
 <table>
  <tr>
     <td align="center" valign="top">
    <table width="200" border="1" align="center">
      <tr>
     <td><input type="button" name="addBtn" value="&nbsp;&nbsp;add&nbsp;&nbsp;" onClick="addRow();"></td>
      </tr>
      <tr>
     <td><input type="button" name="addBtn" value="delete"></td>
      </tr>
    </table>
     </td>
   <td><table id="test" border="1">
    <tr>
     <td>&nbsp;</td><td align="center">ID</td><td align="center">Name</td><td align="center">Desc</td>
    </tr>
    <tr>
     <td align="center" width="50">1</td>
     <td><input type="text" name="id" id="testId"></td>
     <td><input type="text" name="name" id="testName"></td>
     <td><input type="text" name="desc" id="testDesc"></td>
    </tr>
  </table></td>
  </tr>
 </table>
</body>
</html> 

zw_82
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
iview table增加一行减少一行_利用jquery给指定的table动态添加一行、删除一行
weixin_39630441的博客
12-22 485
利用jquery给指定的table添加一行、删除一行src="/js/jquery-1.5.1.js">////////添加一行、删除一行封装方法////////*** 为table指定行添加一行** tab 表id* row 行数，如：0->第一行 1->第二行 -2->倒数第二行 -1->最后一行* trHtml 添加行的html代码**/function addTr(...
VUE2中Element组件中实现table第一行合计
m0_67001432的博客
06-03 346
const table = document.querySelector('.customTable') // customTable这个是在el-table定义的类名。table.insertBefore(footer, body) // 把合计行插入到表格body的上面。table.removeChild(footer) // 移除表格最下方的合计行。1、设置css属性，让table中第一行是合计行。功能实现完成，请各位看官实战检阅！3.getSummaries方法。//表格展示第一行是合计。
利用jquery给指定的table进行添加一行，删除一行的操作
hyq_07_27的博客
09-29 2256
页面如图：点击 + ，增加一行数据，点击- 删除一行数据。 <table id="protypeTable" style="table-layout:fixed" class="tab-1 tab-2" cellspacing="0" cellpadding="0"> <tbody> <tr> <th style="width: 20%;">科目代码</th> <th .
利用js为table添加行
weixin_34082854的博客
04-17 177
前几天在项目中，用到了一些前端的小技巧，一个是我现在要写的，还有一个就是三个select的联动。我写这篇博客的目的是：1.供自己以后随时查阅用 2.希望对他人也有所帮助，因为总有还不会的。 这个话题虽然网上也有人写过。但我争取把这篇博客写的更详细些。 先来个效果图：我最终想实现的就是当点击添加时，table当前最后一行下面添加新的一行。 ...
如何利用js实现删除表格每行的功能？
csgojingyu的博客
09-21 969
一定要包含在<table></table>之间，否则会打印多个表头！
vue table+form 表格+表单动态增加一行 数据 并进行数据校验
qq_55961367的博客
07-08 508
表格+表单动态增加一行，加上表单的数据校验，进行新增编辑时，表格为输入框，展示数据时，表格为文本框
如何使用JavaScript实现一个简单的动态表格，实现添加一行和删除一行表格（两种方法）
m0_64053511的博客
02-08 8666
1方法一： 使用table的insertRow()方法插入一行，使用table.removeChild(tr)删除一行，具体的代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ text-align: c.
javaScript实现table表格的一些简单操作
小福气的博客
07-06 1150
题目： JS代码如下： <script> //获取操作对象 vartbody=document.querySelector('table').firstElementChild //获取所有按钮对象 varbtns=document.querySelectorAll('button') //给第一个按钮绑定点击事件 btns[0].onclick=function(){ ...
ant design vue利用rowClassName给table添加行样式
yougejing的博客
01-29 7432
ant design vue利用rowClassName给table添加行样式目录1. 需求：表格每行数据hasVerdict值不为'1'时标红显示2. 实现方式：table属性rowClassName3. 问题：样式未生效4. 解决方案4.1 方案一：删除scoped4.2 方案二：样式穿透5. 总结 目录 1. 需求：表格每行数据hasVerdict值不为’1’时标红显示 2. 实现方式：table属性rowClassName html部分代码 <a-table ref="table"
layui实现点击按钮给table添加一行
10-18
Layui 提供了一个 `table.reload()` 方法来重新加载表格数据，但在此场景下，我们只需要添加一行，所以不需要重新请求数据。为了解决这个问题，可以在添加行后调用 `table.resize()` 来更新表格的尺寸，以避免数据...
利用jquery给指定的table动态添加一行、删除一行的方法
10-21
要添加一行，我们需要确定要在哪一行之后插入新的行。jQuery提供了`eq()`方法来选择具有特定索引的元素。例如，`$("#mytable tr").eq(0)`将选择第一行，`$("#mytable tr").eq(-1)`将选择最后一行。`nth-child(n)`...
Jquery实现的table最后一行添加样式的代码
10-29
总结起来，这个示例展示了如何利用 jQuery 和 CSS 实现一个功能，即在 HTML 表格的最后一行应用独特的样式。这种技术常用于数据展示，提高可读性和用户界面的美观性。在实际项目中，你可以根据需要自定义 CSS 样式，...
javascript table 增加删除行,巧妙实现
02-01
在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`<table>`元素及其相关...
js实现table添加行tr、删除行tr、清空行tr的简单实例
10-21
本实例主要展示了如何使用JavaScript来实现对表格（`<table>`）中的行（`<tr>`）进行添加、删除和清空的操作。我们将深入探讨这些功能的实现细节。 1. **添加行（`<tr>`）** 添加行的功能通过`insertRow()`方法...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3260
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 669
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
【HTML — 构建网络】HTML 入门
07-24 1180
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 1853
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
利用JS实现 TABLE的分页
05-13
可以通过以下步骤来实现 TABLE 的分页： 1. 在 HTML 中创建一个 TABLE 元素，并设置一个 ID，以便在 JavaScript 中引用。 ```html <table id="myTable"> <th>Column 1 <th>Column 2 <th>Column 3 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值