Hướng dẫn javascript dynamic table with input fields - bảng động javascript với các trường đầu vào

div {
  background: red;
  margin: 5px;
}

table {
  border: 2px solid black;
}

td {
  padding: 10px;
  border: 1px solid lightgrey;
}

  
    
    
  
  
    
    Click Me!
    

function createTable() {
  var a;

  a = document.getElementById('tb1').value;

  if (a == "") {
    alert("Please enter some numeric value");
  } else {
    var rows = "

Làm ơn cho bất cứ ai giúp đỡ!

Cảm ơn trước..

hỏi ngày 27 tháng 6 năm 2016 lúc 10:53Jun 27, 2016 at 10:53

Sử dụng Element.appendChild thay vì innerHTML

• div {
    background: red;
    margin: 5px;
  }
  
  table {
    border: 2px solid black;
  }
  
  td {
    padding: 10px;
    border: 1px solid lightgrey;
  }

  0 sẽ trả về

  div {
    background: red;
    margin: 5px;
  }
  
  table {
    border: 2px solid black;
  }
  
  td {
    padding: 10px;
    border: 1px solid lightgrey;
  }

  1 của phần tử.

• div {
    background: red;
    margin: 5px;
  }
  
  table {
    border: 2px solid black;
  }
  
  td {
    padding: 10px;
    border: 1px solid lightgrey;
  }

  2 sẽ trả về

  div {
    background: red;
    margin: 5px;
  }
  
  table {
    border: 2px solid black;
  }
  
  td {
    padding: 10px;
    border: 1px solid lightgrey;
  }

  3 theo bộ chọn được chỉ định.
• Element.appendChild sẽ nối thêm

  div {
    background: red;
    margin: 5px;
  }
  
  table {
    border: 2px solid black;
  }
  
  td {
    padding: 10px;
    border: 1px solid lightgrey;
  }

  5 mới trong phần tử mà không ảnh hưởng đến nội dung hiện có trong phần tử.

function createTable() {
  var a = document.getElementById('tb1').value;
  if (a == "") {
    alert("Please enter some numeric value");
  } else {
    var th = document.querySelectorAll('#table th');//To check whether `TD` is appended in table or not!
    if (!th.length) {
      //If not appended, then append TD in table
      var rows = "Item NameQuantityQuantityTypeAmount";
      var table = document.createElement('table');
      table.innerHTML = rows;
      document.getElementById("table").appendChild(table.firstChild);
    }

    for (var i = 0; i < a; i++) {
      var elems = '';
      elems += "";
      var table = document.createElement('table');
      table.innerHTML = elems;
      document.getElementById("table").appendChild(table.firstChild);
    }
  }
}

div {
  background: red;
  margin: 5px;
}
table {
  border: 2px solid black;
}
td {
  padding: 10px;
  border: 1px solid lightgrey;
}

Đã trả lời ngày 27 tháng 6 năm 2016 lúc 11:04Jun 27, 2016 at 11:04

RayonrayonRayon

Phim huy hiệu vàng 35,8k44 gold badges48 silver badges73 bronze badges

3

Những gì bạn đã làm là đặt giá trị mới cho bảng mỗi lần. Những gì bạn thực sự muốn làm là thêm dữ liệu vào bảng bằng cách sử dụng chức năng "Phụ lục". Điều này cũng có thể được tạo ra, thậm chí dễ dàng hơn, sử dụng

Dưới đây là một sự thay đổi hoạt động với sự thay đổi (sử dụng JS ExpendChild):

    
    
    

    



Click Me!

Tôi sẽ khuyên bạn nên học cách sử dụng jQuery. Dù sao, đây là một số thông tin về các chức năng tôi đã đề cập: JQuery và chức năng "Phụ lục" của chúng.

Thông tin về JS Phụ lục - http://www.w3schools.com/jsref/met_node_appendchild.asp JQuery append - http://api.jquery.com/append/

Đã trả lời ngày 27 tháng 6 năm 2016 lúc 11:04Jun 27, 2016 at 11:04

RayonrayonBen Yitzhaki

Phim huy hiệu vàng 35,8k417 silver badges30 bronze badges

Những gì bạn đã làm là đặt giá trị mới cho bảng mỗi lần. Những gì bạn thực sự muốn làm là thêm dữ liệu vào bảng bằng cách sử dụng chức năng "Phụ lục". Điều này cũng có thể được tạo ra, thậm chí dễ dàng hơn, sử dụng

Dưới đây là một sự thay đổi hoạt động với sự thay đổi (sử dụng JS ExpendChild):

Tôi sẽ khuyên bạn nên học cách sử dụng jQuery. Dù sao, đây là một số thông tin về các chức năng tôi đã đề cập: JQuery và chức năng "Phụ lục" của chúng.

    
    
    

    



Click Me!

Thông tin về JS Phụ lục - http://www.w3schools.com/jsref/met_node_appendchild.asp JQuery append - http://api.jquery.com/append/Jun 27, 2016 at 11:02

M.TanzilM.TanzilM.Tanzil

Ben Yitzhakiben Yitzhaki1 gold badge11 silver badges27 bronze badges