Add a border to the 'contenteditable' class in a Bootstrap table after it has been modified

Looking for help with JavaScript and jQuery! I have a script that creates an HTML table from a CSV file, using Bootstrap for styling. I want to add CSS or a border to a table cell after it has been edited, but my jQuery attempts haven't worked. Any suggestions are welcome!

Check out the GitHub repository I used for reference here, which is similar to what I'm working on.

JavaScript:

<script type="text/javascript">
    // JavaScript code here
</script>

jQuery:

$(document).ready(function() {
    // jQuery code here
});

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>
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Have you experimented with applying bootstrap's table-bordered class to the object after it has been edited, like so:

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

For examples of usage, click here

Explore all potential flags for bootstrap tables here

To dynamically add a class to the result table (id="result"), use the following code snippet:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implement React-intl into the designated placeholder within the object

Currently facing an issue with the const inputProps in my code. I attempted to integrate React-intl into the react-autosuggest placeholder input, but now the placeholder text displays as: [Object object]. The getStepContent function is defined as follow ...

javascriptreactjs

Showing list data from script to template in vue - A step-by-step guide

My task involves displaying data from the main table in MySQL. I need to show the type of each major by comparing it with the id in the faculty table. I have successfully logged this information using console.log, but I'm unsure how to display it on t ...

javascriptvue.jsvuejs2

Troubles with basic jQuery hide and show functionalities

Hey there! I've been working on a project for the past couple of days and I'm having trouble with creating a slider effect using jQuery hide and show. It's strange because my code works perfectly fine with jquery-1.6.2.min.js, but when I swi ...

jqueryhtmlcss

What is the best way to identify the specific row and column that was clicked within a jQuery datatable

Scenario: When a user clicks on a cell in a datatable, a specific action should be triggered based on the row and column of that cell. How can I ensure that the user does not click on a certain column? If they do not click on that column, then I want to r ...

javascriptjquerydatatable

Having trouble sending JSON data to the server using a POST request

I am encountering an issue while attempting to send JSON data to the server using the fetch API and PHP as the server-side language. The PHP code on the server side is quite simple: <?php header("Access-Control-Allow-Origin: *"); header("Access ...

javascriptphpjsonajaxfetch

Exploring the power of Vue.js with dynamic HTML elements and utilizing Vue directives within Sweet Alert

new Vue({ el: '#app', data(){ results: [] } }); I need assistance with implementing Vue directives, events, etc. within the markup of a Sweet Alert. The goal is to display an alert using Sweet Alert that include ...

javascriptdynamicvue.jssweetalertsweetalert2

Clicking to remove added child element

I have written a script that creates an image popup when the site loads. Here is the code: <script type="text/javascript"> function showPopup() { var div = document.createElement('div'); div.className += 'popup'; div.inne ...

javascripthtmlcss

Intermittent AJAX 403 Forbidden errors occur from time to time

My goal here is to validate whether a username is already taken in real-time as the user types, triggering an AJAX call on keyup event to check if it's available. If the username is taken, the input field will be highlighted in red. However, I've ...

phpjqueryajax

The angular event broadcaster controller is currently unavailable

In my app, there is a search box and a list of results. The search box is controlled by SearchCtrl, while the list of results is managed by DocListCtrl. When a user submits a query, SearchCtrl emits an event that DocListCtrl listens for in order to update ...

javascriptangularjsdependency-injectionpublish-subscribe

The JSONP request connected to the user input field and button will only trigger a single time

Hello all, I'm new to this and have been searching the internet high and low to see if anyone has encountered a similar issue before, but haven't had any luck. I've been attempting to set up a JSONP request to Wikipedia that is connected to ...

javascriptjsonajaxinputjsonp

When I attempt to run several promises simultaneously with Promise.All, I encounter an error

My code contains a series of promises, but they are not being executed as expected. Although the sequence is correct and functional, I have found that I need to utilize Promise.all in order for it to work properly. dataObj[0].pushScreen.map(item => { ...

javascriptreactjsreact-nativepromise

Echo a JS variable into PHP and then insert a PHP file into an HTML element - a step-by-step guide!

Greetings to the wonderful community at stackoverflow, I am currently working on a variable code that allows for easy insertion of code from another file, such as a div. I am curious if it is possible to include a PHP file using JavaScript and JS variable ...

javascriptphphtmlvariables

Leveraging Ajax to Retrieve Data from Symfony Controller

Within a form type that utilizes a twig template, I am retrieving images attached to the current listing object and presenting them with an option for the user to delete. To enhance user experience, I aim to implement the feature where users can delete ind ...

phpjqueryajaxsymfony

Sending Email Form in PHP using JQuery and Ajax for seamless user experience

Looking to create an email form in HTML with PHP, but running into the issue of the page reloading after submitting? Many people turn to jQuery and AJAX to solve this problem. While you may have come across solutions on Stack Overflow, as a non-native Engl ...

javascriptphpjqueryhtmlajax

Leveraging the power of Map and Sort to display the items containing image URLs alongside their respective timestamps

I'm diving into firebase and utilizing react, and currently I've come across this snippet of code: {photos.map(url => ( <div key={url} style={card}> <img src={url} style={image} /> <div s ...

javascriptreactjsobjectjavascript-objects

Add Content to Textbox by Clicking

In my current setup, I have a variety of buttons that, when clicked, should add the text from the button to a text box. Each time a button is clicked, I want the text to be appended to whatever is already in the input field. Current Approach $('#js- ...

javascriptjqueryjquery-ui

Generating unique ID's for data posting in PHP and JavaScript

I've developed a dynamic form that includes an "add more" button to generate an XML file for data import purposes. Users can fill out the form and add as many entries as needed by clicking on the "add more" button. The inputted data is then processed ...

javascriptphpjquery

When AJAX is invoked, the HTML content fails to display within a div

The following is the ajax script I am currently utilizing: mypage.php $(".sales_anchor").click(function(e) { e.preventDefault(); var store_username = $("#storeUsername").val(); var store_id = $("#storeID").val(); var sale_id = $(this).a ...

javascriptphpjqueryajax

Incorporating geocoding functionality in an asp.net mvc project and looking to efficiently transfer latitude and longitude data from JavaScript to a controller function

UPDATED. Following your suggestions, I implemented the function as shown below: [HttpPost] public ActionResult populate_place(string lati, string longi) { list_placesModels list_place = new list_placesModels(); list_place.Latitude = lati; li ...

javascriptasp.net-mvc

Selecting the appropriate technology or library for incorporating user-defined text along a designated path within established areas

I am currently developing an admin dashboard with CodeIgniter 2 that allows the admin to upload custom images, particularly ones with blank spaces for text overlay. The goal is to enable regular users to add their desired text in specific areas defined by ...

phpjavascripthtmlsvgraphael