表格内嵌单选按钮功能示例资源-CSDN下载

共1个文件

html：1个

3星 · 超过75%的资源需积分: 11 4 浏览量 2008-03-28 13:53:02 上传评论 1 收藏 1KB RAR 举报

在网页设计中，实现表格中的单选按钮功能是一项常见的需求，尤其在数据展示或用户选择操作时。"表格实现单选按钮"这个标题所指的知识点主要是如何在HTML表格（`<table>`）中集成单选按钮（`<input type="radio">`），并处理相关的事件，比如点击事件，来实现单选功能。单选按钮通常用于限制用户只能从多个选项中选择一个。在描述中提到的"一个小例子"可能包含了一个简单的代码示例，例如使用HTML、CSS和JavaScript（可能是jQuery或其他库）来创建一个具有单选功能的表格。下面我们将详细讲解这一过程： 1. **HTML结构**： - 创建`<table>`元素，包含`<tr>`行和`<td>`单元格。 - 在每个需要单选的单元格内添加`<input type="radio">`，并设置唯一的`name`属性，以便它们构成一个单选组。 - 通常，还会有一个`<label>`元素与单选按钮关联，提供可点击的文字区域。 2. **CSS样式**： - 使用CSS调整单选按钮和表格的样式，使其与页面设计保持一致。 - 可能会用到`:checked`伪类来改变已选中按钮的样式。 3. **JavaScript交互**： - 使用JavaScript监听单选按钮的`change`或`click`事件，当用户选择一个选项时，取消其他所有选项的选中状态。 - 如果使用jQuery，可以使用`$('input[type="radio"]').prop('checked', false)`来取消选中所有单选按钮，然后通过`$(this).prop('checked', true)`来设置当前点击的单选按钮为选中状态。 4. **事件委托**： - 为了提高性能和减少代码，可以使用事件委托。在表格的外层容器（如`<table>`或其父元素）上添加事件监听器，而不是在每个单选按钮上添加，这样可以处理未来动态添加的单选按钮。 5. **响应式设计**： - 考虑到移动设备和平板电脑的触摸操作，确保单选按钮和标签在触摸设备上的交互体验良好。 6. ** Accessibility**： - 为了使表单对辅助技术友好，确保每个`<input>`都有相关的`<label>`，并通过`for`属性将它们关联起来。通过以上步骤，我们可以创建一个用户友好的、具有单选功能的表格。提供的文件"表格实现单选.html"很可能包含了这些实现细节，通过查看源代码，我们可以学习到更具体的实现方式。不过，这里已经给出了一个通用的实现框架，你可以根据实际需求进行调整。

资源推荐

资源详情

资源评论

收起资源包目录

表格实现单选.rar （1个子文件）

表格实现单选.html 4KB

<html> <title></title> <head></head> <script language="javascript"> function showImg(id){ //将当前选中的其他置空 var head = id.substring(0,1);//主属性，德、能、勤、绩、廉 var detail = id.substring(3,1);//明细数据，甲、乙、丙、丁 var tail = id.substring(3,2);//得到所在行下标 var one = head+"J"+tail; var two = head+"y"+tail; var three = head+"B"+tail; var four = head+"D"+tail; var hiddenname = head+tail; alert(hiddenname); document.getElementById(hiddenname).value=id; document.getElementById(one).innerHTML=" "; document.getElementById(two).innerHTML=" "; document.getElementById(three).innerHTML=" "; document.getElementById(four).innerHTML=" "; document.getElementById(id).innerHTML="<font style='color:red;font-weight:bold'>√</font>"; } function showResult(){ var dvalue = document.forms[0].D0.value; var nvalue = document.forms[0].N0.value; alert(dvalue); alert(nvalue); } //得到当前表格总行数 function getRowcount(){ table1 = document.getElementById("TICKET"); var count = 0; for(var i=0,l=table1.rows.length;i<l;i++) { //这段是判断是否全行都为空。 /*if(!/^\s*$/.test(table1.rows[i].cells[0].innerHTML.replace("&nbsp",""))) { count++; }*/ count++; } return count; } </script> <body> <form name=""> <HR width="60%" align="center" /> <table id="TICKET" width="60%" align="center" border="1"> <tr> <td align="center" >姓名</td> <td align="center" colspan="4">德</td> <td align="center" colspan="4">能<td> </tr> <tr> <td align="center"> </td> <td align="center">甲</td> <td align="center">乙</td> <td align="center">丙</td> <td align="center">丁</td> <td align="center">甲</td> <td align="center">乙</td> <td align="center">丙</td> <td align="center">丁</td> </tr> <tr> <td align="center">王</td> <td align="center" id="DJ0" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="DY0" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="DB0" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="DD0" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="NJ0" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="NY0" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="NB0" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="ND0" onclick="javascript:showImg(this.id)"> </td> <input type="hidden" name="D0" value=""> <input type="hidden" name="N0" value=""> <input type="hidden" name="Q0" value=""> <input type="hidden" name="J0" value=""> <input type="hidden" name="L0" value=""> </tr> <tr> <td align="center">李</td> <td align="center" id="DJ1" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="DY1" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="DB1" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="DD1" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="NJ1" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="NY1" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="NB1" onclick="javascript:showImg(this.id)"> </td> <td align="center" id="ND1" onclick="javascript:showImg(this.id)"> </td> <input type="hidden" name="D1" value=""> <input type="hidden" name="N1" value=""> <input type="hidden" name="Q1" value=""> <input type="hidden" name="J1" value=""> <input type="hidden" name="L1" value=""> </tr> </table> <HR width="60%" align="center" /> <div align="center"><input type="button" name="button" value="click me" onclick="javascript:showResult()"></div> <HR width="60%" align="center" /> </form> </body> </html>

评论收藏

内容反馈