Javascript cho phép thêm 1 động vào bảng

Question

Trong lúc dịch tài liệu dự án, mình bắt gặp 1 yêu cầu nhỏ. Cụ thể là ở màn hình create (tạo mới) cần tạo ra một danh sách input động, các row trong table có thể tăng giảm dựa vào button hoặc . Thực tế, đây là bài toán khá quen thuộc và dễ dàng thực hiện với các framework hỗ trợ data-binding như React, Angular hay VueJs. Tuy nhiên do đặc thù là maintaince một tool khá cũ của khách nên cũng không muốn add thêm mấy cái đao to búa lớn quá.

Bài toán này có thể sử dụng hoàn toàn Javascript thao tác trên HTML Dom. Tuy nhiên để hạn chế tối đa rủi ro khi làm dự án, mình quyết định sử dụng thư viện: List.js

Với bài tập nhỏ này mình giao lại cho 1 member mới vào team để intern, yêu cầu cuối ngày phải xong việc. Để không bị phàn nàn là Talk is cheap thì mình cũng thử code luôn

.

See the Pen Table List by Nguyễn Văn Vượng (@euclid1990) on CodePen.

DONE

Thực sự công việc này ko khó, tuy nhiên ở code Javascript có function:

được gọi lại khá nhiều, làm mình nhớ tới khái niệm Event Delegation trong jQuery.

Event delegation cho phép developer gắn một single event listener vào parent element (phần tử cha), sẽ áp dụng cho tất cả các descendant elements (phần tử con), cho dù các descendants đó có tồn tại hay không, hoặc được thêm vào trong tương lai.

Việc sử dụng Event delegation cho phép chúng ta không cần gọi lại nhiều lần 1 function (Ví dụ: refreshCallbacks) để bind event cho các element HTML được thêm vào trong tương lai. Bạn cũng có thể áp dụng nó vào đây ngay và luôn

Để hiểu rõ hơn về Event delegation cũng như cơ chế Event Propagation, các bạn có thể đọc thêm tại Understanding Event Delegation

Bạn có thể sử dụng ví dụ sau:

<table id="purches">
    <thead>
        <tr>
            <th>ID</th>
            <th>Transaction Date</th>
            <th>Category</th>
            <th>Transaction Amount</th>
            <th>Offer</th>
        </tr>
    </thead>

    <!--  <tr th:each="person: ${list}"    >
            <td><li th:each="person: ${list}" th:text="|${person.description}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.price}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.available}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.from}|"></li></td>
            </tr>
    -->

    <tbody id="feedback">
    </tbody>
</table>

Tệp JavaScript:

$.ajax({
    type: "POST",
    contentType: "application/json",
    url: "/search",
    data: JSON.stringify(search),
    dataType: 'json',
    cache: false,
    timeout: 600000,
    success: function (data) {
        //  var json = "<h4>Ajax Response</h4><pre>"  + JSON.stringify(data, null, 4) + "</pre>";
        // $('#feedback').html(json);
        //
        console.log("SUCCESS: ", data);
        //$("#btn-search").prop("disabled", false);

        for (var i = 0; i < data.length; i++) {
            //$("#feedback").append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn + '</td></tr>');
            $('#feedback').append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn + '</td><td>' + data[i].ssn + '</td><td>' + data[i].ssn + '</td></tr>');

            alert(data[i].accountNumber)
        }
    },
    error: function (e) {
        var json = "<h4>Ajax Response</h4><pre>" + e.responseText + "</pre>";
        $('#feedback').html(json);

        console.log("ERROR: ", e);
        $("#btn-search").prop("disabled", false);
    }
});

1 hữu ích 0 bình luận chia sẻ

Bạn có thể dùng JavaScript để tạo mới phần từ HTML sau đó chèn vào trang web. Đây là các cách giúp bạn tạo mới một phần tử HTML

`document.createElement(tag_name)`	tạo ra phần tử có thẻ `tag_name` như `a`, `p`, `div` ...
`element.cloneNode()`	Tạo ra một phần tử bằng cách nhân bản phần tử chỉ ra (`element`)
`document.createTextNode(text)`	tạo phần tử tử văn bản `text` HTML

 var node     = document.createTextNode("Tạo ra một phần tử");

 var linknode = document.createElement("a");
     linknode.href="https://xuanthulab.net/";
     linknode.innerText="xuanthulab.net";

Ví dụ trên sẽ tạo ra một nút text, nhưng nó chưa hiện thị cho đến khi bạn gắn phần tử đó vào HTML document để nó là phần tử con của một phần tử nào đó, có một số cách để gắn phần tử tạo ra từ JavaScript vào DOM HTML

`element.appendChild(newNode)`	Thêm phần tử `newNode` vào phần tử `element` nó trở thành phần tử con sau cùng của `element`
`element.insertBefore(newNode, node2)`	Chèn phần tử `newNode` nằm phía trước `node2`
`element.replaceChild(newNode, oldNode)`	Thay thế phần tử `oldNode` bằng phần tử `newNode`

Ví dụ sau tạo ra một phần tử đoạn văn p sau đó chèn nó vào phần tử div đang có sẵn trong DOM HTML

<div id ="demo">nội dung ví dụ</div>

<button onclick="add_child()">KẾT QUẢ</button>
<script>
   function add_child() {
       //tạo phần tử p    
       var p = document.createElement("p");

       //tạo phần tử text
       var node = document.createTextNode("Some new text");

       //gắn node vào p
       p.appendChild(node);
       
       //Thay đổi một số thuộc tính của p
       p.appendChild(node);
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById("demo");
       //gắn p vào div
       div.appendChild(p);
   }
</script>

nội dung ví dụ

Loại bỏ phần tử

Để loại bỏ phần tử HTML, bạn chọn phần tử cha rồi sử dụng phương thức removeChild(node)

<div id="demo">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
    var parent = document.getElementById("demo");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>

Ví dụ trên sẽ xóa bỏ phần tử đoạn văn thứ nhất

Bạn có thể sử dụng thủ thuật lấy thuộc tính parentNode để bỏ qua bước tìm phần tử cha trong DOM: child.parentNode.removeChild(child);

<div id="demo">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
    var child = document.getElementById("p1");
    child.parentNode.removeChild(child);
</script>

Thay thế phần tử

Để thay thể một phần tử bằng một phần tử khác dùng cú pháp element.replaceChild(newNode, oldNode). Trong đó element là nút cha

<div id="demo">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
    var p = document.createElement("p");
    p.innerText = 'Đây là đoạn văn mới tạo ra';

    var parent = document.getElementById("demo");
    var child = document.getElementById("p1");
    parent.replaceChild(p, child);
</script>

programming javascript insertBefore trong Javascript insertAdjacentHTML removeChild