table的一些操作

最新推荐文章于 2025-05-03 20:55:19 发布

最新推荐文章于 2025-05-03 20:55:19 发布 · 117 阅读

11 篇文章

订阅专栏


<script>
function test(){
	var tb=document.getElementById("tb1");
	var td1=tb.rows[0].cells[0];//第一行第一列
	td1.id='24';//设置id的值
	td1.setAttribute('value',45); //添加属性value并设置值是45
	alert(tb.rows[0].cells[0].id);//24
	alert(tb.rows[0].cells[0].value);//45
	alert(tb.rows[0].innerHTML);
}
</script>
<table id='tb1'><tr><td id="21"></td></tr></table>
<input type=button value="test" onclick="test()">


<script>
	function Add(){


		var tb=document.getElementById("testReportTable");
		var trs=tb.rows;
		//取得第二行第四列第一个子节点的值
		alert(trs[1].cells[3].childNodes[0].value);//22
		a=parseFloat(trs[1].cells[3].childNodes[0].value);
		alert(a);//22		
	}	
</script>

<table id="testReportTable">
	<tr><td><input type="text" value="a1"></td>
		<td><input type="text" value="b1"></td>
		<td><input type="text" value="c1"></td>
		<td><input type="text" value="11"></td>
		</tr>
			<tr><td><input type="text" value="1"></td>
		<td><input type="text" value="2"></td>
		<td><input type="text" value="33"></td>
		<td><input type="text" value="22"></td>
		</tr>
	</table>
	<input type="button" value="Adddd" onclick="Add()">

colSpan.,,,产看一行有多少列


<table width="400" border="1" cellspacing="0" cellpadding="0" id="table2">
	<tr><td>aaaaaaa</td><td colspan='5'></td></tr>
</table>
<input type="button" onclick="seeTb2()" value="查看table2">
<script>
	function $(s){
		return document.getElementById(s);	
	}
	function 	seeTb2(){
			var vtbl=$('table2');
			var vrow1=vtbl.rows[0];

			alert(GetRowCols(vrow1));
	}

	 function GetRowCols(oRow) {
    if (oRow == null) {
      return 0;
    }
    var vLen = oRow.cells.length;
    //alert("row.length:"+vLen);    
    var oCell = null;
    var vCols = 0;
    for (var i=0; i<vLen; i++) {
      oCell = oRow.cells[i];
      vCols = vCols + oCell.colSpan;
    }
    return vCols;
  }
</script>