js动态生成，删除一行td

最新推荐文章于 2022-11-01 15:56:42 发布
最新推荐文章于 2022-11-01 15:56:42 发布
阅读量826 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 页面&交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/z442636908/article/details/74999196
本文介绍了一个简单的HTML页面，用于创建工作流程。用户可以输入流程名称和简介，并通过添加步骤来定义流程中的角色，包括浏览用户和审批用户。此外，还提供了删除步骤的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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">
<!--
var rid=1;
function creatTRTD(){
var thisid=rid;//当前id
var mytable = document.getElementById("table1");
var myTR = mytable.insertRow(-1);
var myjTD=myTR.insertCell(-1);
myTR.id="row"+thisid;
myjTD.id="step"+thisid;
myjTD.innerHTML='步骤'+(thisid+1);
var myjTD1= mytable.rows[thisid].insertCell(-1);
myjTD1.innerHTML='浏览用户：<SELECT id="selGroup'+thisid+'"><option>选择用户组</option><option>所有用户组</option><option>用户组1</option></SELECT><SELECT id="selUser'+thisid+'"><option>选择用户</option><option>所有用户</option><option>用户1</option></SELECT>';
var myjTD2= mytable.rows[thisid].insertCell(-1);
myjTD2.innerHTML='审批用户：<SELECT id="examGroup'+thisid+'"><option>选择用户组</option><option>所有用户组</option><option>用户组1</option></SELECT><SELECT id="examUser'+thisid+'"><option>选择用户</option><option>所有用户</option><option>用户1</option></SELECT>';
var myjTD3=mytable.rows[thisid].insertCell(-1);
myjTD3.innerHTML="<INPUT TYPE='button' value='删除' onclick='del(this,this.nextSibling.value)'><input id=ipt"+thisid+" type='hidden' value="+thisid+">";
rid++;
}
//删除当前指定的Row
function del(obj,iptvalue)
{
   
    var delrow=obj.parentNode.parentNode;
    delrow.parentNode.deleteRow(delrow.sectionRowIndex);
   
    for(var i=0;i<rid;i++)
    { 
        if(i>parseInt(iptvalue))
        {
            if(document.getElementById('ipt'+i))
            {
            var iptobj=document.getElementById('ipt'+i);
            iptobj.value=i-1;
            iptobj.id='ipt'+(i-1);
            var cobj=document.getElementById('step'+i);
            cobj.innerHTML="步骤"+i;
            cobj.id='step'+(i-1);
            document.getElementById('row'+i).id="row"+(i-1);
            document.getElementById('selGroup'+i).id="selGroup"+(i-1);
            document.getElementById('selUser'+i).id="selUser"+(i-1);
            document.getElementById('examGroup'+i).id="examGroup"+(i-1);
            document.getElementById('examUser'+i).id="examUser"+(i-1);
            }
        }
    }
    rid=rid-1;
}
//-->
</SCRIPT>
</head>
<body>
  <form id="frm">
   <table align="center">
           <tr>
            <td>流程名：<input type="text" /></td>
        </tr>
        <tr>
            <td>流程简介：<input type="text" /></td>
        </tr>
        <tr>
            <td>
            <table id="table1">
                <tr id="row0">
                    <td id="step0">步骤1</td>
                    <td>浏览用户：<select id="selgroup0"><option>选择用户组</option></select><select id="seluser0"><option>选择用户</option></select></td>
                    <td>审批用户：<select id="selgroup0"><option>选择用户组</option></select><select id="seluser0"><option>选择用户</option></select></td>
                    <td><input id=ipt0 type='hidden' value=0></td>
                </tr>
            </table>
            </td>
         </tr>
        <tr>
            <td><input type="button" value="添加步骤" onclick="creatTRTD()" /></td>
        </tr>
        <tr>
          <td><input name="button" type="button" value="保存" /><input name="button" type="button" value="返回" /></td>
        </tr>
   </table>
   </form>
</body>
</html>
js动态控制table的tr、td增加及删除的具体实现
10-26
主要介绍了使用js如何动态控制table的tr，td增加及删除,需要的朋友可以参考下
基于JavaScript实现动态添加删除表格的行
12-28
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。 1.jsp 产品名称 编号 数量 重量 操作 ...
JS清除TD内容
weixin_53987328的博客
11-01 644
笔记1.0
js删除指定table的td
qq_41353397的博客
10-25 1131
var table = document.getElementById("tableid");//获得要操作的table对象 var row = table.rows[3];//先获取到要操作的第几行（3代表第四行）， row.deleteCell (0);//删除掉第三行的第一列
清空td数据
weixin_53987328的博客
10-19 407
清空td数据
JS动态添加Table的TR，TD实现方法
10-24
除了上述内容，标签中还提到“JS 动态 添加 Table TR TD 方法”，这表明文章着重讨论了使用原生JavaScript（不依赖于任何框架或库）来实现这一功能。在现代Web开发中，虽然诸如jQuery这样的库提供了更简便的方法来...
【JavaScript源代码】JavaScript动态生成带删除行功能的表格.docx
12-29
JavaScript动态生成带删除行功能的表格是Web开发中常见的需求，尤其在数据展示或交互式应用中。以下是如何实现这一功能的详细步骤和关键知识点： 首先，我们需要理解基本的HTML结构，这里涉及到一个包含thead（表头...
JS实现动态生成表格并提交表格数据向后端
11-24
在JavaScript（JS）中动态生成表格并提交数据到后端是一项常见的前端开发任务，它涉及到DOM操作、事件处理以及与服务器的交互。以下是对这个过程的详细解释： 首先，为了实现动态生成表格，我们需要引入一个...
JS控制网页动态生成任意行列数表格的方法
10-24
首先，当用户需要在网页上生成一个表格时，他通常会有一个行数和列数的概念，希望通过输入这些值来生成相应的表格。为了实现这一目的，需要编写一个JavaScript函数，这个函数应该能够根据用户输入的行数和列数，创建...
删除<table>中有<td>等于某值的行
easyboot的专栏
01-18 2117
JQuery方法 function EliminateDuplication(SN) { $("#ScanData").find("tr").each(function () {//循环遍历每一行 var SNTemp = $(this).find("td").eq(1).html()//取得一行中第二个td的值 alert(S
JS 删除Table中的一行
热门推荐
w93223010的专栏
11-27 1万+
function deleteCurrentRow(obj){ var tr=obj.parentNode.parentNode; var tbody=tr.parentNode; tbody.removeChild(tr); //只剩行首时删除表格 if(tbody.rows.length==1) { tbody.parentNode.remov
jquery动态添加删除(tr/td)
新闻大巴
02-09 2929
代码很简单，实现的功能也很简单，有需要的小伙伴参考下吧。 复制代码 代码如下:                                                                                             /* jquery easyui 操
table-td中的删除按钮控制删除一行tr
chongjijiang0160的博客
03-16 1136
var tr = "<tr><td >"; tr += data.id tr += "</td><td >"; tr += data.title; ...
js删除table某tr
weixin_43196575的博客
05-16 3442
<tr><td onclick="del_tr(this)" >删除</td></tr> // 删除一行 function del_tr(obj){ var index = $(obj).parents("tr").index(); //这个可获取当前tr的下标 未使用 $(obj).parents("tr").remove(); /...
html js删除table的子节点 删除tr标签 删除td标签 删除表格子节点
这个人很懒什么都没有留下
10-26 2762
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> </script> </head> <body> <table border="1" id="tb"> <tr> <
javascript让TR添加/删除TD
gaozhlzh的专栏
09-13 1946
条件: TR的ID为 tr01 代码: function add( text ){    var oTr = document.all("tr01");    var oTd = oTr.insertCell();    oTd.innerText = tex
js控制新增，删除table的tr，td
专注移动开发
06-23 752
js增加td，tr         //add a new row to the table    function addRow()    {     //add a row to the rows collection and get a reference to the newly added row     var newRow = document.all("tblG
使用js动态生成单元格，删除单元格操作
爬楼梯的前端小白的博客
01-24 1041
使用js动态生成单元格，删除单元格操作
JavaScript动态生成表格行的实现技巧
标题中提到的知识点是“JavaScript实现动态添加表格中的行”，这涉及了网页动态内容更新和前端编程技术。 首先，我们需要了解什么是表格（Table）。在HTML中，表格是由`<table>`标签创建的，通常包括`<tr>`（Table ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值