Clicking on a cell in a table

Question

I am using bootstrap and JQUERY to create a "simple" room use app. It is a table, the columns are the days of the week (Mon - Sat) and the rows, the time (8:00AM, 8:30AM, 9:00AM, etc). Note: This in not a calendar per se. I don't need the dates or months.

Each cell can be blank or display info about what the room is being used for at that time. I want to be able to click on any cell in order to update or edit its info.

Is there a way to do this, (i.e. click on a cell)? I am finding only information on clicking on a row.

possible duplicate of [Using jQuery to edit individual table cells](http://stackoverflow.com/questions/1224729/using-jquery-to-edit-individual-table-cells) — Allmighty, Oct 17 '14 at 14:10
Is this any special situation of the Bootstrap ? Do you mean something else than that : http://jsfiddle.net/merianos/2s7Ln2mL/ ? In this example, I have implement very simple cell modification, but if you know JavaScript then you can achive better results. — KodeFor.Me, Oct 17 '14 at 14:23
Merianos.... The fiddle is exactly the start I needed!! Thanks — ChrisJ, Oct 19 '14 at 13:29

score 1 · Accepted Answer · answered Oct 17 '14 at 14:31

You could do something like this, I didn't dress it up, but the functionality is there.

Basically you will also need to have a div that will serve as your new info source.

HTML

<div id="newInfo">
    <textarea></textarea>
    <button>Submit</button>
</div>

jQuery

$('td').on('click', function(){
    $('#newInfo').show().data($(this));
});

$('button').on('click', function() {
    $that = $('#newInfo').data();
    $that.text($('textarea').val());
    $('textarea').val('');
    $('#newInfo').hide();
});

Fiddle

score 0 · Answer 2 · answered Oct 17 '14 at 14:31

<td>
    <div class="info">ABC</div>
    <form method="post" action="" class="edit"><textarea>...
</td>

With .info display:block and .edit display:none in your CSS

$('.info').click(function () {
    $(this).hide();
    $(this).next('.edit').show();
});

Clicking on a cell in a table

2 Answers2

HTML

jQuery

Fiddle