在表table最前插入tr多行并改为正常排列的序号

来源：互联网发布：数据挖掘视频教程42讲编辑：程序博客网时间：2024/05/16 05:41

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试页面</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="dd" >
<table id="aa">




</table>
<div>
<input type="button" value="增加到第一行" onclick="addRow();"/>
</div>
</div>
<div>
<table id="sample_editable_1">
<thead>
<tr role="row">
<th style="width: 60px; text-align: center;" colspan="1"
rowspan="1" aria-controls="sample_editable_1" tabindex="0"
role="columnheader">序号</th>
<th style="width: 160px; text-align: center;" colspan="1"
rowspan="1" aria-controls="sample_editable_1" tabindex="0"
role="columnheader">名称</th>
<th style="width: 80px; text-align: center;" colspan="1"
rowspan="1" aria-controls="sample_editable_1" tabindex="0"
role="columnheader">操作</th>
</tr>
</thead>
<tbody aria-relevant="all" aria-live="polite" role="alert" id="userSelect" align="center">






</tbody>
</table>
</div>
<div>
<input type="button" value="增加到第一行" onclick="addRow1()"/>

</div>

//////////////////////////////方法一：before()（此方法最简，推荐）

function addRow1(){

alert("table下的行数："+$("tbody#userSelect tr:visible").length);

//要插入的多行数据

var str='<tr><td class="sorting_1">1</td><td>这是新加名称td2</td><td>这是新加操作td3</td></tr><tr><td class="sorting_1">2</td><td>这是新加名称td2</td><td>这是新加操作td3</td></tr>';

//如果原table已经有tr，即已经有数据

if($("tbody#userSelect tr:visible").length>0){
alert("原有tr元素："+$("tbody#userSelect tr:visible").html());//如果有多个tr，此处只能取到第一个tr
var num = $("tbody#userSelect tr:visible td").eq(0).text();

alert("取得的序号："+num);

//循环改已有多行数据的序号（即这些序号要加上等待插入的数据的行数）

$("tbody#userSelect tr:visible").each(function(){
var nn = str.split("<tr").length-1;//获取要插入数据的行数
var v = $(this).find("td").eq(0).text();//取序号
$(this).find("td").eq(0).text(parseInt(v)+nn);//改已有数据的序号
alert("循环获取每个tr中的序号："+$(this).find("td").eq(0).text());
}
);

$("#userSelect tr").eq(0).before(str);//before()方法

}else{ //如果原table没有tr
$("#userSelect").html(str);
}
}
////////////////方法二：这是insertCell()方法（此方法最繁，不推荐）/////////////
function addRow(){
var addTable=$("#aa");
var row_index=0; //新插入行在表格中的位置:第一行
// var row_index=addTable.rows.length-1; //新插入行在表格中的位置最后一行
var newRow=addTable.insertRow(row_index); //插入新行
newRow.id="row"+row_index; //设置新插入行的ID

var col1=newRow.insertCell(0);
col1.innerHTML="你好";

var col2=newRow.insertCell(1);
col2.innerHTML=row_index;

var col3=newRow.insertCell(2);
col3.innerHTML="¥49.00";

// var col4=newRow.insertCell(3);
//col4.innerHTML="<input name='del"+row_index+"' type='button' value='删除' onclick="delRow('row"+row_index+ "')" >";

}

$(function(){

})

</script>
</body>

</html>

-----------------------------------------------------------------

方法三：还有JQuery的insertBefore()方法可用（此方法也比较简单，推荐）：

参考：http://www.w3school.com.cn/tiy/t.asp?f=jsref_node_insertbefore

1 0