table中checkbox取值
时间：2010-07-17 来源：bestwinner
<!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="qqq1"></td>
<tr>
<td><input type="checkbox" name="test" /></td><td><a href="#">股市</a></td>
<td>222</td><td>bbb</td><td>aaa2</td>
</tr>
<tr>
<td><input type="checkbox" name="test" /></td><td>阿凡达</td>
<td>333</td><td>ccc</td><td>aaa3</td>
</tr>
<tr>
<td><input type="checkbox" name="test" /></td><td>十月围城</td>
<td>444</td><td>ddd</td><td>aaa4</td>
</tr>
<tr>
<td><input type="checkbox" name="test" /></td><td>水价上调</td>
<td>555</td><td>eee</td><td>aaa5</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("当前有选中！行:"+i+" ,innerHTML值"+aRows[i].cells[4].innerHTML);
alert("textValue:"+document.getElementById("txtTest").value);
//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>
<!--
<input type="checkbox" name="a" id="a" value="1" checked="checked">1<br />
<input type="checkbox" name="a" id="a" value="2" checked="checked">2<br />
<input type="checkbox" name="a" id="a" value="3">3<br />
<input type="checkbox" name="a" id="a" value="4" checked="checked">4<br />
如何才能在JSP中也能得到各选中的值（同名同ID）得到是1，2，4
String[] abc = request.getParameterValues("a");
for(int i = 0;i < abc.length;i++){
out.println(abc[i]);
}
-->
<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/>
<a href="page2.html">圣诞节</a>
<!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值改变了";
}
</script>
</BODY>
</HTML>
相关阅读 更多 +
