瀏覽器支持HTML行選擇嗎

Question

我定義了下表：

<table id=scheduledTable class="table table-fixed">
                <thead>
                    <tr>
    
                        <th style="width:20%">Date</th>
                        <th style="width:20%">Duty</th>
                        <th style="width:20%"></th>
    
                    </tr>
                </thead>
                <tbody *ngIf="schedules">
                    <tr *ngFor="let s of schedules ; let i = index" (click)="ClickedRow(i)" [class.active]="i == HighlightRow">
                        <td>{{getDisplayDate(s.date)}} </td>
    
                        <td>{{s.userFunction}} </td>
                        <td style="white-space: nowrap" *ngIf="isLoggedAsAdmin">
                            <button type="button" (click)="onDeleteSchedule(s.id)"
                                class="btn btn-sm btn-danger btn-delete-account">
                                <span *ngIf="s.deleting" class="spinner-border spinner-border-sm mr-1"></span> Delete
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>

我想知道今天的瀏覽器是否有對行選擇的本地支持（例如 ctrl-click - select 和第二個 ctrl-click 取消選擇）。 任何幫助表示贊賞。

Answer 1

默認情況下，HTML 表為 static，沒有任何內置交互性。 它們僅用於以結構化方式顯示表格數據。

但是，可以通過使用 JavaScript 和 CSS 添加交互性來使 HTML 表具有交互性。

使用 JS，可以通過添加事件偵聽器和實現函數來處理用戶交互來完成，例如單擊表格行或單元格。

或者可以通過向表中的每個tr元素添加tabindex屬性來完成，並使用 CSS 來直觀地指示它們何時被選中或懸停。

---

可以在此代碼段中找到 JS 和 CSS 方法的示例：

 function addRowHandlers() { var table = document.getElementById("tableId"); var rows = table.getElementsByTagName("tr"); for (i = 0; i < rows.length; i++) { var currentRow = table.rows[i]; var createClickHandler = function(row) { return function() { var cell = row.getElementsByTagName("td")[0]; var id = cell.innerHTML; alert("clicked on:" + id); }; }; currentRow.onclick = createClickHandler(currentRow); } } window.onload = addRowHandlers();

 table tr:focus{ outline: red solid 2px}

 <div> <table id="tableId" border=1> <tbody> <tr tabindex="0"><td>Table row 1</td></tr> <tr tabindex="0"><td>Table row 2</td></tr> <tr tabindex="0"><td>Table row 3</td></tr> </tbody> </table> </div>