点击表格中的a标签删除当前行js

点击表格中的a标签删除当前行js,第1张

点击事件,点击后将该行的<tr>标签删除就行了。
先使用for循环给每个<tr>增加一个index值(序号),获取到a标签,然后parentNode找到父级的父级<tr>,获取到当前tr标签的序号,再获取到父级removeChild(elem)删除掉该子元素。

$("#ffw")click(function(){
$("#ddd tr:last-child")remove();
})

利用jquery就很简单了,记得把tr的id='tt'去掉 这个是从最后一行开始删除 要从第一个开始删除就first-child

var table = documentgetElementById("tableID");//获取表格对象
var tds = tablegetElementsByTagName("td");//获取跨列td;
for(var iInd=0;iInd<tdslength;iInd++){
    if(tds[iInd]colSpan && tds[iInd]colSpan > 1){
        tds[iInd]parentNodesetAttribute("del","true");//给删除的行加入标记
    }
}
for(var iInd=0;iInd<tablerowslength;iInd++){
    if(tablerows[iInd]getAttribute("del")){
       tabledeleteRow(iInd);//删除标记行
       iInd -= 1;
    }
}

<script type="text/javascript">
function remove() {
    var table = documentgetElementById("table"),
        trs = tablegetElementsByTagName("tr");
          
    for(var i = trslength - 1; i > 0; i--) {
        tabledeleteRow(i);
    }
}
</script><table border="1" id="table">
<tr><td colspan="2">标题</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td></tr>
</table>
<input type="button" onclick="remove()" value="删除" />

windowonload = function () {
    const params = documentgetElementById('params');
    const ul = paramsquerySelector('ul');
    const addBtn = ulquerySelector('#add');
    addBtnonclick = function (e) {
        const newli = documentcreateElement('li');
        newliappendChild(documentcreateElement('input'));
        const btn = documentcreateElement('input');
        btnsetAttribute('type', 'button');
        btnsetAttribute('value', '删除');
        btnsetAttribute('opt-type', 'del');
        newliappendChild(btn);
        ulappendChild(newli);
    }
    ulonclick = function (e) {
        const target = etarget;
        const optType = targetgetAttribute('opt-type')
        if (targetnodeName === 'INPUT' && targettype === 'button' && optType === 'del') {
            thisremoveChild(targetparentNode)
        }
    }
}<div id="params">
    <ul>
        <li><input type="text"><input id="add" type="button" value="添加一行"></li>
    </ul>
</div>

点击"添加一行",生成一条li,包含input,然后append进ul里边。点击删除,用ul删除按钮父元素li。

1、自行百度搜索jQuery,然后把jQuery给下载到电脑里面。

2、版本下载完毕。

3、新建一个HTML文件,并且把HTML文件和jQuery放在同一个文件夹里面。

4、使用sublime打开HTML文件,然后用script标签来引入jQuery。如图所示,src后面接的就是jQuery所在的路径。

5、再另外写一个script标签,一定是要另外写,不然待会jQuery不生效的了。

6、在第二个script标签里面写上jQuery的加载函数就可以了。加载函数里面就可以调用jQuery代码了。

不知道你用的是源生的js,还是某个框架(其实哪个我也不太熟)。仅提供一个思路:
//添加按钮的事件,创建数据行和删除按钮所在行
function addRows(){
var rows=[];//数据行对象
//生成数据行对象,存入rows中
//插入数据行
var deleteRow=object //删除按钮所在行
//插入删除按钮所在行
//为删除按钮定义事件
deleteBtnclick=function(){
rows//引用上面的 rows 数据行对象,执行删除 *** 作。
}
}

您好!很高兴为您答疑。
这个功能可以用jquery简单实现,其实表格就是一旦格式化的html代码。
//添加行
function appendRow(){
var tr = $("#jmcyxm1")clone(true);//克隆一行
trfind("td:last")html("<img src='你的gif' onclick='delRow(this);'title='删除'>");
trinsertBefore("#table2 tr:last");//把这行加到表格的倒数第二行,表格添加完毕
}
//删除相对应的行
function delRow(rows)
{
$(rows)parent("td")parent("tr")remove();
}
如果对我们的回答存在任何疑问,欢迎继续问询。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12677276.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-27
下一篇 2023-05-27

发表评论

登录后才能评论

评论列表(0条)

保存