У меня есть таблица с несколькими строками... Я хочу смочь выбрать строку и нажать, изменяют, и я должен смочь сделать все ячейки той строки доступными для редактирования...
Как я сделал бы ячейку доступной для редактирования в JavaScript? И лучше использовать JQuery?
Вот быстрый концепция Я только что работал для вас:
$(function(){
$("button[name='doModify']").click(function(){
// disable out modify button
$(this).attr("disabled","disabled");
// enable our save button
$("button[name='save']").removeAttr("disabled");
// cycle through each row having marked for modification
$(":checkbox[name='modify']:checked").each(function(){
$(this).closest("tr").find("td:gt(0)").each(function(){
// convert each cell into an editable region
$(this).wrapInner("<textarea name='"+$(this).attr("rel")+"'></textarea>");
});
});
});
});
-
<table border="1" cellspacing="1" cellpadding="5">
<tbody>
<tr>
<td><input type="checkbox" name="modify" /></td>
<td rel="username[]">jon.doe</td>
<td rel="information[]">This is my bio.</td>
</tr>
<tr>
<td><input type="checkbox" name="modify" /></td>
<td rel="username[]">jonathan.sampson</td>
<td rel="information[]">This is my bio.</td>
</tr>
<tr>
<td><input type="checkbox" name="modify" /></td>
<td rel="username[]">yellow.05</td>
<td rel="information[]">This is my bio.</td>
</tr>
<tr>
<td colspan="3" align="right">
<button name="doModify">Modify</button>
<button name="save" disabled="disabled">Save</button>
</td>
</tr>
</tbody>
</table>
Вы можете вставлять текстовые поля в каждую ячейку и устанавливать значения в качестве значений ячейки таблицы.
Что-то вроде этого
$(function(){
$("#tbl1 tr").click ( function(){
if ( !$(this).hasClass('clicked') )
{
$(this).children('td').each ( function() {
var cellValue = $(this).text();
$(this).text('').append ( "<input type='text' value='" + cellValue + "' />" );
});
$(this).addClass('clicked');
}
});
});
<table id="tbl1">
<tr>
<td>1</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Вы можете поместить кнопку обновления и получить значения из текстовых ячеек и обновить их.
SET Содержание-редактируемые
Свойство каждого элемента Вы хотите редактировать.
http://html5demos.com/contentedediTable
Нет необходимости делать свой собственный код, плагин для jQuery для этой цели существует уже. Попробуйте Jeditite , это может сделать именно то, что вам нужно.
Их демонстрационная страница имеет несколько хороших примеров: