动态增加表格行

最新推荐文章于 2023-03-21 17:24:38 发布
最新推荐文章于 2023-03-21 17:24:38 发布
阅读量793 收藏
点赞数
文章标签： input table javascript button delete xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>表格相关</title>

    <script language="javascript" type="text/javascript">
function add_row()
{
    var tableobj=document.getElementById("table_1");
    var tableRowLength = tableobj.rows.length;
    var rowobj=tableobj.insertRow(tableobj.rows.length);

    var cell1=rowobj.insertCell(rowobj.cells.length);
    var cell2=rowobj.insertCell(rowobj.cells.length);
    var cell3=rowobj.insertCell(rowobj.cells.length);
   
//    var cell1Value = document.getElementById('name').value;
//    var cell2Value = document.getElementById('pass').value;
   

    cell1.innerHTML="<input name='name' id='name' type='hidden' value = Row"+(tableRowLength+1)+"/><br /><input name='nameRow'"+(tableRowLength+1)+" id='nameRow'"+tableRowLength+" type='text' />";
    cell2.innerHTML="<input name='passRow'"+(tableRowLength+1)+" id='passRow'"+(tableRowLength+1)+" type='text' />";
    cell3.innerHTML="<input type='button' value='取消' οnclick='delete_row("+(tableobj.rows.length-1)+");'>";

//    document.getElementById("name").value="";
//    document.getElementById("pass").value="";
}


function delete_row(i)
{
    var tableobj=document.getElementById("table_1");
    tableobj.deleteRow(i);
   
        //当删除一行后，对各行重新建立索引
    var tableobj=document.getElementById("table_1");
    for(i=1;i<tableobj.rows.length;i++)
    {
        tableobj.rows[i].cells[2].innerHTML="<input type='button' value='取消' οnclick='delete_row("+i+");'>";
    }
}

    </script>

</head>
<body>
    <div align="center">
<!--        <input name="name" id="name" type="text" />
        <input name="pass" id="pass" type="text" />-->
        <input name="add" type="button" οnclick="JavaScript:return add_row();" value="新增一行" />
    </div>
    <div align="center">
        <table id="table_1" border="1">
            <tr>
                <td>
                    帐号</td>
                <td>
                    密码</td>
                <td>
                    操作</td>
            </tr>
        </table>
    </div>
</body>
</html>

vipxiaotian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue/element】 el-table实现表格动态新增/插入/删除 表格行，可编辑单元格
coderYYY的博客
07-19 1万+
点击“新增一行”可以在表格最后新增一行，单元格内容可编辑
javascript实现动态添加删除表格行
04-13
NULL 博文链接：https://1148130696.iteye.com/blog/1726191
HTML中动态的增加和删除表格中的一行
H-rosy的博客
05-15 1万+
利用HTML，CSS和JavaScript三种技术完成表格页面级的操作，具体内容如下： （1）利用HTML编写网页： “编号”、“姓名”、“性别”三个文本框，“添加”按钮，一个“学生信息表”表格； （2）利用CSS设置表格的样式：实线边框，文本居中； （3）运用JavaScript DOM技术实现表格增加和删除记录。 页面效果如下： 图1 初始界面 图2添加记录 图3删除记录 <!DOCTYPE html> <html l...
【vue】el-table实现动态添加行和列
weixin_42342065的博客
03-21 1万+
el-table实现动态添加行和列
element-ui+vue实现表格动态添加表格行，并且可以进行上下移动
m0_52263688的博客
05-07 4793
element-ui+vue实现表格动态添加表格行，并且可以进行上下移动 由于项目需求，我所实现的是表格可以添加多个，并且每一个表格内的表格行也可以进行动态添加 下面是代码的实现 html代码部分： <draggable v-model="formInline.addFormArr" chosenClass="chosen" forceFallback="true" group=
javascript 动态添加表格行
12-08
表格部分代码如下： ”testTbl” border=1> ”tr1″> <td width=6%><input type=checkbox id=”box1″> ”b”>第一行 ”tr2″> <td width=6%><input type=checkbox id=”box2″> ”b”>第二行 ...
JavaScript 动态添加表格行 使用模板、标记
10-29
在客户端使用JavaScript动态添加表格行，先到网上找了相关的资料，发现有现成做好的组件，发现它只能够满足比较简单的要求。
javascript如何动态加载表格与动态添加表格行
10-26
在某些时候需要动态加载表格与动态添加表格行，在接下来的文章中将为大家介绍下javascript是如何做到的，感兴趣的朋友不要错过
android动态添加表格行
05-21
android动态添加表格行,实现动态添加表格
表格动态增加行(JS)
weixin_30426879的博客
07-17 2062
我最近一直在学Javascript,因为在项目用的比较多，虽然现在大家都在说Web标准，实际上还没有一个严格的定义，我理解的Web标准是把结构、表现、行为这三者结合表现出来就OK了。那用什么来表现呢？当然是CSS样式，行为用什么来控制呢？就是Javascript,可想而知学习Javascript的重要性了，当然除了Javascript，还有Vbscript,不过本人比较倾向Javascript ...
简单的前端动态增加表格行列实例
qq_40950174的博客
12-15 3730
动态表格增加删除编辑列行
js动态添加行和列（创建表格）
xiaobai_jq的博客
06-19 2767
最近做项目的时候遇到了需要页面动态创建表格，在此记录一下，以免忘记。 介绍两种方法： 第一种： var qygdrow=[{"id":1,"name":"小王"},{"id":2,"name":"小孙"},{"id":3,"name":"小李"},{"id":4,"name":"小张"}]//这里应该从后台获取json数组，现在写死了 function createTable(){ $.each($('table:first tbody tr'),function(j,tr){ if(j==0){
jQuery表格操作添加行、删除行和动态移动
03-31 4465
源码:添加jquery1.3.2.js既可以使用http://download.csdn.net/detail/mini_jike/9477374(脚本下载地址) html> html lang="en"> head> meta charset="UTF-8"> title>jQuery表格操作添加行、删除行和动态移动丨芯晴网页特效title> script langua
HTML动态增加和删除表格的行
微信小程序
02-15 1903
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;/head&gt; &lt;script type=&
jquery动态表格，动态添加表格行
weixin_30852367的博客
05-09 493
效果图： Html： <html> <head> <title>jquery表格操作</title> <scriptlanguage="javascript"src="jquery.table.tr.js"></script> <styletype="te...
js实现动态添加表格的行
qq_15536303的博客
08-07 5695
js实现动态添加表格的行
HTML动态增加和删除表格的行和列
热门推荐
huzijia888的博客
12-03 4万+
起始状态 增加行 增加列 删除行 删除列 function addrow(){   var c=document.getElementById('mytable');//获得表格的信息   if( c.rows.length==0){//如果是向一个空表增加一行  var x=c.insertRow(0);//
layui 动态添加表格行
最新发布
05-23
在 layui 中动态添加表格行，可以通过以下步骤实现： 1. 获取表格对象 ``` var table = layui.table; ``` 2. 定义数据数组 ``` var data = [ {id: 1, name: '张三', age: 20}, {id: 2, name: '李四', age: 22}...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值