Question

我有一个按钮，单击该按钮时，会弹出一个模型，询问行和列的数量，然后将带有这些规格的表添加到旁边的可编辑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

Answer 1

这段代码可以根据用户输入的行和列生成一个表。将div元素（<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);
}

表未附加到内容

1 个答案: