Fatal编程技术网
  • javascript/
  • Javascript 在可编辑的内容内，使用鼠标创建一个可调整大小的表格网格

Javascript 在可编辑的内容内，使用鼠标创建一个可调整大小的表格网格

javascript

Javascript 在可编辑的内容内，使用鼠标创建一个可调整大小的表格网格,javascript,html-table,resizable,Javascript,Html Table,Resizable,我想在可编辑内容中创建一个常规的可调整大小的表格网格。应使用鼠标调整表格的大小，最好在x轴和y轴上调整大小，但此问题更倾向于在x轴上调整大小。我有以下代码 index.html <html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, s

我想在可编辑内容中创建一个常规的可调整大小的表格网格。应使用鼠标调整表格的大小，最好在x轴和y轴上调整大小，但此问题更倾向于在x轴上调整大小。我有以下代码

index.html

<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" type="text/css" href="styles.css">
<script src="javascript.js"></script>
<!--- <script src="jquery-3.4.1.js"></script> -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<title>Resizable table hobby testing</title>
</head>
<body>
    <div contenteditable="true" style="width: 500px; height: 500px;"></div>
<button onclick="insert_table(5, 5);>insert table</button>
</body>
</html>
javascript.js

var th_element;
var startOffset;

function insert_table(rows, cols) { // inserts a table into the div
    // gets the selected text inside the content editable div and deletes it
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    range.deleteContents();
    // Create a table element
    var ins_table = document.createElement("table");
    // set unique id, useful for getting the element later
    ins_table.setAttribute("id", "table"); // maybe change to ins_table.id = "table";? (note to self)
    // Create the format of rows and columns for the table
    for(var r = 0; r < rows; r++) {
        ins_table.innerHTML += "<tr></tr>";
        ins_table.childNodes[r].innerHTML = "<tr>" + '<td style="min-width: 30px;"> </td>'.repeat(cols) + "</tr>";
    }

    // general css styling
    ins_table.style.width = "200px";
    ins_table.style.float = "left";

    // insert table into cursor position
    range.insertNode(ins_table);

    // get the table by finding its id
    var the_table = document.getElementById('table');

    // get the first row, in order to add a div there that acts as a resize bar grab thingy
    var row = table.getElementsByTagName('tr')[0];
    var cols = row.childNodes; // the cols is all the child nodes of the first row

    for(var i = 0; i < cols.length; i++) { // iterate through all cols and insert the resize grab thingt
        var div = create_div(the_table.offsetHeight); // create a div for the selected cell with the height of the table
        cols[i].appendChild(div); // append that div to the cell
        cols[i].style.position = "relative"; // change position
        cols[i].style.overflow = "visible"; // needs to be set as visible to actually be used on the other rows. Without this it only works with the first row
        add_listener(div, cols[i]); // add a listener
    }
}

function create_div(height){ // create the div the user grabs onto
    var div = document.createElement('div'); // create the resize div to grab onto later
    // general styling
    div.style.top = 0;
    div.style.right = 0;
    div.style.width = '5px';
    div.style.position = 'absolute';
    div.style.cursor = 'col-resize';
    div.style.userSelect = 'none';
    div.style.height = height + 'px';
    div.className = 'columnSelector';
    div.style.border = "none";
    return div; // return the created div, to be inserted into the cell above
}

function add_listener(div, col) {
    div.addEventListener('mousedown', function(event) {
        th_element = col;
        startOffset = col.offsetWidth - event.pageX;
    });

    document.addEventListener('mousemove', function(event) {
        if(th_element) {
            th_element.style.width = startOffset + event.pageX + 'px';
        }
    });

    document.addEventListener('mouseup', function() {
        th_element = undefined;
    });
}

var-th_元素；
var-startOffset；
函数insert_table（rows，cols）{//在div中插入一个表
//获取内容可编辑div内的选定文本并将其删除
var selection=window.getSelection（）；
var range=selection.getRangeAt（0）；
range.deleteContents（）；
//创建一个表元素
var ins_table=document.createElement（“表”）；
//设置唯一id，用于以后获取元素
ins_table.setAttribute（“id”，“table”）；//可能会更改为ins_table.id=“table”？（请注意）
//为表创建行和列的格式
对于（var r=0；r
我尝试了来自的代码，但它不能跨越多个单元格，如果不调整变量调用，它对我也不起作用（例如，brainbell使用parentElement而不是parentNode，这对我来说是错误的）。将div（用来调整表大小的对象）拖得太右或太左会导致werid行为，其他单元格在调整大小的同时不会被删除。除其他外

我从中获得灵感的代码是，但正如您所看到的，它以多种方式中断（1）例如，当我来回拖动第二个div grab resize元素时，第一个div会抖动。（2） 使用第三个或第四个div调整大小会导致奇怪的大小调整。（3） 我在一个可编辑的内容内，使表格内的文本处于选中状态，我认为这是因为表格的大小调整速度不够快，因此鼠标被“拖过”下一个、上一个等单元格中的文本，尽管这不是有意的（不可能在调整大小的过程中禁用contenteditable中的突出显示，我尝试通过CSS来实现）

我在这里做一个最小的“经典”，香草javascript风格的编码爱好，因此我不打算使用jQuery。有人知道如何（1）修复我的代码或（2）如何创建一个可调整大小的表格网格（使用香草JS和鼠标调整大小）以及单元格内的可编辑内容请发表评论或回答！谢谢

也是一个代码笔来说明我的问题，因为出于某种原因，代码笔比我在httpd服务器上运行的代码笔坏得少，不知道为什么我的代码笔坏得多（或慢？）

我尝试将此代码放入一个可执行代码段中，但它引发了太多错误，甚至无法深入到您在问题中提到的功能性错误中。您能否将示例代码与功能性示例一起共享，或者共享一个工作的代码笔链接？当此示例代码引发多个错误时，很难提供帮助。@tshimkus 
var th_element;
var startOffset;

function insert_table(rows, cols) { // inserts a table into the div
    // gets the selected text inside the content editable div and deletes it
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    range.deleteContents();
    // Create a table element
    var ins_table = document.createElement("table");
    // set unique id, useful for getting the element later
    ins_table.setAttribute("id", "table"); // maybe change to ins_table.id = "table";? (note to self)
    // Create the format of rows and columns for the table
    for(var r = 0; r < rows; r++) {
        ins_table.innerHTML += "<tr></tr>";
        ins_table.childNodes[r].innerHTML = "<tr>" + '<td style="min-width: 30px;"> </td>'.repeat(cols) + "</tr>";
    }

    // general css styling
    ins_table.style.width = "200px";
    ins_table.style.float = "left";

    // insert table into cursor position
    range.insertNode(ins_table);

    // get the table by finding its id
    var the_table = document.getElementById('table');

    // get the first row, in order to add a div there that acts as a resize bar grab thingy
    var row = table.getElementsByTagName('tr')[0];
    var cols = row.childNodes; // the cols is all the child nodes of the first row

    for(var i = 0; i < cols.length; i++) { // iterate through all cols and insert the resize grab thingt
        var div = create_div(the_table.offsetHeight); // create a div for the selected cell with the height of the table
        cols[i].appendChild(div); // append that div to the cell
        cols[i].style.position = "relative"; // change position
        cols[i].style.overflow = "visible"; // needs to be set as visible to actually be used on the other rows. Without this it only works with the first row
        add_listener(div, cols[i]); // add a listener
    }
}

function create_div(height){ // create the div the user grabs onto
    var div = document.createElement('div'); // create the resize div to grab onto later
    // general styling
    div.style.top = 0;
    div.style.right = 0;
    div.style.width = '5px';
    div.style.position = 'absolute';
    div.style.cursor = 'col-resize';
    div.style.userSelect = 'none';
    div.style.height = height + 'px';
    div.className = 'columnSelector';
    div.style.border = "none";
    return div; // return the created div, to be inserted into the cell above
}

function add_listener(div, col) {
    div.addEventListener('mousedown', function(event) {
        th_element = col;
        startOffset = col.offsetWidth - event.pageX;
    });

    document.addEventListener('mousemove', function(event) {
        if(th_element) {
            th_element.style.width = startOffset + event.pageX + 'px';
        }
    });

    document.addEventListener('mouseup', function() {
        th_element = undefined;
    });
}