jqury 获取表格中点击删除图标后要删除一行的元素数据

20 篇文章 0 订阅

如题,我在界面上有个表格,表格每一行后面有个删除按钮,当我点击删除按钮时,我希望能获取按钮所在这一行的数据,以用来post到后端,在数据库中删除这一行数据

我的架构为django

1、表格的html

<table class="table table-striped">
              <thead>
                <tr>
                  <th>title</th>
                  <th>body</th>
                  <th>time</th>
                  <th>operation</th>
                </tr>
              </thead>
              <tbody>
                {% for emp in pagination.objs %}
                <tr>
                <td id="title">{{ emp.title }}</td>
                <td id="body">{{ emp.body }}</td>
                <td id="time">{{ emp.timestamp }}</td>
                <td>
                        <button type="button" class="btn btn-default btn-xs" οnclick="getedititem(this)">
                        <span class="glyphicon glyphicon-edit" aria-hidden="true"><span>
                        </button>
                        <button type="button" class="btn btn-default btn-xs" οnclick="getrmitem(this)">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"><span>
                        </button>
                </td>
                </tr>
                {% endfor %}
             </tbody>
          </table>
在这个html中,我在表格中的每一行的td标签中都加了id,便于获取数据。在删除按钮上加了Onclick,指定了getrmitem函数,并传this参数

html代码实现的页面如下:


当我点击第一行的删除按钮时,我希望能获取到第一行的title 和body这两列的数据

2、实现的getrmitem()函数

<script>
function getrmitem(obj){
var tr=$(obj).parent().parent();
var title = tr.children("td#title").text();
var body = tr.children("td#body").text()
alert("title:"+title+",body:"+body);
};
</script>
以上代码中,先调用了两次的parent函数,获取到点击的这一行的tr标签,再调用tr的children函数分别获取了标签为td,id为title和id为body的两个数据,通过alert函数提示出来

效果如下:


获得的数据就可以用来post到后端了

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值