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>

签入usagehere

查看所有引导数据库表可能的标志here

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

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