<html>
<head>
<style>
.btf{
height:28px;
background-color:#F8F0E1;
}
</style>
<script type="text/javascript">
var objTable;
function PageLoad(){
objTable = document.getElementById( "dataGrid" );//找到操作Table
}
function copyRow(){
var objTempRow = objTable.rows[2];//找到Table的模版行
var objNewRow = objTable.insertRow( objTable.rows.length );//在Table的末尾新增一行
objNewRow.className = "btf";//给表格的添加行样式
objNewRow.id = objTable.rows.length - 1;
//以模版行建立新行内容
for ( var i=0 ; i<objTempRow.cells.length ; i++ ){
var objNewCell = objNewRow.insertCell( i );
objNewCell.innerHTML = objTempRow.cells[i].innerHTML;
}
}
function deletelastRow(){
if ( objTable.rows.length -1 > 0 ){
objTable.deleteRow(objTable.rows.length-1); //删除指定行
}
}
function deletecheckedRow(){
if(document.all('idarray').value!='undefined'){
for(var i=document.all('idarray').length-1;i>-1;i--){
if(document.all('idarray')[i].checked==true){
var r=Number(document.getElementById('tb'+document.all('idarray')[i].value).rowIndex);
objTable.deleteRow(r);
}
}
}
}
function deleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
objTable.deleteRow(i);
}
function addRow1(){
var crTR = objTable.insertRow(); //增加一行
var crTDa = crTR.insertCell();//第一个TD
var crTDb = crTR.insertCell();//第二个TD,带rowspan=2
crTDb.rowSpan=2;//设成rowspan=2;
crTDb.colSpan=3;//设成colSpan=3;
var croTR = objTable.insertRow();//再插入一个TR
var croTD = croTR.insertCell();//TD,对应上边的rowspan=3的TD
//给单元格添加内容
crTDa.innerHTML="<b>111111</b>这里innerHTML";
crTDb.innerHTML="222222跨行跨列：rowspan=2,colSpan=3";
croTD.innerText="<b>333333</b>这里innerText";
croTD.width="20px;";//设置单列的宽度
croTD.height="80px;";//设置单列的高度
crTR.setAttribute('align','center');//这里通过setAttribute增加表单属性，
}
function addRow2(){
var crTR = objTable.insertRow();
var crTDa = crTR.insertCell();
var crTDb = crTR.insertCell();
crTDa.rowSpan=2;
crTDb.colSpan=3;
croTR = objTable.insertRow();
var crTDc = croTR.insertCell();
crTDc.colSpan=3;
crTDa.innerHTML="111111 rowspan=2";
crTDb.innerHTML="222222 colSpan=3";
crTDc.innerHTML="333333 colSpan=3";
}
function mergecells(){
if(objTable.rows[3].cells[3]==null)return false;//如果已经删除了，那就不允许再操作了
objTable.rows[3].cells[2].innerHTML=objTable.rows[3].cells[2].innerHTML+objTable.rows[3].cells[3].innerHTML;
objTable.rows[3].cells[2].colSpan=2;
objTable.rows[3].deleteCell(3);//删除指定列
//如果想要拆分单元格，那么1、可以先删除行，再添加新的行。
//2、可以在当前单元格中增加一个table，其行数和列数就是拆分的行数和列数。
}
function isshowtitlerow(){
if(document.getElementById("title").style.display=='')document.getElementById("title").style.display ="none";
else document.getElementById("title").style.display ="";
}
function addtable(){
var otable=document.createElement("table");//创建一表格
//设置table的属性
otable.setAttribute("CELLPADDING","0");
otable.setAttribute("CELLSPACING","0");
otable.setAttribute("border","1");
var otr=otable.insertRow();//创建一空行
var otd1 = otr.insertCell();//创建一空列
var otd2 = otr.insertCell();//创建一空列
otable.width='880';
otr.className = "btf"; //行添加样式
otd1.innerHTML = '单元格1'; //空列初始化值
otd2.innerHTML = '单元格2居中'; //空列初始化值
//设置列属性
otd2.style.background="#7596C6";
otd2.align="center";//等同.setAttribute('align','center');
document.getElementById('addtable').innerHTML="";
document.getElementById('addtable').appendChild(otable);//把表格追加到页面的div中
}
window.onload = PageLoad;//初始化获得所要操作的表格句柄
</script>
</head>
<body>
<table id="dataGrid" border="1" width="880" align="center">
<tr id="title">
<th> </th>
<th>权限组名</th>
<th>权限组描述</th>
<th>删除</th>
</tr>
<tr id="tb965">
<td><input type="checkbox" name="idarray" value="965" /></td>
<td>船舶签证</td>
<td>船舶签证啊啊</td>
<td><input type="button" value="删除当前行" onclick="deleteRow(this)"></td>
</tr>
<tr id="tb961">
<td><input type="checkbox" name="idarray" value="961" /></td>
<td>拷贝项</td>
<td>被拷贝</td>
<td><input type="button" value="删除当前行" onclick="deleteRow(this)"></td>
</tr>
<tr id="tb960">
<td><input type="checkbox" name="idarray" value="960" /></td>
<td>违章录入</td>
<td>违章录入哦</td>
<td><input type="button" value="删除当前行" onclick="deleteRow(this)"></td>
</tr>
</table>
<div id="addtable">在这里按“增加一个表格”会插入一个表格</div>
<input type="button" value="删除选中的行" onclick="deletecheckedRow();" />
<input id="btnInsert" name="btnInsert" type="button" onclick="copyRow()"
value="拷贝第二行(带样式)" />
<input id="btnDelete" name="btnDelete" type="button"
onclick="deletelastRow()" value="删除末行" />
<input type="button" value="增加一行（用setAttribute增加属性）"
onclick="addRow1();" />
<input type="button" value="增加一行(另)" onclick="addRow2();" />
<input type="button" value="隐藏/显示标题栏" onclick="isshowtitlerow();" />
<input type="button" value="取table的属性"
onclick="alert(objTable.getAttribute('id')+':'+objTable.getAttribute('border'));" />
<input type="button" value="合并第3行的后两列" onclick="mergecells();" />
<input type="button" value="增加一个表格" onclick="addtable();" />
<input type="button" value="共有多少行?"
onclick="alert(objTable.rows.length);" />
</body>
</html>
浙公网安备 33010602011771号