我有一个带有几行的表格... 我想能够选择一行并单击修改,然后应该能够使该行的所有单元格都可编辑...
如何在Javascript中使单元格可编辑?使用Jquery是否更好?
我有一个带有几行的表格... 我想能够选择一行并单击修改,然后应该能够使该行的所有单元格都可编辑...
如何在Javascript中使单元格可编辑?使用Jquery是否更好?
Here's a quick concept I just worked up for you:
$(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>