引导表将边框添加到'内容可编辑'改变后上课

bootstrap table add border to 'contenteditable' class after a change

本文关键字:编辑 改变 添加 边框      更新时间:2023-09-26

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

这是我使用的github点击这里,本质上是同一个例子,多了几行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>

您是否尝试在编辑完is后将引导程序的表边界类插入到对象中,如:

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

在这里办理手续

在这里查看所有引导表可能的标志

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

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