Transform a table cell into an editable field by overlaying an input box on top of the

I'm looking for a way to make a table cell editable when double-clicked so that I can input some values into the cell:

https://i.sstatic.net/1r1sq.png

Currently, my approach involves placing an input box inside the td element when it is double-clicked: 

$('<input type="text" />').val(oldCellval).appendTo($this).end().focus().select();

The variable $this represents the td element where I want the input box to appear on double click. Upon blur, I remove the input box and set the new value back.

I am seeking a solution to display the input box over the td element rather than inside it, as my table library only allows text within td elements. When I add an HTML element like input inside the td, it does not function correctly. Any assistance would be greatly appreciated.

javascriptjquerycsshtml-table

Answer №1

To achieve a similar outcome, you have the option to utilize the contenteditable attribute.

<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>

See it in action on Fiddle:https://jsfiddle.net/kpkjr7ev/

Answer №2

To implement this functionality, consider utilizing the contenteditable attribute instead of the input tag. This allows for a more dynamic and customizable approach. 

$('td').on({
  'dblclick': function() {
    $(this).prop('contenteditable', true);
  },
  'blur': function() {
    $(this).prop('contenteditable', false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=1>
  <thead>
    <tr>Heading 1</tr>
    <tr>Heading 2</tr>
  </thead>
  <tbody>
    <tr>
      <td>ddd</td>
      <td>ddd</td>
    </tr>
    <tr>
      <td>ddd</td>
      <td>ddd</td>
    </tr>
  </tbody>
</table>

Answer №3

Discover more about the jQuery Datatables Editable plugin here

If you're looking for a fantastic plugin to use, I highly recommend JQuery Datatables Check it out here

This amazing plugin includes an "editable" feature which you can find at this link. This tool works seamlessly and even allows you to update your MySQL DB through this option

Take the time to explore and get familiar with all its features. Once you do, you'll see how valuable it can be for various table projects.

Answer №4

When you use contenteditable='true' like this, it may not function properly in Internet Explorer. To ensure compatibility, I suggest placing a div element within a table cell as shown below:

Then, use JavaScript to enable editing on cell double-click:

 $(this).find('#editdiv').prop('contenteditable', true)

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

Learn how to test a function called within the FileReader's onload function in React

I have a component with the following code. I am trying to test whether onSubmit of the form triggers the this.props.onUpload method in reader. How can I successfully test this? My current expect test seems to be failing, possibly because this.props.onUplo ...

javascriptreactjstddjestjsenzyme

Accessing data from a Vue component externally

Utilizing Vue loaded from a script (not a CLI) in a file named admin.js, I have multiple components that interact with each other by emitting events. No Vuex is used in this setup. Additionally, there is another file called socket which creates a websocket ...

javascriptsocketsvue.jscomponents

While creating a customer profile sample, I encountered an issue where I received an error message stating "POST http://localhost:3000/cusprofiles/add 400 (Bad Request)" when attempting to add data

I'm having trouble creating a customer profile for a vet clinic in my code. I'm unable to add and edit customer details, and I'm not sure where I've made a mistake. The only method that seems to be working is the GET method. Can someone ...

javascriptreactjsmongodb

Narrow down your search results with date range filtering in Angular Material

Seeking guidance as a newcomer to Angular Material, I am trying to implement a date range filter for a table of N results. The options in the filter select are (1 day, 5 days, 1 week, 15 days), which are populated using a variable JS vm.rangos=[ {id ...

angularjshtmlcssangular

Using JQuery to make an ajax request to a WebService, pulling the URL from a configuration file within the

Currently, I am successfully calling a WebService (ASP.NET) from a JQuery ajax call. However, I am looking to relocate the WebService to a different project than the one for the WebApp. To achieve this, I have added a Web Reference to my project. My next s ...

jqueryasp.netweb-services

Tips for setting up a range slider for decimal numbers

I have implemented the following code for a range slider. It works perfectly fine for integer values like 1 and 100, but I am facing issues when trying to use decimal values. I attempted to substitute 1 with 0.1 but it did not yield the desired result. ...

javascriptjquery

Is there a way to determine whether the Vue.js environment is running in development or production mode?

Is there a way to determine if the Vue.js environment is in development or production? Within my AxiosConfig's config.js: AxiosConfig:{ baseURL:dev.NODE_ENV.BASE_API, responseType: "json", withCredentials: true, ... You can see the ...

javascriptvue.js

Steps for assigning a 404 status code upon promise rejection

My approach to testing the login functionality involves using promises and chaining them. If the user enters an invalid password, the data is rejected; otherwise, it is resolved. I then verify if the user is logged in successfully by chaining these methods ...

javascriptnode.jsexpresspromiseroutes

Sharing socket data between different namespaces in Socket.ioSocket.io enables the

Is there a solution to sharing data set in a socket in one namespace and accessing it on another namespace? While I understand that data can be attached to the socket object itself, a problem arises when trying to access the data in a different namespace. ...

javascriptnode.jssocket.io

Using a CSS style to modify a class based on another class at the same level in the hierarchy

I am working with a jQuery carousel that is adding an 'active' class to images within a div. Within the same div, there is also a span with a 'fade' class that has a CSS style of opacity: 0. Is there a way to change the CSS style of the ...

javascriptjquerycss

Encountering Key-Value Pair Errors While Executing the BrowserStack Options App

Using node v14.17.1 (npm v6.14.13), Cucumber/BDD. The Package.json file contains the following dependencies. ////////// "devDependencies": { "@types/react": "^17.0.11", "@wdio/appium-service": "^7.7.3&q ...

javascriptnode.jswebdriver-iobrowserstack

Tips for organizing bower dependencies efficiently

I'm currently working on an HTML-based project and utilizing a bower.json file to manage all the dependencies: { "name": "MyProject", "version": "0.1", "main": "index.html", "dependencies": { "modernizr": "2.8.3", "classie": "1.0.1", ...

javascripthtmlnode.jsbower

Increasing and decreasing the display of content using JQuery based on height rather than character count

I'm attempting to create a show more/show less link with a set height of 200px that, when clicked, will reveal the rest of the content. Anything exceeding 200px will be hidden, and there will be a "show more" link to display the remaining text. I&apos ...

javascriptjqueryhtmlcss

Is the AngularJS Date property model sending an incorrect value to the server?

There are some puzzling things I am trying to figure out. When using datetimepicker, the Date and time selected appear correctly on the screenshot. The value in the textbox is accurate The model's value in console is correct (but hold on a second... ...

javascripthtmlangularjsdatetime

Guide to creating a readonly HTML element using a PHP variable

I'm struggling with the following code snippet: <input type = "text" value = "$va" name = "n"/> My goal is to make the input field readonly when the va variable is not whitespace. Can anyone guide me on how to achieve this? ...

javascriptphphtmlformswhitespace

Formatting the Return Values of Ionic Select

Having an issue with Ionic 3. Using an <ion-select> element with ngModel="x". When attempting to display the value in the console, it shows with extra spaces and line breaks. I tried replacing line breaks with 'e' and spaces with 'a&ap ...

javascriptangulartypescriptionic-frameworkionic3

Dealing with HTTP status codes in jQuery AJAX requests

Currently in the process of transitioning my scripts to jQuery. Here is snippet of my old JavaScript code: var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : (window.ActiveXObject ? new window.ActiveXObject("Microsoft.XMLHTTP") : false); reque ...

jqueryajax

Using AJAX autocomplete with Sys.Serialization.JavaScriptSerializer

I implemented an ajax autocomplete feature in ASP.NET where a method from a web service is called to fetch postal codes. public string[] GetNames(string prefixText, int count, String contextKey) { prefixText = prefixText.Trim(); XmlNodeList list; ...

asp.netjavascriptajaxautocomplete

Tips for Keeping Sub Menu Visible Without Having to Click

I am working on an HTML navigation menu that opens submenus on click like this... $("#nav_evnavmenu > li > a").click(function () { // bind onclick if ($(this).parent().hasClass('selected')) { $("#nav_evnavmenu .selected div div ...

javascriptjqueryhtml

Exploring the process of implementing a filter search feature using Vue.js and JavaScript

Is it possible to create a filter search code using just data and method functions? I attempted to do the following: var fil = new Vue ({ el: '#app', data: { search: '', proL: [&a ...

javascripthtmlvue.jsfiltervuejs2