javascript - 在 HTML 中创建类似 Microsoft Office Word 表格生成器的控件

Question

是否可以使用 HTML5 或 Javascript 创建这样的控件？我发现以下 link他们只使用 CSS 创建类似图形的东西。

$trans: transparent;
$block: #00004f;
$line: #19465b;
$gridSize: 60px;
$subdivisions: 1;
$lineAlpha: .1;
$sublineAlpha: 1;
$gridHeight : 120px;

body {
  background-color: $block;
  background-image:
    linear-gradient(rgba($line,$sublineAlpha) 1px, $trans 1px), /*sub horiz*/
    linear-gradient($line 1px, $trans 1px), /*main horiz*/
    linear-gradient(90deg, rgba($line,$sublineAlpha) 1px, $trans 1px), /*sub vert*/
    linear-gradient(90deg, rgba($line,$lineAlpha) 1px, $trans 1px), /*main vert*/
    linear-gradient($trans 3px, $block 3px, $block $gridSize - 2, $trans $gridSize - 2), /*nub horiz*/
    linear-gradient(90deg, rgba($line,$lineAlpha) 3px, $trans 3px, $trans $gridHeight - 2, rgba($line,$lineAlpha) $gridSize - 2) /*nub vert*/
    ;
  background-size:    
    $gridHeight / $subdivisions $gridSize / $subdivisions;        
}

我对 Javascript 开发还很陌生。是否有任何可用的第三方库可以为我执行此操作？

Answer 1

这是您可以使用的一个小实现:

document.body.addEventListener("click", async (e) => {
    let [colCount, rowCount] = await tablePicker(e.clientX, e.clientY);
    console.log(JSON.stringify({colCount, rowCount}));
});

function tablePicker(x, y) {
    return new Promise(resolve => {
        let div = document.querySelector("#tblpck");
        if (div) div.remove();
        let colCount = 0;
        let rowCount = 0;
        div = document.createElement("div");
        div.setAttribute("id", "tblpck");
        div.innerHTML = `<style>
            #tblpck div{background:#ccc;font-family:Verdana;text-align:right}
            #tblpck table{border-spacing:3px;background:#f8f8f8}
            #tblpck td{border:1px solid #888;width:16px;height:16px;box-sizing:border-box}
            #tblpck .tblpckhighlight{border:2px solid orange;}
        <\/style><div>0x0 Table<\/div>
        <table>${`<tr>${`<td><\/td>`.repeat(10)}<\/tr>`.repeat(10)}<\/table>`;
        document.body.appendChild(div);
        Object.assign(div.style, {left: x + "px", top: y + "px", position: "absolute", border: "1px solid #ccc"});
        
        div.onmouseover = (e) => {
            if (e.target.tagName !== "TD") return;
            let td = e.target;
            let tr = td.parentNode;
            let table = tr.parentNode;
            colCount = td.cellIndex+1;
            rowCount = tr.rowIndex+1;
            for (let row of table.rows) {
                let inside = row.rowIndex < rowCount;
                for (let cell of row.cells) {
                    cell.classList.toggle("tblpckhighlight", inside && cell.cellIndex < colCount);
                }
            }
            div.children[1].textContent = `${colCount}x${rowCount} Table`;
            return false;
        };

        div.onmousedown = () => {
            div.remove();
            resolve([colCount, rowCount]);
        };
    });
}

body { height: 100vh; margin: 0 } 

Click to get popup at cursor position...