2017-11-21 10 views
1

현재 행에 클릭하면 해당 행의 데이터가 텍스트 상자 및 선택 상자로 출력되는 jQuery Datatable이 있습니다. 텍스트 상자에 입력 된 내용이 무엇이든지간에 세이버 버튼을 누르면 선택한 행에 저장/입력됩니다. JSFiddlejQuery Datatable, 선택한 행의 열에 텍스트 상자의 값 출력

자바 스크립트 :

가 여기 내 JSFiddle 년대 saverow 코드와

var table = $('#example').DataTable(); 

(function() { 
     var table = document.querySelector('#example'); 
     var name = document.querySelector('#nameinput'); 
     var format = document.querySelector('#formatinput'); 
     var address = document.querySelector('#addressinput'); 
     var report = document.querySelector('#reportinput'); 
     var alarm = document.querySelector('#alarminput'); 



     table.addEventListener('click', onTableClick); 

     function onTableClick (e) { 
     var tr = e.target.parentElement; 

     var data = []; 
     for (var td of tr.children) { 
      data.push(td.innerHTML); 
     } 

     name.value = data[0]; 
     address.value = data[1]; 
     format.value = data[2]; 
     report.value = data[3]; 
     alarm.value = data[4]; 
     console.log(alarm.value); 


     } 
     $("#saverow").click(function() { 
      var table1 = $('#data-table').DataTable(); 
      var data = []; 
      data[0] = name.value; 
      data[4] = alarm.value; 
      console.log(name.value); 
      console.log(alarm.value); 

      table1.draw(true); 
     }); 


})();` 

, 나는 다음 텍스트 상자의 값으로 열을 동일하게 만들려고 노력 테이블이 일하는 것이 다시 그리기로 생각했다. 텍스트 상자에 새로운 내용을 입력 한 다음 저장을 누르면 콘솔에 올바른 결과가 표시됩니다. 나는 단지 그것을 선택한 행에 다시 넣는 방법을 이해할 수 없다. 가능한 경우 인라인 편집을하고 싶지 않습니다. 이 형식으로 유지하려고합니다.

답변

0

답으로 간주 될지 모르겠지만 저장 행 클릭의 변수 data으로 실제로 아무 것도하지 않습니다. 데이터 테이블을 가져 와서 변경하지 않고 다시 그립니다. 그래서 아무 일도 일어나지 않는다는 것은 놀라운 일이 아닙니다.

은 바이올린이 변경은 추가 행을 얻을 참조 :

https://jsfiddle.net/o92g9goL/14/

는 주로, 서로 다른 배열로 테이블과 데이터 테이블을 설정해야합니다. 또한 main 함수 안에서 수행하십시오. 또한 실제로이 코드를 추가해야합니다 : 편집에 관해서는

datatable.row.add(data).draw(false); 

을, 그렇지 않으면 그것을 어떻게 것입니다, 당신은 단지 그것을 미리 채울하지 있는지 확인하지만, 해당 행에 대한 실제 참조를 확인해야합니다 그것을 업데이 트하려면 알아?

+0

테이블과 데이터 테이블을 다른 배열로 설정하는 방법은 무엇입니까? 결국 테이블에는 데이터베이스의 데이터가 채워집니다. –

+0

그리고 어떻게 행을 참조합니까, 질문에 대해 유감스럽게 생각합니다. 코딩에 익숙하지 않습니다. –

+0

@ J.Doe43이 링크, 특히 예제 섹션을 확인하십시오. https://datatables.net/reference/api/row) .data() - 아마도 datatables.net 문서를 보면서 많은 것을 알 수있을 것입니다. 내가 생각한 한 가지 사실은 전체 테이블에 클릭 이벤트를 넣었다는 것입니다. 링크에있는 예제에서 볼 수 있듯이 행에 넣고 싶을 때 –