<!doctype html>
<html>
<head>
<title>table contenteditable</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript">
var students = [
{ 'no': 'S001', 'name': '张三', 'address': '浙江' },
{ 'no': 'S002', 'name': '李四', 'address': '江苏' },
{ 'no': 'S003', 'name': '王五', 'address': '福建' },
{ 'no': 'S004', 'name': '马六', 'address': '四川' }
]
$(function () {
InitStudents()
})
function InitStudents() {
var html = ''
$.each(students, function (i, item) {
html += '<tr>'
html += '<td>' + item.no + '</td>'
html += '<td><span contenteditable="true" class="studentname">' + item.name + '</span></td>'
html += '<td>' + item.address + '</td>'
html += '</tr>'
})
$('#mainTbody').append(html)
}
function GetStudents() {
var studentnames = ''
$('#mainTbody span.studentname').each(function () {
studentnames += '【' + $(this).text() + '】'
})
alert(studentnames)
}
</script>
</head>
<body>
<div><input type="button" value="确定" onclick="GetStudents()" /></div>
<div style="margin-top:10px">
<table>
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>地址</td>
</tr>
</thead>
<tbody id="mainTbody"></tbody>
</table>
</div>
</body>
</html>
下拉菜单实现代码如下：<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
</SCRIPT>
<SCRIPT LANGUAGE="javascript">
function Body_Init(oSelect,oText)
{
var iLeft= oSelect.offsetLeft
var iTop = oSelect.offsetTop
var iWidth=oSelect.clientWidth
var iHeight=oSelect.clientHeight
oSelect.style.clip='rect(0,'+iWidth+','+iHeight+','+(iWidth-18)+')'
oText.style.width=iWidth
oText.style.height=iHeight
oText.style.top =iTop
oText.style.left=iLeft
}
function Combo_Select(oSelect,oText)
{
oText.value=oSelect.options[oSelect.selectedIndex].text
alert(oText.value)
}
function Text_ChkKey(oSelect,oText)
{
if(event.keyCode==13)
{
var nIndex=HasTheValue(oText.value,oSelect)
if(nIndex !=-1 &&nIndex !=oSelect.selectedIndex)
{
oSelect.selectedIndex=nIndex
}
}
}
function HasTheValue(name,oSelect)
{
if(oSelect.options.length<1)
return -1
var i=0
for(i=0i<oSelect.options.lengthi++)
{
if(oSelect.options[i].text==name)
return i
}
return -1
}
</SCRIPT>
</HEAD>
<BODY onload="javascript:Body_Init(pCombo,pText)">
<table width=50% width=50% align="center" valign="middle">
<tr><td>
<SELECT STYLE="position:absoluteleft:0top:0" ONCHANGE="Combo_Select(this,pText)" NAME="pCombo" >
<option value="d">test1</option>
<option value="dd">test2</option>
<option value="dd">asds</option>
<option value="dd">awdfsfs</option>
</SELECT>
<INPUT STYLE="position:absolute" onKeyPress="Text_ChkKey(pCombo,this)" TYPE="TEXT" NAME="pText">
</td></tr>
</table>
</BODY>
</HTML>
1、通过属性设置<select name="11" id="11" disabled=true >
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
</select>
2、通过事件
<select name="11" id="11"
onbeforeactivate="return false"
onfocus="this.blur()"
onmouseover="this.setCapture()"
onmouseout="this.releaseCapture()">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
</select>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）