jquery添加TR

jquery添加TR,第1张

<!DOCTYPE html>

<html>

  <head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>

<title>

RunJS 演示代码

</title>

<script>

jQuery(function($){

var table = $("table")

var addbtn = $("button:contains('添加')").click(function(){

if(table.data("ing") == 1) {

alert("必须保存这个TR中输入的值之后,才能再次添加TR,否则不能再次添加")

return

}

var txt = $("<tr><td><input type='text' /></td></tr>")

table.append(txt).data("ing", 1).prop("txt", txt.find(":text")) 

})

$("button:contains('保存')").click(function(){

var txt = table.prop("txt")

if(table.data("ing")==0){

alert("你已经保存过了,不能更改,具体参考提问者需求")

return

}

if(txt.val() == ""){

alert("填写好数据再保存")

txt.focus()

return

}else{

txt.prop("readonly",true)

table.data("ing", 0)

}

})

})

</script>

  </head>

<body>

<table>

</table>

<button>

添加

</button>

    <button>

保存

</button>

  </body>

</html>

HTML程序

<script language="javascript" src="k.js"></script>

ID:<input type="text" id="t2"/><br/>

名称:<input type="text" id="t3"/>

<input type="button" value="添加" onclick="addRow()"/>

<table id="t1" border="1">

<tr>

<td>ID</td>

<td>名称</td>

</tr>

<tr>

<td>1</td>

<td>dfa</td>

</tr>

</table>

js程序

function addRow(){

var t=document.getElementById("t1")

var row=t.insertRow(t.rows.length)

var cell1=row.insertCell(0)

cell1.innerHTML=document.getElementById("t2").value

var cell2=row.insertCell(1)

cell2.innerHTML=document.getElementById("t3").value

}

增删一个节点,要先看所增删的节点是在那个“父亲”下。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存