引导表将边框添加到'内容可编辑'改变后上课
bootstrap table add border to 'contenteditable' class after a change
我有一个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");
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 高亮显示时编辑文本大小和颜色
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 将事件聚焦/模糊在可编辑内容的元素上
- 编辑HTML表的源数据
- ExtJS网格单元格编辑器,防止焦点松动问题
- jQuery:当屏幕大小改变时,如何更改默认图像和悬停图像
- 如何在visualstudio中调试web api时编辑javascript文件
- 具有所有样式的文本正在复制到可编辑文本区域
- 可以't使用PHP使用Froala编辑器上传图像URL
- 用Greasemonkey编辑专栏
- 如何在corona sdk中从CK编辑器中检索数据
- 基于数据类型的编辑框的汇总列表
- 如何使用jQuery可编辑插件检查ajax是否成功完成
- 为什么使用immutableJS我的状态没有改变
- 错误:[$compile:nonassign]表达式'未定义'与指令'内容可编辑'是不可
- 当一个单元格被编辑时,是否有一个事件触发,但值没有'不要改变
- 引导表将边框添加到'内容可编辑'改变后上课