使用Ctrl +单击和Shift +单击选择多个HTML表格行 [英] Select multiple HTML table rows with Ctrl+click and Shift+click

查看：118
本文介绍了使用Ctrl +单击和Shift +单击选择多个HTML表格行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

演示



我想要使用Windows Shift 和 Ctrl 键选择多个行，例如在Windows中选择多个文件夹。



的选定行我必须得到第一列（学生ID）并传递到服务器端 C＃并从数据库中删除这些记录。



我已经在javascript中编写了代码，但 classname 未应用于上的< tr> / kbd>或 Ctrl + 左键点击。 

 < table id =tableStudentborder =1> 
< thead> 
< tr> 
< th> ID< / th> 
< th>名称< / th> 
< th> Class< / th> 
< / tr> 
< / thead> 
< tbody> 
 < td> 1< / td> 
< td> John< / td> 
< td> 4th< / td> 
< / tr> 
 < td> 2< / td> 
< td>杰克< / td> 
< td> 5th< / td> 
< / tr> 
 < td> 3< / td> 
< td> Michel< / td> 
< td> 6th< / td> 
< / tr> 
 < td> 4< / td> 
< td> Mike< / td> 
< td> 7th< / td> 
< / tr> 
 < td> 5< / td> 
< td> Yke< / td> 
< td> 8th< / td> 
< / tr> 
 < td> 6< / td> 
< td> 4ke< / td> 
< td> 9th< / td> 
< / tr> 
 < td> 7< / td> 
< td> 7ke< / td> 
< td> 10th< / td> 
< / tr> 
< / tbody> 
< / table>

JavaScript 

  var chosenrow; 
函数RowClick（currenttr，lock）{
 var trs = tableStudent.tBodies [0] .getElementsByTagName（tr）; 
 var cnt; 
 if（window.event.button == 2）
 {
 if（currenttr.className =='selected'）
 return false; 
} 
 alert（trs.length）; （（（window.event.shiftKey）&&（window.event.ctrlKey））||（window.event.shiftKey））
 {
 for（var j = 0; j  {
 if（trs [j] .className！='normallock'）
 {
 trs [j] .className ='正常'; 
} 
} 
 var mark = false; 
 
 if（typeof（selectedrow）==undefined）
 {
 selectedrow = currenttr; 
 selectedrow.className ='selected'
 return false; （（trs [j] .id == selectedrow）中的（$ j 
 
 
 $ j 
 $ id）||（trs [j] .id == currenttr.id））
 {
 if（trs [j] .className！='normallock'）
 {
 trs [j] .className ='selected'
 mark =！（mark）; 
 
 
 
 
 if（mark == true）
 {
 if（trs [j] .className！= 'normallock'）
 trs [j] .className ='selected'
} 
} 
} 
} 
 else if（window.event.ctrlKey ）
 {
 //如果在选择患者时选择了ctrl键
 //选择患有当前点击行的患者加上
 //保持以前的分离状态
 CNT = 0; 
 for（var j = 0; j  {
 if（trs [j] .id == currenttr.id）
 {
 if（trs [j] .className =='selected'）
 {
 trs [j] .className ='normal'; 
} else 
 {
 trs [j] .className ='selected'; 
} 
} 
 if（trs [j] .className =='selected'）
 {
 cnt ++; 
 
 
 
 if（cnt == 0）
 {
 selectedrow = undefined; 
返回false; 
 
} 
 else 
 {
 for（var j = 0; j  {
 if（ trs [j] .id == currenttr.id）
 {
 trs [j] .className ='selected'
} 
 else 
 {
 if（trs [j] .className！='normallock'）
 trs [j] .className ='normal'; 
} 
 
} 
} 
 selectedrow = currenttr;


解决方案

可能不是所有的您想要的功能，因为问题有点模糊，但他试图添加 Ctrl 或 Shift + 鼠标左键以选择或取消选择多个表格行 - 查看演示 和以下代码。 免责声明：仅在Chrome中进行了测试，并且代码几乎可以确定地进行优化。

b
$ b 

  var lastSelectedRow; 
 var trs = document.getElementById（'tableStudent'）。tBodies [0] .getElementsByTagName（'tr'）; 
 
 //禁用文本选择
 document.onselectstart = function（）{
 return false; 
 
 
函数RowClick（currenttr，lock）{
 if（window.event.ctrlKey）{
 toggleRow（currenttr）; 
} 
 
 if（window.event.button === 0）{
 if（！window.event.ctrlKey&&！window.event.shiftKey）{ 
 clearAll（）; 
 toggleRow（currenttr）; 
} 
 
 if（window.event.shiftKey）{
 selectRowsBetweenIndexes（[lastSelectedRow.rowIndex，currenttr.rowIndex]）
} 
} 
 
 
函数toggleRow（row）{
 row.className = row.className =='selected'？ ''：'选'; 
 lastSelectedRow = row; 
} 
 
函数selectRowsBetweenIndexes（indexes）{
 indexes.sort（function（a，b）{
 return a  -  b; 
}）; 
 
 for（var i = indices [0]; i <= indexes [1]; i ++）{
 trs [i-1] .className ='selected'; 
 
 
 
函数clearAll（）{
 for（var i = 0; i  trs [我] .className =''; 
} 
}

HTML 

 < table id =tableStudentborder =1> 
< thead> 
< tr> 
< th> ID< / th> 
< th>名称< / th> 
< th> Class< / th> 
< / tr> 
< / thead> 
< tbody> 
 < td> 1< / td> 
< td> John< / td> 
< td> 4th< / td> 
< / tr> 
 < td> 2< / td> 
< td>杰克< / td> 
< td> 5th< / td> 
< / tr> 
 < td> 3< / td> 
< td> Michel< / td> 
< td> 6th< / td> 
< / tr> 
 < td> 4< / td> 
< td> Mike< / td> 
< td> 7th< / td> 
< / tr> 
 < td> 5< / td> 
< td> Yke< / td> 
< td> 8th< / td> 
< / tr> 
 < td> 6< / td> 
< td> 4ke< / td> 
< td> 9th< / td> 
< / tr> 
 < td> 7< / td> 
< td> 7ke< / td> 
< td> 10th< / td> 
< / tr> 
< / tbody> 
< / table>

CSS 

  .selected {
 background：lightBlue 
}

我还会查看 addEventListener vs onclick ，并将事件处理程序绑定移出 HTML 和 JavaScript 。这就是所谓的不显眼的Javascript 。



<您可能想阅读的资源： table-row-index-of-current-row>检索当前行的表格行索引
  • 禁用文本选择，同时按'shift' .org / en-US / docs / Web / JavaScript / Reference / Global_Objects / Array / sortrel =nofollow noreferrer> https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/ Global_Objects / Array / sort


    • Demo

    I want to select multiple rows using Windows Shift and Ctrl keys, like multiple folder selection in Windows.

    From table of selected rows I have to get the first column (student id) and pass to server side C# and delete those records from database.

    I have written a code in javascript but the classname is not being applied to <tr> on Shift or Ctrl+ left click.

    HTML

    <table id="tableStudent" border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Class</th>
        </tr>
    </thead>
    <tbody>
        <tr onmousedown="RowClick(this,false);">
            <td>1</td>
            <td>John</td>
            <td>4th</td>
        </tr>
         <tr onmousedown="RowClick(this,false);">
            <td>2</td>
            <td>Jack</td>
            <td>5th</td>
        </tr>
         <tr onmousedown="RowClick(this,false);">
            <td>3</td>
            <td>Michel</td>
            <td>6th</td>
        </tr>
        <tr onmousedown="RowClick(this,false);">
            <td>4</td>
            <td>Mike</td>
            <td>7th</td>
        </tr>
        <tr onmousedown="RowClick(this,false);">
            <td>5</td>
            <td>Yke</td>
            <td>8th</td>
        </tr>
         <tr onmousedown="RowClick(this,false);">
            <td>6</td>
            <td>4ke</td>
            <td>9th</td>
        </tr>
        <tr onmousedown="RowClick(this,false);">
            <td>7</td>
            <td>7ke</td>
            <td>10th</td>
        </tr>
    </tbody>
</table>

    JavaScript

    var selectedrow;
function RowClick(currenttr, lock) {
var trs =tableStudent.tBodies[0].getElementsByTagName("tr");
var cnt;
    if(window.event.button==2)
    {
        if(currenttr.className=='selected')
        return false;
    }
alert(trs.length);
if (((window.event.shiftKey) && (window.event.ctrlKey) ) ||(window.event.shiftKey))
    {
        for(var j=0; j<trs.length; j++)
        {
            if (trs[j].className!='normallock')
            {
                trs[j].className='normal';
            }
        }
        var mark=false;

        if (typeof(selectedrow)=="undefined")
        {
            selectedrow=currenttr;
            selectedrow.className='selected'
            return false;
        }
        for(var j=0; j<trs.length; j++)
        {

            if ((trs[j].id ==selectedrow.id) || (trs[j].id ==currenttr.id) )
            {
                if (trs[j].className!='normallock')
                {
                trs[j].className='selected'
                mark = !(mark);
                }
            }
            else
            {
                if(mark==true)
                {
                    if (trs[j].className!='normallock')
                    trs[j].className='selected'
                }
            }
        }
    }
    else if(window.event.ctrlKey)
    {
        //if ctrl key is seelcted while selecting the patients
        // select the patient with currently clicked row plus
        // maintain the previous seelcted status
        cnt=0;
        for(var j=0; j<trs.length; j++)
        {
            if(trs[j].id == currenttr.id)
            {
                if(trs[j].className=='selected')
                {
                    trs[j].className='normal';
                }else
                {
                    trs[j].className='selected';
                }
            }
            if(trs[j].className=='selected')
            {
                cnt++;
            }
        }

        if(cnt==0)
        {
            selectedrow=undefined;
            return false;
        }
    }
    else
    {
        for(var j=0; j<trs.length; j++)
        {
            if(trs[j].id == currenttr.id)
            {
                trs[j].className='selected'
            }
            else
            {
                if (trs[j].className!='normallock')
                trs[j].className='normal';
            }

        }
    }
    selectedrow=currenttr;
}

    解决方案

    It's probably not all of the functionality you want, since the question is a bit vague, but he's an attempt at adding Ctrl or Shift+ left mouse button to select or deselect multiple table rows - see demo and code below. Disclaimer: Only tested in Chrome and code can almost certainly be optimised.

    JavaScript

    var lastSelectedRow;
var trs = document.getElementById('tableStudent').tBodies[0].getElementsByTagName('tr');

// disable text selection
document.onselectstart = function() {
    return false;
}

function RowClick(currenttr, lock) {
    if (window.event.ctrlKey) {
        toggleRow(currenttr);
    }

    if (window.event.button === 0) {
        if (!window.event.ctrlKey && !window.event.shiftKey) {
            clearAll();
            toggleRow(currenttr);
        }

        if (window.event.shiftKey) {
            selectRowsBetweenIndexes([lastSelectedRow.rowIndex, currenttr.rowIndex])
        }
    }
}

function toggleRow(row) {
    row.className = row.className == 'selected' ? '' : 'selected';
    lastSelectedRow = row;
}

function selectRowsBetweenIndexes(indexes) {
    indexes.sort(function(a, b) {
        return a - b;
    });

    for (var i = indexes[0]; i <= indexes[1]; i++) {
        trs[i-1].className = 'selected';
    }
}

function clearAll() {
    for (var i = 0; i < trs.length; i++) {
        trs[i].className = '';
    }
}

    HTML

    <table id="tableStudent" border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Class</th>
        </tr>
    </thead>
    <tbody>
        <tr onmousedown="RowClick(this,false);">
            <td>1</td>
            <td>John</td>
            <td>4th</td>
        </tr>
         <tr onmousedown="RowClick(this,false);">
            <td>2</td>
            <td>Jack</td>
            <td>5th</td>
        </tr>
         <tr onmousedown="RowClick(this,false);">
            <td>3</td>
            <td>Michel</td>
            <td>6th</td>
        </tr>
        <tr onmousedown="RowClick(this,false);">
            <td>4</td>
            <td>Mike</td>
            <td>7th</td>
        </tr>
        <tr onmousedown="RowClick(this,false);">
            <td>5</td>
            <td>Yke</td>
            <td>8th</td>
        </tr>
         <tr onmousedown="RowClick(this,false);">
            <td>6</td>
            <td>4ke</td>
            <td>9th</td>
        </tr>
        <tr onmousedown="RowClick(this,false);">
            <td>7</td>
            <td>7ke</td>
            <td>10th</td>
        </tr>
    </tbody>
</table>

    CSS

    .selected {
    background: lightBlue
}

    I would also look at addEventListener vs onclick and move the event handler binding out of the HTML and into JavaScript. This is known as Unobtrusive Javascript.

    Resources you might want to read:

    这篇关于使用Ctrl +单击和Shift +单击选择多个HTML表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆