代码之家 › 专栏 › 技术社区 › vighnesh153

未附加到内容的表

ejs express html5 node.js javascript

vighnesh153 · 技术社区 · 7 年前

我有一个按钮,当点击时,弹出一个模型,要求行和列的数量,然后添加这些规格表到我旁边的可编辑div。表格应该附加到div目录的末尾。我该怎么做?

<body>
<div class="container-fluid">
    <div class="row">
        <div id="information" class="col col-lg-10">
            <div id="heading" contenteditable="true"></div>
            <div id="content" contenteditable="true"></div>
        </div>
        <div class="col col-lg-2">
            <button id="table-button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal">Table</button>
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Table specs</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form action="/" method="post">
                            <div class="modal-body">
                                <div>
                                    <label for="rows">Rows &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
                                    <input id="rows" name="rows" type="number" min="1" step="1" placeholder="&nbsp;amount" value="5" required>
                                </div>
                                <div>
                                    <label for="columns">Columns&nbsp;:</label>
                                    <input id="columns" name="columns" type="number" min="1" step="1" placeholder="&nbsp;amount" value="5" required>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <span class="btn btn-secondary" data-dismiss="modal">Cancel</span>
                                <button id="add-table" class="btn btn-primary">Add table</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="backend.js"></script>

</body>

代码笔链接(它还有JS): https://codepen.io/vighnesh153/pen/xyQreo

Github链接(以避免依赖关系问题): https://github.com/vighnesh153/Debugging/tree/master/Editor

1 回复 | 直到 7 年前

front_end_dev 7 年前

这段代码可以根据用户输入的行和列生成一个表。 <div id="tableDiv"></div> )插入到要插入表的html中。

var addTableBtn = document.querySelector('#add-table');

addTableBtn.addEventListener('click',function(){
  var rows = parseInt(document.body.querySelector('#rows').value);
  var columns = parseInt(document.body.querySelector('#columns').value);
  generateTable(rows,columns);
});

function generateTable(rows,columns){
  var table = document.createElement('table');
  for(var r = 0 ; r< rows ; r++){
    var row = table.insertRow(r);
    for(var c = 0; c< columns; c++){
      row.insertCell(c).innerHTML = "Column_" + c;
    }
  }

  document.body.querySelector("#tableDiv").appendChild(table);
}