table列表中结合ctrl,shift实现多行的选择

最新推荐文章于 2024-04-16 09:46:49 发布

寒冥冷煜

最新推荐文章于 2024-04-16 09:46:49 发布

阅读量986

点赞数

分类专栏： javascript学习文章标签： HTML CSS 脚本 EXT

javascript学习专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种通过HTML和JavaScript实现的表格多行选择方法。用户可通过Ctrl和Shift键进行灵活的行选择，适用于不需要复杂前端库的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是简单的实现了table标签单行、多行的选择。建议用ext来实现该功能，美观和效果比这个好。

如果不用ext的话，以下的功能完全可以满足table多行选择的需求

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;   charset=gb2312">
  <title>table列表中结合ctrl,shift实现多行的选择</title>
  <style type="text/css">
   TABLE{
    FONT-SIZE: 9pt; 
    background-color: #D9E5A9;
   }
   TABLE.list{
       BORDER-BOTTOM: 1 none;
       BORDER-LEFT: 1 none;
       BORDER-RIGHT: 1 none;
       BORDER-TOP: 1 none;
       FONT: messagebox;  
       overflow: hidden
    FONT-SIZE: 9pt; 
   }
   TABLE.list TR.first{
       BACKGROUND-COLOR: rgb(255,255,255);
       COLOR: black;
       FONT: messagebox;
       cursor:pointer;
    FONT-SIZE: 9pt; 
   }
   TABLE.list TR.second{
       BACKGROUND-COLOR: rgb(240,240,240);
       COLOR: black;
       FONT: messagebox;
       cursor:pointer;
   }
   TABLE.list TR.mouseover{
       BACKGROUND-COLOR: #D7DAFF;
       cursor:pointer;
   }
   TABLE.list TR.selected{
       BACKGROUND-COLOR: royalblue;
       COLOR: white;
       FONT: messagebox;
       cursor:pointer;
   }
  
  </style>
  
  <script> 
  var ctrl = false;
  var shift = false;
  var tableStyle;//存放table各列的样式
  var ifFirst=true;//用来第一次初始化table各列的样式
  var selectNum=0;//选择行的个数，用来判断选中行的个数
  var rowI;//当前行序号
  var selectElement;//选择行对象
  
  //处理按ctrl和shift键
  document.onkeydown = function () {
   if (event.keyCode == 17) {
    ctrl = true;
   } else {
    if (event.keyCode == 16) {
     shift = true;
    }
   }
  };
  document.onkeyup = function () {
   ctrl = false;
   shift = false;
  };
  
  //鼠标经过时
  function hilite(theTR){
   //鼠标第一次经过时初始化
   if(ifFirst){
    //遍历table所有行的样式，并放到数组tableStyle中，第一次点击的时候遍历
    tableStyle=new Array(infoTable.rows.length);
    for (var i = 0; i < infoTable.rows.length; i++) {
     tableStyle[i]=infoTable.rows(i).className;
    }
    ifFirst=false;
   }
      if(theTR.className != "selected"){
          theTR.className = "mouseover";
      }
  }
  //鼠标离开时
  function restore(theTR){
      if(theTR.className != "selected")
          theTR.className = tableStyle[theTR.rowIndex]
  }
  
  //鼠标按下时
  //每行中selectState属性可以在需要的时候判断是否选中某一行或某几行
  function clickRow(theTR) {
   if (ctrl && shift) {//同时按下ctrl和shift则不操作
    return;
   }
   rowI=theTR.rowIndex;
   
   //如果选择的是复选框按钮时
   if(event.srcElement.tagName=="INPUT" && event.srcElement.type=="checkbox" &&!shift ){
    var state = event.srcElement.checked;
          if(state){
        infoTable.rows(rowI).className = "selected";
        infoTable.rows(rowI).selectState = "yes";
        selectNum++;
       }else{
        infoTable.rows(rowI).className = tableStyle[rowI];
        infoTable.rows(rowI).selectState = "no";
        selectNum--;
       }
       
       for (var i = 1; i < infoTable.rows.length; i++) {
     if(infoTable.rows(i).selectState == "yes"){
         //赋当前操作行对象
         selectElement=infoTable.rows(i);
     }
       }
    return;
   }
    
   if (!ctrl && !shift) {//没有按ctrl或shift时
    for (var i = 1; i < infoTable.rows.length; i++) {
     try {
      infoTable.rows(i).cells(0).firstChild.checked = false;
     } catch (e) {
      //页面中没有复选框或单选框时
     }
     infoTable.rows(i).className = tableStyle[i];
     infoTable.rows(i).selectState = "no";
    }
        try {
      infoTable.rows(rowI).cells(0).firstChild.checked = true;
     } catch (e) {
      //页面中没有复选框或单选框时
     }
    infoTable.rows(rowI).className = "selected";
    infoTable.rows(rowI).selectState = "yes";
    infoTable.currentRow = rowI;
    selectNum=1;
   }
   if (ctrl) {//按ctrl键时
       if(infoTable.rows(rowI).className == "selected"){
        try {
      infoTable.rows(rowI).cells(0).firstChild.checked = false;
     } catch (e) {
      //页面中没有复选框或单选框时
     }
        infoTable.rows(rowI).className = tableStyle[rowI];
        infoTable.rows(rowI).selectState = "no";
        selectNum--;
       }else{
        try {
      infoTable.rows(rowI).cells(0).firstChild.checked = true;
     } catch (e) {
      //页面中没有复选框或单选框时
     }
        infoTable.rows(rowI).className = "selected";
        infoTable.rows(rowI).selectState = "yes";
        selectNum++;
       }
   }
   if (shift) {//按shift键时
    for (var i = 1; i < infoTable.rows.length; i++) {
     try {
      infoTable.rows(i).cells(0).firstChild.checked = false;
     } catch (e) {
      //页面中没有复选框或单选框时
     }
     infoTable.rows(i).className = tableStyle[i];
     infoTable.rows(rowI).selectState = "no";
    }
    
    if (rowI < infoTable.currentRow) {
     for (var i = rowI; i <= infoTable.currentRow; i++) {
      try {
      infoTable.rows(parseInt(i)).cells(0).firstChild.checked = true;
     } catch (e) {
      //页面中没有复选框或单选框时
     }
      infoTable.rows(parseInt(i)).className = "selected";
      infoTable.rows(parseInt(i)).selectState = "yes";
     }
    } else {
     for (var i = infoTable.currentRow; i <= rowI; i++) {
      try {
      infoTable.rows(parseInt(i)).cells(0).firstChild.checked = true;
     } catch (e) {
      //页面中没有复选框或单选框时
     }
      infoTable.rows(parseInt(i)).className = "selected";
      infoTable.rows(parseInt(i)).selectState = "yes";
     }
    }
    
    selectNum=Math.abs(parseInt(infoTable.currentRow)-rowI)+1;
   }
   
   for (var i = 1; i < infoTable.rows.length; i++) {
    if(infoTable.rows(i).selectState == "yes"){
        //赋当前操作行对象
        selectElement=infoTable.rows(i);
    }
   }
  }
</script>
 </head>
 <body>
    利用ctrl 和shift实现了table标签的多行选择，该实现可以根据需求添加需要实现功能的脚本，<br/>
    如判断是否选择了行，选择了多行等。这里省略
    <br/><br/>
     <table width="400"  border="0" cellspacing="1" cellpadding="3" currentRow="1" id="infoTable"   bgcolor="#cccccc" class="list">
      <tr>
          <th colspan="2" align="center">标题</th>
      </tr>
   <tr selectState="no" class="second" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
    <td>
     <input type=checkbox checked>
    </td>
    <td>&nbsp;</td>
   </tr>
   <tr selectState="no" class="first" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
    <td>
     <input type=checkbox>
    </td>
    <td>&nbsp;</td>
   </tr>
   <tr selectState="no" class="second" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
    <td>
     <input type=checkbox>
    </td>
    <td>&nbsp;</td>
   </tr>
   <tr selectState="no" class="first" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
    <td>
     <input type=checkbox>
    </td>
    <td>&nbsp;</td>
   </tr>
   <tr selectState="no" class="second" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
    <td>
     <input type=checkbox>
    </td>
    <td>&nbsp;</td>
   </tr>
   <tr selectState="no" class="first" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
    <td>
     <input type=checkbox>
    </td>
    <td>&nbsp;</td>
   </tr>
   <tr selectState="no" class="second" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
    <td>
     <input type=checkbox>
    </td>
    <td>&nbsp;</td>
   </tr>
   <tr selectState="no" class="first" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
    <td>
     <input type=checkbox>
    </td>
    <td>&nbsp;</td>
   </tr>
  </table>
 </body>
</html>