jquery给表格动态添加删除行后如何获取数据_IT百科

一共有两种方式获取：

1.当你点击添加按钮的时候。直接从后面取出表格和数据。下面付ajax方法。

2.把你的数据保存在隐藏表单中，点击添加按钮的时候在从隐藏表单中把数据取出来添加到表格中。

$.ajax({

type: "get",

cache:false,//设置缓存为FALSE

url: url//须要处理的后台页面

beforeSend: function(XMLHttpRequest){

//在显示之前你要干什麼?

//ShowLoading()

//显示成功后你要做什麼动作，data是你重后台提交的数据textStatus是状态，这两个

值可以重命名比如(a,b)

success: function(data, textStatus){

$(".tb").html(date)

})

//完成后你要干什麼，和成功后的区别是：不管成不成功都会到这个阶段。

complete: function(XMLHttpRequest, textStatus){

//HideLoading()

}

})

window.onload = function () {

const params = document.getElementById('params')

const ul = params.querySelector('ul')

const addBtn = ul.querySelector('#add')

addBtn.onclick = function (e) {

const newli = document.createElement('li')

newli.appendChild(document.createElement('input'))

const btn = document.createElement('input')

btn.setAttribute('type', 'button')

btn.setAttribute('value', '删除')

btn.setAttribute('opt-type', 'del')

newli.appendChild(btn)

ul.appendChild(newli)

}

ul.onclick = function (e) {

const target = e.target

const optType = target.getAttribute('opt-type')

if (target.nodeName === 'INPUT' && target.type === 'button' && optType === 'del') {

this.removeChild(target.parentNode)

}

} <div id="params">

<ul>

</ul>

</div>

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

这个问题我需要用一段代码来实现，步骤如下：

1.把相关的标签写上

<head>

<title>无标题文档</title>

$(document).ready(function (){

$("#submit").click(function (){

2.然后，先获取文本框的值

var $name=$("#name").val()

var $email=$("#email").val()

var $phone=$("#phone").val()

3.创建tr、td并且把内容放入td中

var $tr=$("<tr><td>"+$name+"</td><td>"+$email+"</td><td>"+$phone+"</td><td><a href='#' class='lj'>DELETE</a></td></tr>")

$tr.appendTo("#table")

4.如果在函数内部进行删除，直接使用click即可

$(".lj").click(function (){

5.$(this)获取的是点击的对象，点击的对象是a标签，a标签的上一级的上一级是tr

$(this).parent().parent().remove()

})

6.最后，如果在外部进行删除，需要使用live进行删除

$(".lj").live("click",function (){

//删除

$(this).parent().parent().remove()

})

</script>

</head>

<body>

<form >

姓名:<input type="text" id="name" />

email:<input type="text" id="email" />

电话:<input type="text" id="phone" /><br /><br />

</form>

<td>email</td>

</tr><br />

</table>

</div>

</body>

</html>

</pre><pre class="html" name="code">parent：查找每个段落的父元素</pre><pre class="html" name="code">live:live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。</pre><pre class="html" name="code">传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。</pre><pre class="html" name="code">live应用小例子：<body> <div class="clickme">Click here</div></body></pre><pre class="html" name="code">可以给这个元素绑定一个简单的click事件：</pre><pre class="html" name="code">$('.clickme').bind('click', function() { alert("Bound handler called.")})</pre><pre class="html" name="code">当点击了元素，就会d出一个警告框。然后，想象一下这之后有另一个元素添加进来了。</pre><pre class="html" name="code">$('body').append('<div class="clickme">Another target</div>')</pre><pre class="html" name="code">尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。 </pre><pre class="html" name="code">.live() 就提供了对应这种情况的方法。</pre><pre class="html" name="code">如果我们是这样绑定click事件的： </pre><pre class="html" name="code">$('.clickme').live('click', function() { alert("Live handler called.")})然后再添加一个新元素： $('body').append('<div class="clickme">Another target</div>')</pre><pre class="html" name="code">然后再点击新增的元素，他依然能够触发事件处理函数。 </pre><br>

<br>

以上步骤就能实现动态删除表格行

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11415010.html

jquery给表格动态添加删除行后如何获取数据

发表评论

评论列表（0条）