Question

92

Changing td to textbox when clicked and changing textbox back to td when user is done

rated 0 times [ 98] [ 6] / answers: 1 / hits: 16482 / 9 Years ago, sun, july 26, 2015, 12:00:00

I'm looking for a way the user can change a td from table by clicking on it. My current setup is when a user clicks on a td, it should replace the clicked td by a textbox which contains the text from the clicked td. Then when the user clicks outside of it, or presses enter. It should change the textbox back to td.

This is the Table I have:

<table class=table id=tableCompleted>

    <thead>

        <tr>

            <th>Name</th>

            <th>A</th>

            <th>B</th>

            <th>C</th>

            <th>D</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>John</td>

            <td>Yes</td>

            <td>Yes</td>

            <td>No</td>

            <td>No</td>

        </tr>

        <tr>

            <td>Jesse</td>

            <td>Yes</td>

            <td>Yes</td>

            <td>Yes</td>

            <td>Yes</td>

        </tr>

        <tr>

            <td>David</td>

            <td>No</td>

            <td>Yes</td>

            <td>No</td>

            <td>No</td>

        </tr>

    </tbody>

</table>

This is the script I have written, the problem I have is that, when a users clicks on a td it replaces all the td's and I havent figured out how to change it back when it loses focus. I tried using a button but that made it even worse. Also the text from the td doesn't get placed inside the textbox.

The script I used for it:

$('td').click(function () {

    $('td').replaceWith(function () {

        return '<input type=text id=modify value=' + $('#Text').val() + ' />';

    });

})

I Currently have 3 problems with it, Im not sure how to only change the td that is clicked, because all the td don't have a unique id or class. And I'm not sure how to change it back when the user is done changing it. Also It doesn't place the content of the td inside the textbox.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bradleymoisesy

Add To Favorites

Follow

Total Points: 121

Total Questions: 105

Total Answers: 95

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

bradleymoisesy questions

1 which data type to use to expect date value in jest

Wed, Dec 22, 21, 00:00, 2 Years ago

1 React/Next.js doesn't seem to work with Apexcharts

Tue, Jun 1, 21, 00:00, 3 Years ago

1 React chart : prevent chart's canvas scaling with height and width

Mon, Feb 1, 21, 00:00, 3 Years ago

1 How to create Create an Excel File with javascript?

Thu, Jun 11, 20, 00:00, 4 Years ago

1 How to create a search filter using Vue js from API Data?

Thu, Jan 16, 20, 00:00, 4 Years ago

View All

answered 9 Years ago byronkodyo · Accepted Answer

For referring to the clicked element you can use the this keyword:

$('td').on('click', function() {

    $(this)...

});

Also you shouldn't replace the td with an input, because a trelement can't have an input child. Instead of it remove the textContent of the td and append an input to it. Here is one way of implementing this:

$('td').on('click', function() {

    var $this = $(this);

    var $input = $('<input>', {

        value: $this.text(),

        type: 'text',

        blur: function() {

           $this.text(this.value);

        },

        keyup: function(e) {

           if (e.which === 13) $input.blur();

        }

    }).appendTo( $this.empty() ).focus();

});

Here is a demo using the above snippet.

You have also a more sensible option: contentEditable property.

$('td').prop('contentEditable', true);

Using the above property browser handles the editing. You can either manually add a contentEditable to the target cells in your markup or use JavaScript for modifying the attribute.