table中checkbox取值

bestwinner

浏览: 19029 次
性别:
来自: 黄冈

最近访客更多访客>>

勇敢面对okk

996627445

Samxuewenming

傳古風

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript HTML J#JSP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE> New Document </TITLE></HEAD>

<BODY>
<table id="tabTest" width="320" border="1" cellspacing="1" bordercolor="red" >
<tr>
  <td><input type="checkbox" name="test" /></td><td><a href="page2.html">圣诞节</a></td>
  <td>111</td><td>aaa</td><td style="display:none">
   <input id="txtTest" type="text" name="haha" value="AAA"></td>
</tr>
<tr>
  <td><input type="checkbox" name="test" /></td><td><a href="#">股市</a></td>
  <td>222</td><td>bbb</td><td style="display:none">BBB</td>
</tr>
<tr>
  <td><input type="checkbox" name="test" /></td><td>阿凡达</td>
  <td>333</td><td>ccc</td><td style="display:none">CCC</td>
</tr>
<tr>
  <td><input type="checkbox" name="test" /></td><td>十月围城</td>
  <td>444</td><td>ddd</td><td style="display:none">DDD</td>
</tr>
<tr>
  <td><input type="checkbox" name="test" /></td><td>水价上调</td>
  <td>555</td><td>eee</td><td style="display:none">EEE</td>
</tr>
<tr>
  <td colspan="3" align="center"><input type="button" value="检测" id="btn" /></td>
</tr>
</table><br/><br/>
<script type="text/javascript">
    var test =document.getElementsByName("test");
    var btn =document.getElementById("btn");
    var aRows=document.getElementById("tabTest").rows;
    document.getElementById("txtTest").value='qqq2';
    btn.onclick = function(){
        for(var i=0; i<=test.length; i++){
            if(test[i].checked){
        alert("textValue:"+document.getElementById("txtTest").value +" rows[1].cells[2]value:"+aRows[1].cells[4].innerHTML);
                //return;
            }
        }
        //alert("一个也没有选！");
    };
</script>

<SCRIPT>
function createRows(){
// 插入两行。
var oRow1=oTable.insertRow(oTable.rows.length);
alert("1en:"+oTable.rows.length);
var oRow2=oTable.insertRow(oTable.rows.length);
alert("1en:"+oTable.rows.length);
// 获取表格的行集合。
var aRows=oTable.rows;
// 获取第一行的单元格集合。
var aCells=oRow1.cells;
// 在第一行中插入两个单元格。
var oCell1_1=aRows(oRow1.rowIndex).insertCell(aCells.length);
var oCell1_2=aRows(oRow1.rowIndex).insertCell(aCells.length);
// 获取第二行的单元格集合。
aCells=oRow2.cells;
// 在第二行中插入两个单元格。
var oCell2_1=aRows(oRow2.rowIndex).insertCell(aCells.length);
var oCell2_2=aRows(oRow2.rowIndex).insertCell(aCells.length);
// 为 4 个新单元格添加规范的 HTML 值。
oCell1_1.innerHTML="<B>Cell 1.1!</B>";
oCell1_2.innerHTML="<B>Cell 1.2!</B>";
oCell2_1.innerHTML="<B>Cell 2.1!</B>";
oCell2_2.innerHTML="<B>Cell 2.2!</B>";
}
</SCRIPT>
<INPUT TYPE="button" VALUE="创建行" onclick="createRows()">
<TABLE BORDER=1 ID="oTable">
<TR><TD>test1</TD><TD>test2</TD></TR>
</TABLE>

<br/><br/><span>分析html--输出选择的是表格的几行几列.--rowindex and cellIndex</span>

<table id="MyTable" border="1">
<tbody>
<tr><td>行1列１</td><td>行1列２</td><td>行1列3</td></tr>
<tr><td>行2列１</td><td>行2列２</td><td>行2列3</td></tr>
<tr><td>行3列１</td><td>行3列２</td><td>行3列3</td></tr>
</tbody>
</table>
<script type="text/javascript">
onload = function() {
    var rows = document.getElementById('MyTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    var cols;
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function() {
            alert("行:"+eval(this.rowIndex + 1));
        }
        cols = rows[i].getElementsByTagName('td');
        for (j = 0; j < cols.length; j++){
            cols[j].onclick = function() {
                alert("列:"+eval(this.cellIndex + 1));
            }
        }
    }
}
</script>

<br/>
单击可以实现增加删除复选框选项
<form id="form1" method="post" action="">
<input type="button" name="button" id="button" value="增加复选框" onclick="addck()"/>
<input type="button" name="button" id="button" value="删除选中的复选框" onclick="delck()"/>
</form>
<script language="javascript">
function addck(){
var ck = document.createElement("input");
ck.type = "checkbox";
ck.name = "ck";
document.body.appendChild(ck);

}
function delck(){
var inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++){
if(inputs[i].type =="checkbox"&&inputs[i].checked){
if(inputs[i].name=="ck"){
inputs[i].parentNode.removeChild(inputs[i]);
}
}
}
}
</script>

</BODY>
</HTML>

<br/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<input type="button" name="button" id="button" value="submit" onclick="openerwin()"/>
<script type="text/javascript">
function openerwin() {
window.opener.document.getElementById('txtTest').value="cell值改变了";

window.opener.document.getElementById('tabTest').rows[1].cells[2].innerText="88888888";
window.opener.document.getElementById('tabTest').rows[1].cells[4].innerText="99999999";
}
</script>