所选维度转换为 div table

Question

谁能帮我对 this or this 页面进行逆向工程？用户通过网格系统选择维度的地方。然后，所选框的数量将以相同的尺寸转换为 div 个。

或者有没有人推荐和JavaScript，如果有的话是哪一个？

Answer 1

这里有两个问题，一个是选择，一个是生成。生成很简单：

注意：这是快速而肮脏的；不应该使用 innerHtml，如果你想看到它更精致的话，请联系我 :) https://jsfiddle.net/ynfb3Lh2/9/

<div id="selection">
</div>
<div id="target">
</div>
<pre id="text">
</pre>

<script>
  // Prepare our targets
  const selectionContainer = document.getElementById("selection");
  const targetContainer = document.getElementById("target");
  const textContainer = document.getElementById("text");

  // rows: How many rows to generate?
  // cols: How many cols to generate?
  // [_insertCallback]: should we insert callback? 
  // [_targetContainer]: where should we place created divs?
  // [_textContainer]: sWhere should we write our HTML as plain text? 
  function generateDiv(rows, columns, _insertCallback, _targetContainer, _textContainer) {
    // Create our wrapping elements
    const table = document.createElement("table");
    const tbody = document.createElement("tbody");

    for (let r = 0; r < rows; ++r) {
      // Each row is created here...
      const tr = document.createElement("tr");

      for (let c = 0; c < columns; ++c) {
        const td = document.createElement("td");
        td.text = "&nbsp;"
        // if callback is defined, and we have a target - allow us to generate new table on each click
        if (_insertCallback && _targetContainer) {
          td.onclick = () => generateDiv(r + 1, c + 1, false, _targetContainer, _textContainer)
        }

        tr.appendChild(td)
      }


      // ... and added here
      tbody.appendChild(tr)
    }

    table.appendChild(tbody)

    if (_targetContainer && !_insertCallback ) {
      _targetContainer.innerHTML = '';
      _targetContainer.appendChild(table);
    }
    if (_textContainer && !_insertCallback ) {
      _textContainer.innerHTML = table.outerHTML
      .replace(/td><\//gi, "td>&amp;nbsp;</")
      .replace(/</gi, "&lt;")
      .replace(/>/gi, ">\n");
    }

    return table;
  }

  selectionContainer.appendChild(generateDiv(10, 10, true, targetContainer, textContainer));

</script>

并且类似地，通过向每个单元格添加行和列信息的类似函数完成选择table table。然后，table 上的 mouseClick 事件将读取行和列并传递给生成代码。

所选维度转换为 div table

Selected dimensions convert to div table

javascript

html

css

reverse-engineering

css-tables