Jquery Datatables 테이블입니다. 테이블 경계 밖으로 데이터가

Question

페이지를 새로 고칠 필요없이 AJAX를 사용하여 테이블을 편집하는 방법을 포함하여 Datatables를 사용하여 테이블을 관리하고 있습니다.

문제가 발생할 때까지 모든 것이 잘되었으므로 내 페이지 중 하나에서 더 많은 데이터가있는 큰 행을 사용해야하고 편집 버튼을 클릭하면 데이터가 오른쪽 테이블로 이동합니다. 조치없이

테이블 : 가

표가 편집 버튼을 클릭 한 후 : 가

표 후 나는이 편집 버튼 한 후 저장 버튼을 클릭 (최종 결과) :

내 Jquery 코드 (당신에게 조금 비평) :

$(document).ready(function() { 
    var oTable = $('#tableSmooth').dataTable({ 
    //"bFilter": false, 
    "bJQueryUI": true, //Enable smooth theme 
     "sPaginationType": "full_numbers" //Enable smooth theme 
    }); 
    var nEditing = null; 

    $('#tableSmooth a.edit').live('click', function (e) { 
     e.preventDefault(); 

     // Get the row as a parent of the link that was clicked on 
     var nRow = $(this).parents('tr')[0]; 

     if (nEditing !== null && nEditing != nRow) { 
      // A different row is being edited - the edit should be cancelled and this row edited 
      restoreRow(oTable, nEditing); 
      editRow(oTable, nRow); 
      nEditing = nRow; 
     } 
     else if (nEditing == nRow && this.innerHTML == '<img src="../../pictures/save.png" alt="edit" width="20" height="20">') { //Has to match line in edit row function 
      // This row is being edited and should be saved 
      saveRow(oTable, nEditing); 
      nEditing = null; 
     } 
     else { 
      // No row currently being edited 
      editRow(oTable, nRow); 
      nEditing = nRow; 
     } 
    }); 
}); 


function editRow (oTable, nRow) //Edit row 
{ 
    var aData = oTable.fnGetData(nRow); 
    var jqTds = $('>td', nRow); 

//Editing the rows to textboxes/dropdowns for further use 

    jqTds[0].innerHTML = '<input type="text" value="'+aData[0]+'" disabled>'; 
    jqTds[1].innerHTML = '<input type="text" value="'+aData[1]+'">'; 
    jqTds[2].innerHTML = '<input type="text" value="'+aData[2]+'" disabled>'; 
    jqTds[3].innerHTML = '<input type="text" value="'+aData[3]+'">'; 
    jqTds[4].innerHTML = '<input type="text" value="'+aData[4]+'">'; 
    jqTds[5].innerHTML = '<input type="text" value="'+aData[5]+'">'; 
    jqTds[6].innerHTML = '<a class="edit" href=""><center><img src="../../pictures/save.png" alt="edit" width="20" height="20"></a>'; //Note: Inner HTML has to match code in document.ready above 

} 


function saveRow (oTable, nRow) //Save row using AJAX 
{ 

     var jqInputs = $('input', nRow); //Only gets <input> values 
     var jqSelect = $('select', nRow); //Only gets <select> values 

    oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);//Update table with value for instant display (Not passed trough AJAX rather use JS to prevent possible AJAX error output in table) 
    oTable.fnUpdate(jqInputs[1].value, nRow, 1, false); 
    oTable.fnUpdate(jqInputs[2].value, nRow, 2, false); 
    oTable.fnUpdate(jqInputs[3].value, nRow, 3, false); 
     oTable.fnUpdate(jqInputs[4].value, nRow, 4, false); 
      oTable.fnUpdate(jqInputs[5].value, nRow, 5, false); 
    oTable.fnUpdate('<a class="edit" href=""><center><img src="../../pictures/edit.png" alt="edit" width="20" height="20"></a>', nRow, 6, false); 
    oTable.fnDraw(); 
} 

테이블 코드는 일반 테이블 코드이며 태그 및 태그와 같이 특별한 것은 아닙니다.

편집 후 표를 다시로드하는 것이 좋습니다. 이 형식을 수정하지만 oTable.fnDraw() 다시 그릴 수 있지만 그것을 고칠 수 없습니다. 어쩌면 다른 방법일까요?

누군가가 나를 도와 줄 수 있기를 바랍니다. 미리 감사드립니다.

Answer 1

텍스트 상자의 크기를 줄이기 위해 텍스트 상자에서 size = ""태그를 사용하여 텍스트 상자의 테두리를 벗어나지 않게 만들었습니다. 저렴한 수정이지만 작동합니다.