Question

我有一个可编辑的表，它是使用java脚本创建的。我使用一些代码进行选择过程。我希望使用控制键和shift键选择表行。我从中获取代码 [1]：http://jsfiddle.net/g8Rpe/在这里。此示例显示为html表。但我的表是daynamic 代码在这里：

        /******for table**************/
        $(function () {
            function tableCreate() {
                var body = document.body,
                tbl = document.createElement('table');


                tbl.style.width = '100%';

                tbl.style.borderCollapse = 'collapse';

                for (var i = 0; i < 30; i++) {
                    var tr = tbl.insertRow();
                    tr.setAttribute("data-id", i, 0);
                    for (var j = 0; j < 3; j++) {

                        var td = tr.insertCell();
                        td.appendChild(document.createTextNode(''));


                    }

                }

                $("body").append(tbl);
                $("td").addClass("mainheading4")

                $("tr").on("onmousedown=RowClick(this,false)")
            }
            tableCreate();
            //******************for editable table*************************//

            $('td').click(function () {
                $('td').attr('contenteditable', 'true');
            })


            //************for multiple selection*****************//
            var lastSelectedRow;
            var trs = document.getElementById('table').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 = '';
                }
            }

        });

body{font-size:62.5%;}
td { padding: 0.2em 0.4em; }
.selected { background: lightBlue } 
    .mainheading4{
     border: 1px solid;
    border-color: lightgray;
    width:33.3%;
   height:17px;
   font-size:15px;
   padding-left: -5px;
 
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我用

$（“tr”）。on（“mousedown = RowClick（this，false）”）＆lt; 获取鼠标事件。

但没有采取。

Answer 1

有几个错误的行为。

1）为表分配id，没有它，你将不会获得表行，如下面的行

var trs = document.getElementById（＆＃39; table＆＃39;）。tBodies [0] .getElementsByTagName（＆＃39; tr＆＃39;）;

E.g。在tableCreate方法中添加以下代码行。

        var body = document.body,
        tbl = document.createElement('table'),
        tableId = document.createAttribute('id');
        tableId.value = "table";
        tbl.setAttributeNode(tableId);

2）第二次注册鼠标按下事件，如feela建议，

    $(document).on('click', 'tr', function () {
        RowClick(this, false);
    });

希望它能解决您的问题。

Answer 2

这不是on的有效语法。请参阅：http://api.jquery.com/on/

你可能意味着：

$("tr").on("mousedown", function(event) {
    RowClick(event.target, false);
});

使用shift键和控制键选择多个表行不起作用

2 个答案: