切换标签状态，得到当前事件所在的行数

最新推荐文章于 2024-07-07 23:10:31 发布

jingyuwang1

最新推荐文章于 2024-07-07 23:10:31 发布

阅读量902

点赞数

文章标签： table input xhtml button null border

本文链接：https://blog.csdn.net/jingyuwang1/article/details/7240735

版权

declare:做项目的时候，广东的一个客户要求这样的效果：在一个表格中有好多行商品的信息，如果我点击其中一行的，这把这行的状态变为不可操作的，而且要得到该商品所在的行是第几行。下面的小例子就是我当时这种特殊需求定制的。值得注意的是此代码没有与其他浏览器做兼容处理，只能在ie中正常浏览，客户那边只使用ie。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注意：IE中才能正常使用</title>

</head>
<div>

<table id="table" border=1>
<tr>
      <th><input type="checkbox"/></th>
        <th>供应商名称</th>
      <th>商品名称</th>
            <th>商品型号</th>
            <th>备注</th>
            <th></th>
        </tr>
<tr>
   <td><input type="checkbox"/></td>
        <td><input type="text" value="11" /><button >供应商名称</button></td>
      <td><input type="text" value="12" /><button >商品名称</button></td>
            <td><input type="text" value="13" /></td>
            <td><textarea>s1</textarea></td>
            <td><input type="checkbox" οnclick="changeStatus(this)"/></td>
        </tr>
<tr>
   <td><input type="checkbox"/></td>
        <td><input type="text" value="21" /><button >供应商名称</button></td>
            <td><input type="text" value="22" /><button >商品名称</button></td>
            <td><input type="text" value="23" /></td>
            <td><textarea>s2</textarea></td>
            <td><input type="checkbox" οnclick="changeStatus(this)"/></td>
        </tr>
<tr>
   <td><input type="checkbox" /></td>
        <td><input type="text" value="a" /><button >供应商名称</button></td>
            <td><input type="text" value="b" /><button >商品名称</button></td>
            <td><input type="text" value="c" /></td>
            <td><textarea>s3</textarea></td>
            <td>
            <input type="checkbox" οnclick="changeStatus(this)" />
        </td>
        </tr>
    </table>

</div
><body>

<blockquote> </blockquote>
<script>
/*
var table=document.getElementById("table");
alert(table.rows.length);//得到table的行数
for(var i=0;i<table.rows.length;i++){
alert(table.rows[i].cells.length);
}*/

/*改变标签状态的函数
*/
function changeStatus(thisObj){
//得到该check所在的<tr/>标签对象
var srcElem = thisObj.parentElement.parentElement;

//判断当前的checkbox是否被选中
if(thisObj.checked){//如果是选中事件
  srcElem.runtimeStyle.backgroundColor = "#EEEEEE";//改变行的颜色
  updateState(srcElem, true);//把所在行的所有其他标签（checkbox除外）设置为不可编辑的状态
}else{//如果当前没有选中或者是取消选中
  srcElem.runtimeStyle.backgroundColor = "";//把设置的颜色清空
  updateState(srcElem, false);//更新标签的可编辑状态
}
}

/*根据以前的状态切换标签的现在状态
@srcElem : <tr>节点对象
@isHidden : 是否需要设置为不可编辑
*/
function updateState(srcElem, isHidden){
var readonly;//readonly属性值
var disabled;//disable属性值
//根据传入的状态给属性赋值
isHidden ? (readonly = "readonly") : (readonly = "");
isHidden ? (disabled = "disabled") : (disabled = "");
srcElem.id = "tempId_tr";
srcElem.parentElement.id = "tempId_table";
var table=document.getElementById("tempId_table");
for(var i=0; i < table.rows.length; i++){
  if(srcElem == table.rows[i]){
   alert("当前选择的checkbox在第" + i + "行");
   break;
  }
}
srcElem.parentElement.id = null;
  //input标签集合
  var arryInput = document.getElementById("tempId_tr").getElementsByTagName("input");
  for(var i = 0; i < arryInput.length; i++){
   var obj = arryInput[i];
   obj.id = "tempId";//给当前的input标签设置一个临时的id
   //把当前的input标签的状态
   document.getElementById("tempId").readOnly= readonly;
   obj.id = null;//清空临时id
  }
  //处理button
  var arryButton = document.getElementById("tempId_tr").getElementsByTagName("button");
  for(var i = 0; i < arryButton.length; i++){
   var obj = arryButton[i];
   obj.id = "tempId";
   document.getElementById("tempId").disabled = disabled;
   obj.id = null;
  }
  //处理textarea
  var arryTextarea = document.getElementById("tempId_tr").getElementsByTagName("textarea");
  for(var i = 0; i < arryTextarea.length; i++){
   var obj = arryTextarea[i];
   obj.id = "tempId";
   document.getElementById("tempId").readOnly= readonly;
   obj.id = null;
  }
  srcElem.id = null;//清空<tr/>的临时id
}
</script>
</body>
</html>

jingyuwang1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
切换标签状态，得到当前事件所在的行数

declare:做项目的时候，广东的一个客户要求这样的效果：在一个表格中有好多行商品的信息，如果我点击其中一行的，这把这行的状态变为不可操作的，而且要得到该商品所在的行是第几行。下面的小例子就是我当时这种特殊需求定制的。值得注意的是此代码没有与其他浏览器做兼容处理，只能在ie中正常浏览，客户那边只使用ie。http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra
复制链接

扫一扫