Js怎么写能控制单元格不可修改

JavaScript020

Js怎么写能控制单元格不可修改,第1张

原生 javascript 示例 ( 表格+input )：

<table border="0" cellspacing="0" cellpadding="1" style="text-align: center">

<tr><td></td><td>A</td><td>B</td><td>C</td><td>D</td></tr>

<tr><td>1</td><td><input type="text" id="A1"/></td><td><input type="text" id="B1"/></td><td><input type="text" id="C1"/></td><td><input type="text" id="D1"/></td></tr>

<tr><td>2</td><td><input type="text" id="A2"/></td><td><input type="text" id="B2"/></td><td><input type="text" id="C2"/></td><td><input type="text" id="D2"/></td></tr>

<tr><td>3</td><td><input type="text" id="A3"/></td><td><input type="text" id="B3"/></td><td><input type="text" id="C3"/></td><td><input type="text" id="D3"/></td></tr>

</table>

&nbsp&nbsp&nbsp<span id="hints"></span>

<script type="text/javascript">

function validCell(me){

var thisid=me.id//获取当前点击的输入单元格内的input框的id

var preId=thisid.substr(0,1)+(parseInt(thisid.substr(1),10)-1)//计算得上一行对应位置的input框的id

var preEle=document.getElementById(preId)//获取一行对应位置的input框对象

if(preEle!=null){//如果存在上一行对应位置的input

if(preEle.value==""){//且 上一行对应位置的input已经输入了内容

document.getElementById("hints").innerText="请先填写上一行对应的单元格: "+preId

me.setAttribute("readonly","true")//设置为不可编辑

}else{

me.removeAttribute("readonly")//去除只读属性，使其可输入内容

document.getElementById("hints").innerText=""//清除提示

}

}

}

</script>

<script type="text/javascript">

var inputs = document.getElementsByTagName("input")

for (var i in inputs) {

if(inputs[i].type=="text"){//为所有 input text 框添加点击事件

inputs[i].setAttribute("onclick","validCell(this)")

}

}

</script>

javascript提供了获取表格中某一行单元格数的代码，参考如下：

document.getElementById('first').cells.length // 获取id为first的行的单元格数目

实例演示如下：

创建Html元素

<div class="box">

<span>实例演示：获取表格第一行的单元格数量</span>

<div class="content">

<table>

<tr id="first"><td>1</td><td>2</td><td>3</td></tr>

<tr><td>4</td><td>5</td><td>6</td></tr>

<tr><td>7</td><td>8</td><td>9</td></tr>

</table>

<input type="button" value="获取表格第一行的单元格数量" onclick="fun_get()">

</div>

</div>

简单设置一下css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box>span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

table{border-collapse:collapse}

td{width:80pxheight:30pxline-height:30pxtext-align:centerborder:1px solid green}

编写jquery代码

<script>

function fun_get(){

alert(document.getElementById('first').cells.length)

}

</script>