대화 상자에서 편집하려는 Datatable이 있습니다. 사용자는 행을 선택한 다음 대화 상자를 열어야합니다. 대화 상자 텍스트 입력은 선택한 행 td와 일치해야합니다. 여기에서 편집을 클릭하여 필드를 활성화하여 입력을 편집 / 변경하고 변경 사항을 저장하여 테이블을 업데이트 할 수 있습니다. http://jsfiddle.net/BWCBX/5/ 행을 선택하고 (이 경우 삭제) 조작하는 작업 코드가 있습니다. 텍스트 입력을 업데이트하고 해당 입력에서 테이블을 편집하려면 어떻게해야합니까? 미리 감사드립니다.
var oTable;
/* Add a click handler to the rows - this could be used as a callback */
$("#example tbody tr").click( function( e ) {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
}
else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});
/* Add a click handler for the delete row */
$('#delete').click( function() {
var anSelected = fnGetSelected( oTable );
if ( anSelected.length !== 0 ) {
oTable.fnDeleteRow( anSelected[0] );
}
} );
/* Init the table */
oTable = $('#example').dataTable( );
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
return oTableLocal.$('tr.row_selected');
}
이
HTML 과 같이 입력 및 데이터 테이블을 업데이트 할 수 있습니다. 입력 에 ID를 추가합니다.
<div id="dialog" title="Properties">
<table>
<tbody>
<tr>
<th>Rendering engine</th>
<td><input id="rendering" type='text' /></td>
</tr>
<tr>
<th>Browser</th>
<td><input id="browser" type='text' /></td>
</tr>
</tbody>
</table>
<input type='button' value='Edit' class='editBtn' />
<input type='button' value='Save Changes' class='saveBtn' />
</div>
JS
var properties;//all td from .row_selected
$( "#opener" ).click(function() {
properties=fnGetSelected( oTable ).find("td"); //update selected row
$( "#dialog" ).dialog( "open" );
$( ".saveBtn" ).hide();
//update the input fields
$("#rendering").val(properties.eq(0).html());
$("#browser").val(properties.eq(1).html());
$( ".editBtn" ).show();
$("div#dialog input:text").attr("disabled", "disabled");
});
//update the dataTable with the input values and close #dialog
$( ".saveBtn" ).click(function() {
properties.eq(0).html($("#rendering").val());
properties.eq(1).html($("#browser").val());
$( "#dialog" ).dialog( "close" );
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다