有没有什么办法,可以动态的在html表格中插入列和行

有没有什么办法,可以动态的在html表格中插入列和行,第1张

//动态添加行与列

function addHtml( )

{

var tab=document.getElementById("viewTabs")//获得表格

var colsNum=tab.rows.item(0).cells.length //表格的列数

var num=document.getElementById("viewTabs").rows.length//表格当前的行数

var rownum=num-1

tab.insertRow(rownum)

for(var i=0i<colsNum-1i++)

{

tab.rows[rownum].insertCell(i)//插入列

tab.rows[rownum].cells[i].innerHTML="dfd"

}

tab.rows[rownum].insertCell(i)

tab.rows[rownum].cells[i].innerHTML="ddddkk"

}

htm给table标签动态添加 tr(行),具体参考代码如下:

<html>

<head>

<title>usually function</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

</head>

<script type="text/javascript" src="jquery-1.4.4.js"></script>

<body>

<table border="1px" id="targetTable">

<tr border="1px">

<td>序号</td>

<td>姓名</td>

<td>年龄</td>

<td>生日</td>

<td>备注</td>

</tr>

<tr id="model" style="display:none" border="1px">

<td></td>

<td><input type="text" name="username"></td>

<td><input type="text" name="age"></td>

<td><input type="text" name="birthday"></td>

<td><input type="text" name="note"><span onclick="del(this)">删除</span></td>

</tr>

</table>

<br>

<br>

用户输入表单

姓名<input type="text" name="u_username"><br>

年龄<input type="text" name="u_age"><br>

生日<input type="text" name="u_birthday"><br>

备注<input type="text" name="u_note"><br>

<button onclick="add()" style="font-size:12px">添加</button>

</body>

<html>

<script>

function del(obj){

//alert($(obj).closest("tr").attr("outerHTML"))

//$(obj).closest("tr").attr("outerHTML","")

$(obj).closest("tr").remove()

resetSequenceNum()

}

function add(){

//获取表单的值

var u_username = $("input[name='u_username']").val()

var u_age = $("input[name='u_age']").val()

var u_birthday = $("input[name='u_birthday']").val()

var u_note = $("input[name='u_note']").val()

//alert(u_username)

//判断表单的值是否为空

if(u_username=="" || u_username==undefined){

alert("用户姓名不能为空")

$("input[name='u_username']").focus()

return false

}

//缓存要赋值的内容,避免多次查询,提高效率

var trstr = $("#model").attr("outerHTML")

//alert(trstr)

//复制最后一行的代码添加到表的最后一行

$("#targetTable tr").last().after(trstr)

//$("#targetTable").find("tr").last().after(trstr)

//让最后一行显示出来,而不是隐藏

//$("#targetTable tr").last().css("display","block")会出现浏览器兼容的问题,在ff中显示不正常

$("#targetTable tr").last().css("display","")

//赋值

var target = $("#targetTable tr").last().find("td")

target.find("input[name='username']").val(u_username)

target.find("input[name='age']").val(u_age)

target.find("input[name='birthday']").val(u_birthday)

target.find("input[name='note']").val(u_note)

resetValue()

resetSequenceNum()

}

//清空表单的值

function resetValue(){

$("input[name='u_username']").val("")

$("input[name='u_age']").val("")

$("input[name='u_birthday']").val("")

$("input[name='u_note']").val("")

}

//重新设置序号

function resetSequenceNum(){

var num=0

$("#targetTable tr").each(function(index,dom){

if(index!=0){

$(dom).find("td").first().html(num)

num++

}

})

}

</script>


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

原文地址: http://outofmemory.cn/zaji/7271427.html

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

发表评论

登录后才能评论

评论列表(0条)

保存