Hướng dẫn append data to table javascript - nối dữ liệu vào bảng javascript

"; }

Kết quả đầu ra dự kiến:

Tên khách hàng James Bond 007 Tom Cruise ............ ............ ............ ....... ..... James Bond 007 Tom Cruise ............ ............ ............ ............

Hướng dẫn append data to table javascript - nối dữ liệu vào bảng javascript

Benvc

Huy hiệu vàng 14K431 Huy hiệu bạc51 Huy hiệu đồng4 gold badges31 silver badges51 bronze badges

Hỏi ngày 25 tháng 10 năm 2018 lúc 20:44Oct 25, 2018 at 20:44

Điều này sẽ giúp bạn bắt đầu.

function addData() {
    var personName = document.getElementById("personName").value;
    var newRow = document.createElement("tr");
    var newCell = document.createElement("td");
    newCell.innerHTML = personName;
    newRow.append(newCell);
    document.getElementById("rows").appendChild(newRow);
    document.getElementById("personName").value = '';
}
    
     




Tôi đang cố gắng thêm nhiều dữ liệu vào bảng bên dưới bằng JavaScript.



  
    
    Home Page
    
  
  

      









Client Name
James Bond 007

style.js được sử dụng dưới đây:

function addData(){
  var personName = document.getElementById("personName").value;
  //console.log(personName);

  var getOlderInformation = document.getElementById("addDataHere").innerHTML;

  document.getElementById("addDataHere").innerHTML = getOlderInformation + "
" + personName + "
Client Name
James Bond 007

Bạn đã đi đúng đường, nhưng một lưu ý quan trọng là bạn đang cố gắng sử dụng một div bên trong bảng. Một bảng có cấu trúc rất cụ thể phải được khớp nếu bạn muốn nó hiển thị đúng.

Bạn có thể đặt các phần tử div bên trong TD hoặc TH, nhưng không phải bên trong chính phần tử bảng. Kiểm tra liên kết này: https://developer.mozilla.org/en-us/docs/web/html/element/table

Đã trả lời ngày 25 tháng 10 năm 2018 lúc 21:08Oct 25, 2018 at 21:08

Hướng dẫn append data to table javascript - nối dữ liệu vào bảng javascript

Bạn có thể sử dụng danh sách để phù hợp với những gì bạn cần ở đây là mã

    


  
  Home Page



  
   
    

Client Name

  • James Bond 007

và mã chức năng sử dụng addData () như `function addData () {

    var mylist=document.getElementById("mylist");
    var personName=document.getElementById("personName").value;
    var node = document.createElement("LI");
    var textnode = document.createTextNode(personName);
    node.appendChild(textnode);
    mylist.appendChild(node);
}`

Tôi hy vọng cái này sẽ giúp bạn :)

Đã trả lời ngày 25 tháng 10 năm 2018 lúc 21:27Oct 25, 2018 at 21:27

Hướng dẫn append data to table javascript - nối dữ liệu vào bảng javascript

AbdelzaherabdelzaherAbdElzaher

1042 huy hiệu bạc5 huy hiệu đồng2 silver badges5 bronze badges

Bạn có thể sử dụng một cách tiếp cận tương tự như những gì bạn đang cố gắng: nhận được ____1010, nối thêm một số HTML mới, sau đó thay thế bên trong. Nhưng, bạn cần phải có được

function addData(){
  var personName = document.getElementById("personName").value;
  //console.log(personName);

  var getOlderInformation = document.getElementById("addDataHere").innerHTML;

  document.getElementById("addDataHere").innerHTML = getOlderInformation + "" + personName + "";



}
0 của
function addData(){
  var personName = document.getElementById("personName").value;
  //console.log(personName);

  var getOlderInformation = document.getElementById("addDataHere").innerHTML;

  document.getElementById("addDataHere").innerHTML = getOlderInformation + "" + personName + "";



}
2 của bạn (không phải là yếu tố bạn lồng bên trong nó).

Ví dụ: đã thay thế

function addData(){
  var personName = document.getElementById("personName").value;
  //console.log(personName);

  var getOlderInformation = document.getElementById("addDataHere").innerHTML;

  document.getElementById("addDataHere").innerHTML = getOlderInformation + "" + personName + "";



}
3
function addData(){
  var personName = document.getElementById("personName").value;
  //console.log(personName);

  var getOlderInformation = document.getElementById("addDataHere").innerHTML;

  document.getElementById("addDataHere").innerHTML = getOlderInformation + "" + personName + "";



}
4 của bạn bằng trình nghe sự kiện).

const personName = document.getElementById('personName');
const appendButton = document.getElementById('appendButton');
const nameTable = document.getElementById('nameTable');
appendButton.addEventListener('click', (event) => {
  let content = nameTable.innerHTML;
  content += '' + personName.value + '';
  nameTable.innerHTML = content;
});


Client Name
James Bond 007

Tùy thuộc vào sự phức tạp của những gì bạn đang làm, có thể đi nhanh hơn để đi theo tuyến

function addData(){
  var personName = document.getElementById("personName").value;
  //console.log(personName);

  var getOlderInformation = document.getElementById("addDataHere").innerHTML;

  document.getElementById("addDataHere").innerHTML = getOlderInformation + "" + personName + "";



}
5 /
function addData(){
  var personName = document.getElementById("personName").value;
  //console.log(personName);

  var getOlderInformation = document.getElementById("addDataHere").innerHTML;

  document.getElementById("addDataHere").innerHTML = getOlderInformation + "" + personName + "";



}
6 được đề xuất trong các câu trả lời khác nếu bạn cũng sử dụng
function addData(){
  var personName = document.getElementById("personName").value;
  //console.log(personName);

  var getOlderInformation = document.getElementById("addDataHere").innerHTML;

  document.getElementById("addDataHere").innerHTML = getOlderInformation + "" + personName + "";



}
7. Một vi dụ khac:

appendButton.addEventListener('click', (event) => {
  const frag = document.createDocumentFragment();
  const tr = document.createElement('tr');
  const td = document.createElement('td');
  td.appendChild(document.createTextNode(personName.value));
  tr.appendChild(td);
  frag.appendChild(tr);
  nameTable.appendChild(frag);
});


Client Name
James Bond 007

Đã trả lời ngày 25 tháng 10 năm 2018 lúc 21:11Oct 25, 2018 at 21:11

Benvcbenvcbenvc

Huy hiệu vàng 14K431 Huy hiệu bạc51 Huy hiệu đồng4 gold badges31 silver badges51 bronze badges