Преобразуйте ячейки таблицы в текстовые поля с помощью JQuery - PullRequest
6 голосов
/ 22 июня 2011

У меня есть таблица, показанная ниже:

<table id="paramsTable">
    <tbody>
        <tr>
            <th>Name</th>
            <th>Value&nbsp;<span style="color: Blue; cursor: pointer; font-size: smaller;" id="editParamValues">Edit</span></th>
            <th>Type</th>
        </tr>
        <tr>
            <td style="display: none;">1372</td>
            <td>providername</td>
            <td>BloombergFTP</td>
            <td>String</td>
        </tr>
        <tr>
            <td style="display: none;">1373</td>
            <td>RateSetList</td>
            <td>1020</td>
            <td>String</td>
        </tr>
        <tr>
            <td style="display: none;">1374</td>            
            <td>BloombergServer</td>
            <td>CFC105</td>
            <td>String</td>
        </tr>
    </tbody>
</table>

Итак, теперь, этот отличный маленький промежуток, я привязался к этому событию клика:

$('#editParamValues').live('click', function () {
      alert('true');
});

Получение оповещения, этоработает отлично.Однако я не хочу предупреждать, я хочу, чтобы этот метод с привязкой изменил все ячейки в столбце value, чтобы они стали текстовыми полями, заполненными любым их значением, чтобы пользователь мог их редактировать.

Как бы я это сделал?

Ответы [ 2 ]

14 голосов
/ 22 июня 2011
$('#editParamValues').click(function () {
    $('tr td:nth-child(3)').each(function () {
        var html = $(this).html();
        var input = $('<input type="text" />');
        input.val(html);
        $(this).html(input);
    });
});
3 голосов
/ 22 июня 2011

Вам даже не нужен Javascript / jQuery:

    <table>
        <tr>
            <td><input type="text" value="My Thing"></td>
        </tr>
    </table>
input {
 border:none;

}
input:active {
    border:1px solid #000;
}

... просто используйте CSS, чтобы стилизовать ввод, чтобы он выглядел как диапазон.

...