extwindow属性
html中标签中的static属性
把所有代码都给你粘上了。其中有全选、反选希望会对你有用，像你说的这种需求就是在点击是出现具体信息。你看看add（）方法就可以了就是在其下边追加一行，并且在行里写上详细信息。如果你会AJAX的话你可以研究一下，那才叫技术呢！
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""">
<html>
<head>
<script type="text/javascript">
function del(a){
var sid=document.getElementById(a).rowIndex;
var aparent=document.getElementById(a).parentNode;
aparent.deleteRow(sid-1);
}
function delchecked(){
var arr= document.getElementsByName("check1");
for(var i=0;i<arr.length;i++){
if(arr[i].checked){
var parent=arr[i].parentNode.parentNode.parentNode;
parent.removeChild(arr[i].parentNode.parentNode);
}
}
}
function checkall(){
var arr=document.getElementsByName("check1");
var tag=false;
for(var i=0;i<arr.length;i++){
if(!arr[i].checked){
tag=true;
}
}
for(var i=0;i<arr.length;i++){
arr[i].checked=tag;
}
}
function reversecheck(){
var arr= document.getElementsByName("check1");
for(var i=0;i<arr.length;i++){
if(arr[i].checked){
arr[i].checked=false;
}else{
arr[i].checked=true;
}
}
}
function sub(){
var arr= document.getElementsByName("check1");
for(var i=0;i<arr.length;i++){
if(arr[i].checked){
alert("选择了"+(i+1));
}
}
}
function add(){
var a=document.getElementById("mytbody");
var rowlength=a.rows.length;
var row=a.insertRow(rowlength);
row.id="tr"+rowlength;
row.insertCell(0).innerHTML="<input type='checkbox' name='check1' value='"+rowlength+"'/>";
row.insertCell(1).innerHTML=rowlength;
row.insertCell(2).innerHTML="俺是新手";
row.insertCell(3).innerHTML="happy";
row.insertCell(4).innerHTML="再看就把你喝掉";
row.insertCell(5).innerHTML="<a href=\"javascript:del('tr'+"+rowlength+");\">删除</a>";
}
</script>
<style type="text/css">
table{
width:600px;
}
.b2{
border:thin solid red;
}
.f{
color:green;
}
</style>
</head>
<body>
<table border="1" id="table">
<thead>
<tr>
<th> </th>
<th>学号</th>
<th>用户名</th>
<th>密码</th>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody id="mytbody">
<tr id="tr1">
<td><input type="checkbox" name="check1" value="1"/></td>
<td>1</td>
<td>小森</td>
<td>xs</td>
<td>aaaaaaaa</td>
<td><a href="javascript:del('tr1');">删除</a></td>
</tr>
<tr id="tr2">
<td><input type="checkbox" name="check1" value="2"/></td>
<td>2</td>
<td>大森</td>
<td>ds</td>
<td>bbbbbbb</td>
<td><a href="javascript:del('tr2');">删除</a></td>
</tr>
<tr>
<a href="javascript:checkall();">全选</a>
<a href="javascript:reversecheck();">反选</a>
<a href="javascript:sub();">提交</a>
<a href="javascript:delchecked();">删除</a>
<a href="javascript:add();" style="float:right margin-right:15px" class="b2 f">添加行</a>
</tr>
</tbody>
</table>
</body>
</html>
相关文章
