87,914
社区成员
发帖
与我相关
我的任务
分享求大神帮忙啊！！js动态删除table的行 不用那行的删除按钮
页面上有左中右3张表，左为用户表，中为显示各种表（如财务表、出库表等）的table，右为权限表(定义是只有表头，没有数据)。
现在要实现的功能是，先点左表选择用户（为单选），再点中表选择个类型表（为多选，每张表前一个checkbox，属性有table_id，table_name），然后在右表中设置已选用户对已选的各种表的权限；选择用户后，每勾选中表的一条数据，右表动态添加一条数据（显示形如：userName tableName 设置权限...），每取消勾选中表的一条数据，右表动态删除一条数据（该数据的table_name和中表取消勾选的的table_Name是一致的）。
我用var h=" <t r > <t d>。。< / t d>...<td>。。。<td> </ t r>";$("#tableid").append(h);实现了动态加行，就是没法实现删行，求大神帮忙看看，万分感谢！！！
还有，右表里是不用按钮的，右表的删行加行都是看中表的checkbox有没有被勾选。
现在要实现的功能是，先点左表选择用户（为单选），再点中表选择个类型表（为多选，每张表前一个checkbox，属性有table_id，table_name），然后在右表中设置已选用户对已选的各种表的权限；选择用户后，每勾选中表的一条数据，右表动态添加一条数据（显示形如：userName tableName 设置权限...），每取消勾选中表的一条数据，右表动态删除一条数据（该数据的table_name和中表取消勾选的的table_Name是一致的）。
我用var h=" <t r > <t d>。。< / t d>...<td>。。。<td> </ t r>";$("#tableid").append(h);实现了动态加行，就是没法实现删行，求大神帮忙看看，万分感谢！！！
还有，右表里是不用按钮的，右表的删行加行都是看中表的checkbox有没有被勾选。
...全文
请发表友善的回复…
发表回复
追赶追赶！ 2016-11-02
- 打赏
- 举报
谢谢各位的热心回答，我借鉴的方法做出来了。
if($("#isShow1_"+rowData.TABLE_NAME).prop("checked")){ //判断中表的checkbox有没有被勾选
var tr = document.getElementById('tr_'+ti); //根据ID获取行对象
tr.parentNode.removeChild(tr); //从右表中删除那一行
$("#isShow1_"+rowData.TABLE_NAME).attr("checked",false); //设置中表被点的那行中的checkbox为不勾选
}else{ //添加一行 }
当作看不见 2016-11-01
- 打赏
- 举报
根据dom树去找到对应的结点删除吧。看一下你的html表的结构.
一支糖包仔 2016-11-01
- 打赏
- 举报
你添加的时候要在每行里面加上id号或者别的，然后取消勾选的时候把参数传过去，js获取到再remove试试？
追赶追赶！ 2016-11-01
- 打赏
- 举报
要是我定义权限表（右表）的方式和动态添加一行的方式不能使删行实现的话，请指出可以的定义方式和实现动态加行的方法。我是新手，还请各位大神和前辈不吝赐教，万分感谢！！！
一支糖包仔 2016-11-01
- 打赏
- 举报
你记得你传值的时候传的这个值要一样啊，按F12调试看一下是不是你传值的时候没传好，或者ID错了。
一支糖包仔 2016-11-01
- 打赏
- 举报
HTML代码:
<table border="1" cellspacing="0px">
<tr>
<td>1</td>
<td><input type="text" id="txt" /></td>
<td>xxx</td>
</tr>
<tr id="tr">
<td>2</td>
<td><input type="text" id="txt2" /></td>
<td>yyy</td>
</tr>
<tr>
<td>3</td>
<td><input type="text" /></td>
<td>zzz</td>
</tr>
</table>
<input type="button" value="按文本框ID删除" onclick="DelForTxt()" />
<input type="button" value="按tr标签删除" onclick="DelForTr()" />
JS代码:
function DelForTxt(){
$("#txt").parent().parent().remove();
}
function DelForTr() {
$("#tr").remove();
}
我都测试过了，可以这样用。
Hello World, 2016-11-01
- 打赏
- 举报
$(inputid)=>$('#' + inputid)
一支糖包仔 2016-11-01
- 打赏
- 举报
我在动态添加行的时候，给那行的每个<input>都加了唯一不重复id，
删除行的时候，用的$(inputid).parent().parent().remove();inputid是那行的某一个input的id，从网上看的方法，但是不起作用，FireBug也不报错，不知怎么回事。[/quote]
理论上是这样啊，你直接给<tr>标签里面赋id然后remove（）试试？
追赶追赶！ 2016-11-01
- 打赏
- 举报
我在动态添加行的时候，给那行的每个<input>都加了唯一不重复id，
删除行的时候，用的$(inputid).parent().parent().remove();inputid是那行的某一个input的id，从网上看的方法，但是不起作用，FireBug也不报错，不知怎么回事。
追赶追赶！ 2016-11-01
- 打赏
- 举报
代码太长，我把模糊查询给删了，还有就是最外面的table的<tr></tr>里的第一个<td></td>里面是用户表，写法和中间那张表一样，都用了<c:datagrid>
追赶追赶！ 2016-11-01
- 打赏
- 举报
下面是<body>里面的内容，<c:datagrid>标签是公司自己封装的，类似Easyui的datagrid，就是输出一张表
<table>
<tr>
<td>
</td>
<td>
<div class="buildOrangeArea">
<c:datagrid url="/pages/audit/download/authority/addAction.jsp?eaction=tableList" id="Table" onClickRow="onClickRow1" rownumbers="false" fit="true" onLoadSuccess="setAdv1">
<thead>
<tr>
<th field="cz" formatter="formatterCheckBox" align="center" width="15px"></th>
<th field="TABLE_NAME" width="40">表ID</th>
<th field="TABLE_ALIAS" width="70">表名称</th>
</tr>
</thead>
</c:datagrid>
</div>
</td>
<td>
<div class="buildPurpleArea" style="overflow:auto">
<h3 class="auditTableHead">
权限表
</h3>
<form action="userAuthority.jsp" method="post" id="save1">
<table class="pageTable" id="itab">
<tr>
<td align='center'>用户名</td><td style="display:none"></td><td align='center'>表名</td><td style="display:none"></td>
<td align='center'>读取</td><td align='center'>下载</td><td align='center'>开始账期</td><td align='center'>结束账期</td>
<td align='center'>地域</td>
</tr>
</table>
</form>
</div>
</td>
</tr>
</table>
