javascript - Bootstrap 表在更改后向 'contenteditable' 类添加边框

Question

我有这个 javascript 可以从 CSV 文件动态创建 HTML 表格。我也在使用 Bootstrap ，他们有一个很酷的“内容可编辑”类用于表格单元格，您可以在其中编辑“td”元素。我正在尝试在编辑后向表格单元格添加一些 css 或只是一个边框。我尝试了一些 jQuery 但没有成功。任何建议，将不胜感激。

这是我使用的 github click here ，本质上是相同的示例，但多了几行 javascript。

JavaScript:

<script type="text/javascript">

    // check browser support
    // console.log(SimpleExcel.isSupportedBrowser);

    var fileInputCSV = document.getElementById('fileInputCSV');

    // when local file loaded
    fileInputCSV.addEventListener('change', function (e) {

        // parse as CSV
        var file = e.target.files[0];
        var csvParser = new SimpleExcel.Parser.CSV();
        csvParser.setDelimiter(',');
        csvParser.loadFile(file, function () {

            // draw HTML table based on sheet data
            var sheet = csvParser.getSheet();
            var table = document.getElementById('result');
            var tbody = document.createElement('tbody');
            table.innerHTML = "";
            sheet.forEach(function (el, i) {
                var row = document.createElement('tr');
                el.forEach(function (el, i) {
                var cell = document.createElement('td');
                cell.setAttribute('contenteditable', 'true');
                cell.setAttribute('id', 'cells');
                cell.innerHTML = el.value;
                row.appendChild(cell);
            });
            table.appendChild(tbody);
            tbody.appendChild(row);
        });

        // create button to export as TSV
        var btnSave = document.getElementById('fileExport');
        btnSave.hidden = false;
        btnSave.value = 'Save as TSV file ->';
        document.body.appendChild(btnSave);

        // export when button clicked
        btnSave.addEventListener('click', function (e) {
            var tsvWriter = new SimpleExcel.Writer.TSV();
            tsvWriter.insertSheet(csvParser.getSheet(1));
            tsvWriter.saveFile();
        });

        var data = csvParser.getSheet(1);
        // var json_data = JSON.stringify(data);
        console.log("data here", data);
        angular.element('#angular-controller').scope().getCSV(data);

        // print to console just for quick testing
        // console.log(csvParser.getSheet(1));
            // console.log(csvParser.getSheet(1).getRow(1));
            // console.log(csvParser.getSheet(1).getColumn(2));
            // console.log(csvParser.getSheet(1).getCell(3, 1));
            // console.log(csvParser.getSheet(1).getCell(2, 3).value);
        });
    });    
</script>

jQuery:

$(document).ready(function() {
    $('#fileInputCSV').on('change',function() {
        $('#save-button').css('display','inline-block');
        $('#add-row').css('display', 'inline-block');
    });

    $('#cells').on('change', function() {
        console.log("change");
        $('#cells').css('style','border:2px solid orange');
    });

});

HTML:

<div class="row">
    <div class="container-fluid">
        <button type="button" class="btn btn-success btn-sm" id="add-row" style="display:none" data-toggle="modal" data-target="#myModal">Add Row</button>
        <button class="btn btn-sm btn-success pull-right" id="save-button" style="display:none">Save</button>

        <table id="result" class="table table-condensed"></table>
        <input type="button" id="fileExport" hidden="true" />
    </div>
</div>

Answer 1

您是否尝试过在编辑后将 Bootstrap 的表格边框类插入到对象中，例如:

<table id="result" class="table table-condensed table-bordered"></table>

查看使用情况here

查看所有 Bootstrap 表可能的标志 here

要将类动态加载到结果表 (id="result")，请使用:

$(#result).addClass("table-bordered");