在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

答案是“是”，实际上是“是，这应该是javascript”。也就是说，并不是全部-使用css进行视觉样式（颜色等）。您会从此过程中学到很多东西，所以我同意。您的HTML将“告诉”浏览器要显示的元素（您的表格），您的JS将用于“发生的事情”（悬停，点击，有关表格的信息），而CSS则用于样式。我以该页面为例-https://html-cleaner.com/html-table-generator/

Answer 2

这是您可以使用的一些实现：

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}
            #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 = td.parentNode.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...