单击表格中的单元格

Question

我正在使用bootstrap和JQUERY创建一个简单的＆＃34;房间使用应用程序这是一个表，列是一周中的几天（周一至周六）和行，时间（上午8:00，上午8:30，上午9:00等）。注意：这不是日历本身。我不需要日期或月份。

每个单元格可以为空白或显示有关当时房间使用情况的信息。我希望能够点击任何单元格以更新或编辑其信息。

有没有办法做到这一点，（即点击一个单元格）？我只找到有关点击一行的信息。

Answer 1

你可以做这样的事情，我没有打扮，但功能就在那里。

基本上，您还需要div作为新的信息来源。

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

Answer 2

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

使用.info display：block和.edit display：none in CSS

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