30/09/2018, 19:36

Show dữ liệu tạm ra bảng trong php

Mọi người ơi, cho em hỏi.
Em có 1 combobox, 1 textbox…khi chọn combobox và textbox xong thì em nhấn submit nó nhảy zô bảng table bên dưới combobox và textbox. Dữ liệu chỉ nhảy xuống bảng thui. Chứ chưa lưu vao cơ sở dữ liệu. Và em có thể xoa đc dòng tren bảng đó.
Xin mọi người giúp em ý tưởng làm ạ.em đang lập trình web bằng php.

Tiến Định viết 21:48 ngày 30/09/2018

ví dụ textbox có name="test" thì show dữ liệu trong textbox ra băng cách <?php echo $_POST['test'] ?>

Jonly Tran viết 21:43 ngày 30/09/2018

cái đó mình biết. nhưng ý mình là insert cái đó vào bảng dữ liệu tạm thui. sau đó mới lưu nguyên bảng vào cơ sở dữ liệu thiệt á

Tiến Định viết 21:48 ngày 30/09/2018

cái đó tùy vào mục đích của bạn để làm gì , nếu chỉ show ra để xem mà ko tái sử dụng thì bạn show trực tiếp ra , còn nếu muốn sử dụng lại vào 1 mục đích khác thì bạn tạo 1 bảng tạm rồi lưu dữ liệu vào

Jonly Tran viết 21:38 ngày 30/09/2018

mình muốn lưu vào bảng tạm rồi mới lưu vào csdl chính á. bạn biết làm sao hk? giúp mình đi

Lương Minh viết 21:50 ngày 30/09/2018

Có phải ý bạn là sau khi chọn dữ liệu thì dữ liệu sẽ hiển thị lên bảng dữ liệu để xem rồi có thể chọn xóa bất kỳ dòng nào phải không ? Nếu vậy thì dùng javascript kết hợp HTML

Jonly Tran viết 21:52 ngày 30/09/2018

Đúng rồi đó bạn. Nhưng cách làm sao bạn

Lương Minh viết 21:46 ngày 30/09/2018

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> Example </title>
        <style>
              table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}

        </style>
</head>
<body>    
        <select>
             <option>Toán</option>
             <option>Văn</option>
             <option>Vật lý</option>
             <option>Lịch sữ</option>
       </select>
       <p style='display:inline'> Tên học sinh : </p>
       <input type='text' name='txtName'/>
       <button> Nhập </button>
       <select> 
       </select>
       <button> Xóa dòng </button>
       <table>
           <tr>
             <th> Tên môn học</th>              
             <th> Tên học sinh</th>
           </tr>
       </table>
       <script  type='text/javascript'>
              select = document.querySelectorAll('select'); // trả về danh sách các lựa chọn
 table = document.querySelector('table'); 
txt = document.querySelector('input');
btn = document.querySelectorAll('button'); // trả về danh sách nút
i= 0;
  // thêm vào bảng
 btn[0].onclick = function()
 {
     var row = table.insertRow(1);
     var cell1 = row.insertCell(0);
     var cell2 = row.insertCell(1);
     cell1.innerHTML = select[0].value;
     cell2.textContent = txt.value;
     option = document.createElement('option');
     option.text = i+1;
     select[1].add(option);
     i++;
 };
// xóa dòng
btn[1].onclick = function()
{
   table.deleteRow(select[1].value); 
   select[1].remove(select[1].selectedIndex);
}


       </script>
</body>
</html>

Đỗ Mạnh Hà viết 21:47 ngày 30/09/2018

Mình đưa ra 2 trường hợp để xem bạn đang thắc mắc trong trường hợp nào nhé!

Bạn muốn dữ liệu được hiển thị tạm thời khi user lưu thông tin và người dùng có thể thao tác xóa, chỉnh sửa, thêm nhiều bản ghi khác. Trong quá trình đó thì dữ liệu chưa được lưu vào database mà chỉ khi nào users muốn sẽ lưu toàn bộ những dữ liệu đó vào database sau quá trình chỉnh sửa.

Vậy thì 2 trường hợp nó sẽ như sau:

1, Nếu thông tin cần lưu tạm thời vừa hoặc lớn thì bạn nên tạo 1 bảng tạm thời trong database để lưu quá trình chỉnh sửa của users. Sau đó nếu người dùng muốn lưu lại thực sự thì mình sẽ lấy thông tin trong bảng tạm đó để insert vào bảng chính của mình.

2, Nếu thông tin cần lưu tạm thời nhỏ thì bạn có thể dùng Cookie, Session trong PHP hoặc HTML5 Application Cache, WebStorage, … (lưu ý là chỉ với lượng thông tin nhỏ vì nếu thông tin cần lưu lớn sẽ xảy ra vấn đề mất mát hoặc hiệu suất sẽ không được như mong muốn). Sau đó bạn cần lưu vào database thì lấy từ đó ra và insert vào database thôi.

Jonly Tran viết 21:38 ngày 30/09/2018

mình làm giống bạn hk được

Jonly Tran viết 21:43 ngày 30/09/2018

cách 2 á bạn. chỉ giúp mình đi. mình có 1 combobox và textbox và nút submit. Khi chọn dữ liệu từ combobox và nhập dữ liệu từ textbox xong sẽ nhấn submit vào dữ liệu sẽ chảy xuống bảng ở dưới. Nhưng chưa lưu vào csdl. như hình nè mn.mong mn giúp mình

cách 2 á bạn. chỉ giúp mình đi.
mình có 1 combobox và textbox và nút submit. Khi chọn dữ liệu từ combobox và nhập dữ liệu từ textbox xong sẽ nhấn submit vào dữ liệu sẽ chảy xuống bảng ở dưới. Nhưng chưa lưu vào csdl. như hình nè mn.
mong mn giúp mình

Đỗ Mạnh Hà viết 21:40 ngày 30/09/2018

Mình có làm demo đơn giản cho bạn coi. Bạn xem rồi tham khảo nhé!

jsbin.com

JS Bin

A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

Có nhiều cách khác. Đây là cách mình làm nhanh cho bạn xem để bạn hình dung ra cách làm nó như thế nào thôi. Bạn có thể tham khảo nhiều ví dụ khác hoặc các bài viết để thực hiện nhé!

Jonly Tran viết 21:49 ngày 30/09/2018

cám ơn bạn mình làm được rồi, còn lưu hết bảng đó vào csdl thì sao bạn.

Đỗ Mạnh Hà viết 21:51 ngày 30/09/2018

Như thế này nhé bạn:

Ở ví dụ trên mình đã có làm cho bạn được là đã có 1 object tempData lưu dữ liệu tạm rồi, giờ muốn lưu nó vào database thì bạn có thể làm những bước như sau:

1, Convert tempData sang dạng JSON bằng hàm var tempDataJSON = JSON.stringify(my_json_obj)
2, truyền dữ liệu vừa convert tới trang PHP để xử lý thông qua Ajax

$.ajax({ url: 'my_php_file.php', data: {my_json_data: tempDataJSON}, type: 'POST', dataType: 'json' ... });

3, bên PHP bạn sẽ convert ngược lại JSON data sang dữ liệu mà PHP có thể dùng để insert vào database được.
$dataToInsertDatabase = json_decode($_POST['my_json_data']));

Sau đó có dữ liệu bên PHP rồi bạn chỉ cần lặp và insert vào database thôi.

viết 21:49 ngày 30/09/2018

http://vuejs.org/examples/todomvc.html

Jonly Tran viết 21:37 ngày 30/09/2018

Bạn ơi, ở vd trên là textbox thì insert vào bảng được rồi. nhưng của mình là combobox, khi insert vào bảng nó chỉ hiện ra mã của dữ liệu đó à. chứ hk hiện tên

Đỗ Mạnh Hà viết 21:42 ngày 30/09/2018

Bạn lấy value của combobox thì nó ra mã là đúng mà. Nếu bạn muốn lấy text thì đơn giản thôi. Mình có demo cho bạn xem để tham khảo nhé!

jsbin.com

JS Bin

A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

Lương Minh viết 21:46 ngày 30/09/2018

Bạn có thể sử dụng ajax để thêm dữ liệu vào trong bảng của cơ sỡ dữ liệu. Bản chất vấn đề chính là lấy được giá trị trong các ô của dòng được chọn.
Ví dụ

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> Example </title>
        <style>
              table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}

        </style>
</head>
<body>    
        <select>
             <option>Toán</option>
             <option>Văn</option>
             <option>Vật lý</option>
             <option>Lịch sữ</option>
       </select>
       <p style='display:inline'> Tên học sinh : </p>
       <input type='text' name='txtName'/>
       <button> Nhập </button>
       
       <table>
           <tr>
             <th> Tên môn học</th>              
             <th> Tên học sinh</th>
             <th> Xóa </th>
           </tr>
       </table>
       <script  type='text/javascript'>
                    select = document.querySelectorAll('select');
table = document.querySelector('table');
txt = document.querySelector('input');
btn = document.querySelector('button');
i= 1;
 btn.onclick = function()
 {
     var row = table.insertRow(i);
     var cell1 = row.insertCell(0);
     var cell2 = row.insertCell(1);
     var cell3 = row.insertCell(2);
     cell1.innerHTML = select[0].value;
     cell2.textContent = txt.value;
     cell3.innerHTML = "<button onclick='InsertData("+i+",this)'> Nhập " + i +" </button>";
     i++;
 };



function InsertData(x,y)
{
   cells = table.rows[x].cells; // trong dòng hiện hành lấy danh sách ô 
   xhr = new XMLHttpRequest();
   xhr.open('GET','domain.php?a='+cells[0].innerHTML+'&b='+cells[1].innerHTML,true);
   xhr.send();
   xhr.onreadystatechange = function()
   {
      if(xhr.readyState == 4 && xhr.status == 200)
      {
          alert(xhr.responseText); // báo thêm dữ liệu thành công.
      }
   }
   y.disabled = true;   // ẩn nút sau khi nhập
}
       </script>
</body>
</html>

Ngoài ra cũng có thẻ dùng jquery ajax để xử lý vấn đề trên. Phần còn lại tập tin php xử lý nhập liệu là domain.php của bạn.

lee viết 21:42 ngày 30/09/2018

bạn cho mình hỏi mình tạo với lưu thì ok rồi còn khi xóa thì nó ko xóa được dữ liệu ở bảng tạm
$(’#modal-panel’).on(‘click’, ‘#bt-xoa’, function (e) {
var dataBlock = $("#table-data");
dataBlock.remove(tempData.selectedIndex);
}

Đỗ Mạnh Hà viết 21:39 ngày 30/09/2018

dataBlock.remove(tempData.selectedIndex); Câu lệnh này của bạn bạn truyền sai tham số rồi nhé.

Bạn muốn xóa hàng dữ liệu trong bảng thì bạn phải truy xuất nó ra là bạn muốn xóa phần tử nào (có id hoặc class là gì?) rồi sau đó bạn truyền vào hàm remove() của ‘dataBlock.remove()’.

Hoặc bạn có thể sử dụng 1 hàm đơn giản của JavaScript để xóa dòng (row) bạn muốn xóa khi bạn đã có index (vị trí của dòng cần xóa) rồi.

VD: document.getElementById('table-data').deleteRow(2);

Tương tự bạn truyền tham số là tempData.selectedIndex của bạn vào là được.

lee viết 21:39 ngày 30/09/2018

đây là dữ liệu vào của mình
var tempData = [];
$(’#modal-panel’).on(‘click’, ‘#bt-phai’, function (e) {
e.preventDefault();
var text_1 = $(’#congthuc’).val();
if (text_1 != null) {
$(’#congthuc’).val(text_1 + ‘)’);
}
var dataBlock = $("#table-data");
var perInform = {
Hangtu: ‘0’,
IDFactor: ‘’,
MaFactor: ‘’,
Matoantu: encodeURIComponent(’)’)
};
dataBlock.append("

" + perInform.Hangtu +
“ ” + perInform.IDFactor +
“ ” + perInform.MaFactor +
“ ” + perInform.Matoantu + “ ”);
tempData.push(perInform);
});
theo như bạn nói mình sẽ phải lấy giá trị cuối cùng mới nhập vào để xóa phải ko? vì mình sẽ cho ra 1 chuỗi công thức xóa từ cuối xóa lên trường hợp xóa từng phần tử còn xóa 1 lần thì sao bạn khi đó mình ko quan tâm tới id hay class nào nữa

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Jonly Tran

0 chủ đề

0 bài viết

Tác giả nổi bật