GridView JS动态添加行

GridView JS动态添加行,第1张

如果你用gridview控件,想实现js添加行,是比较困难的。因为gridview会自己生成一些东东,js添加行的时候,你不知道它会生成什么。

推荐使用repeater控件,这个控件不会生成多余的代码。这样你可以直接用js生成tr,td,就可以了。

你直接用我的代码吧,我改了不少:

<body>

<form>

姓名:<input type="text" name="姓名" id="name" />&nbsp成绩:<input type="text" name="成绩" id="score" />&nbsp<input type="button" id="saveBtn" value="保存" onclick= "Add()" />

</form>

<br />

<table width="100%" border="1" id="SmithTb">

<tr><td width="30%"><input type="checkbox" id="ckall" />&nbsp选择</td><td width="30%">姓名</td><td width="40%">成绩</td></tr>

<tr><td><input type="checkbox" class="cbx" /></td><td width="30%">张三</td><td width="30%">70</td>

<tr><td><input type="checkbox" class="cbx" /></td><td width="30%">李四</td><td width="30%">90</td>

</table>

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

<script type="text/javascript">

$(document).ready(function(){

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

var th = $(this).is(":checked")

$(".cbx").each(function(){

$(this).attr("checked", th)

})

})

})

function Add(){

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

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

var isAdd = true

$(".cbx").each(function(){

if($(this).is(":checked")){

isAdd = false

$(this).parent("td").next("td").text(name)

$(this).parent("td").next("td").next("td").text(score)

}

})

if(isAdd)

$("#SmithTb").append('<tr><td><input type="checkbox" class="cbx" /></td><td width="30%">'+name+'</td><td width="30%">'+score+'</td></tr>')

}

</script>

</body>


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

原文地址: https://outofmemory.cn/bake/11853558.html

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

发表评论

登录后才能评论

评论列表(0条)

保存