Javascript - 使用生成的表中的按钮在旁边元素中显示信息

Question

我目前正在尝试找出使用按钮扩展动态生成的表格的方法。所述按钮将显示(单击时)相关页面 HTML 的旁注元素中表格中的信息的某些部分。例如 - 当我单击第一行中的按钮时，它会在表格旁边的旁边 block 中向我显示该行中的产品名称。想法很简单，执行起来却不那么简单。

创建旁白元素并不是什么复杂的事情，但创建可以展示动态表格部分内容的动态按钮对我来说有点问题。下面是负责创建表的完整代码。

 window.onload = function(e) {
    createBook("book");
  }
var books = [{
    "author": "Eric T. Freeman",
    "title": "Head First JavaScript Programming: A Brain-Friendly Guide",
    "isbn": "978-1-4493-4398-9, 9781449343989",
    "publisher": "O'Reilly Media",
    "editions": [{
        "year": "2017",
        "covercolour": "gray"
      },
      {
        "year": "2014",
        "covercolour": "blue"
      }
    ]
  },
  {
    "author": "David Flanagan",
    "title": "JavaScript: The Definitive Guide",
    "isbn": "0596805527",
    "publisher": "O'Reilly Media",
    "editions": [{
        "year": "2016",
        "covercolour": "yellow"
      },
      {
        "year": "2011",
        "covercolour": "black"
      }
    ]
  }
];

function createBook(bookid) {
  var bookbox = document.getElementById(bookid);

  article = document.createElement("article");
  bookbox.appendChild(article);

  sectionInfo = createSection("List of Books");
  article.appendChild(sectionInfo);

  var infoTable = createTableBook(book);
  sectionInfo.appendChild(infoTable);

}

function createTableBook() {
  var table = document.createElement("table");
  table.classList.add("tableBasic");
  var tr = document.createElement("tr");
  var th1 = document.createElement("th");
  var th2 = document.createElement("th");
  var th3 = document.createElement("th");
  var th4 = document.createElement("th");
  var th5 = document.createElement("th");
  var th6 = document.createElement("th");
  th1.innerHTML = "Author";
  th2.innerHTML = "Title";
  th3.innerHTML = "ISBN";
  th4.innerHTML = "Publisher";
  th5.innerHTML = "Editions";
  th6.innerHTML = "Showcase";
  tr.appendChild(th1);
  tr.appendChild(th2);
  tr.appendChild(th3);
  tr.appendChild(th4);
  tr.appendChild(th5);
  tr.appendChild(th6);
  table.appendChild(tr);

  for (var index in books) {
    var tr = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.innerHTML = books[index].author;
    tr.appendChild(td1);
    var td2 = document.createElement("td");
    td2.innerHTML = books[index].title;
    tr.appendChild(td2);
    var td3 = document.createElement("td");
    td3.innerHTML = books[index].isbn;
    tr.appendChild(td3);
    var td4 = document.createElement("td");
    td4.innerHTML = books[index].publisher;
    tr.appendChild(td4);
    var td5 = document.createElement("td");
 //   td5.appendChild(createEditionDetails(index));
    tr.appendChild(td5);
    var td6 = document.createElement("button");
    td6.innerHTML = "button";
    tr.appendChild(td6);
    table.appendChild(tr);
}
return table;
}

function buttonWork(asideID) {//function I want to use
    var aside = document.getElementById(asideID);

    var $row = $(this).closest("tr");
    var $text = $row.find(".name").text();
    aside.innerHTML += $text + '<br/>';
}
function createHeader(h, text) {
  header = document.createElement("header");
  h = document.createElement(h);
  h.innerHTML = text;
  header.appendChild(h);
  return header;
}

function createSection(title) {
  var section = document.createElement("section");
  section.appendChild(createHeader("h3", title));
  return section;
}

<section>
  <article>
    <aside>
      <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </aside>
    <section id="book">
    </section>
  </article>
</section>
<!--<script>
  window.onload = function(e) {
    createBook("book");
  }
</script>-->

经过一些尝试和错误，我找到了一些问题的解决方案，但我找不到一种方法将按钮可靠地连接到buttonWork函数中的新逻辑。我可以为 JS 新手提供一些想法。

Answer 1

首先，您的代码需要更正，因为所有表格内容都必须放入单元格中(th 或 td)。您当前已将 button 元素直接附加到行中。但是，经过修正后，这比您想象的要简单。

• 在表格上仅设置一个click 事件处理程序，并且当每个单击生成的按钮，该事件将冒泡到表中并在那里进行处理。 (event delegation)
• 为了区分一条信息和另一条信息，每个单元格都会有一个与之关联的类。
• 在点击处理程序中，我们将找到与使用 .closest() 单击的按钮和.querySelector()方法并将其显示在旁边。

顺便说一句，当您未设置/获取任何包含 HTML 的内容时，请勿使用 .innerHTML。它的使用存在性能和安全问题。相反，请使用 .textContent。

最后，您显示的代码不使用图像或外部资源，因此在 .load 事件上触发所有代码，虽然功能正常，但并不是最佳选择。相反，只要浏览器完成解析 body 中的 HTML，就启动您的代码。实现这一点的最简单方法是将代码放在结束 body 标记之前。

table {
 font-size:.8em;
 border:2px solid #363;
 font-family:Arial, Calibri, Helvetica;
}

th, td {
  border:1px solid #e0e0e0;
  padding:2px;
}

<body>
  <section>
    <article>
      <aside>
        <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </aside>
      <section id="book">
      </section>
    </article>
  </section>

  <!-- Placing your script here ensures that it won't run until all the HTML
       above it has been parsed and the DOM is fully loaded. -->
  <script>
  
    // Object property/key names do not need to be in quotes unless they contain spaces
    var books = [{
        author: "Eric T. Freeman",
        title: "Head First JavaScript Programming: A Brain-Friendly Guide",
        isbn: "978-1-4493-4398-9, 9781449343989",
        publisher: "O'Reilly Media",
        editions: [{year: "2017", covercolour:"gray" },{year: "2014", covercolour:"blue"}]
      },
      {
        author: "David Flanagan",
        title: "JavaScript: The Definitive Guide",
        isbn: "0596805527",
        publisher: "O'Reilly Media",
        editions: [{year: "2016", covercolour:"yellow"},{year:"2011", covercolour:"black"}]
      }];

    function createBook(bookid) {
      var bookbox = document.getElementById(bookid);

      article = document.createElement("article");
      bookbox.appendChild(article);

      sectionInfo = createSection("List of Books");
      article.appendChild(sectionInfo);

      var infoTable = createTableBook(book);
      sectionInfo.appendChild(infoTable);
    }

    function createTableBook() {
      var table = document.createElement("table");
      table.classList.add("tableBasic");
      var tr = document.createElement("tr");
      var th1 = document.createElement("th");
      var th2 = document.createElement("th");
      var th3 = document.createElement("th");
      var th4 = document.createElement("th");
      var th5 = document.createElement("th");
      var th6 = document.createElement("th");
      th1.textContent = "Author";
      th2.textContent = "Title";
      th3.textContent = "ISBN";
      th4.textContent = "Publisher";
      th5.textContent = "Editions";
      th6.textContent = "Showcase";
      tr.appendChild(th1);
      tr.appendChild(th2);
      tr.appendChild(th3);
      tr.appendChild(th4);
      tr.appendChild(th5);
      tr.appendChild(th6);
      table.appendChild(tr);

      // Books is an array, for/in loops are for objects.
      // With Arrays, there are many different types of loops available, but .forEach()
      // is the simplest as it does away with indexers
      books.forEach(function(book){
        var tr = document.createElement("tr");
        var td1 = document.createElement("td");
        td1.textContent = book.author;
        td1.classList.add("author");   // <-- This will be used to locate the data you want to show
        tr.appendChild(td1);
    
        var td2 = document.createElement("td"); 
        td2.textContent = book.title;
        td2.classList.add("title");  // <-- This will be used to locate the data you want to show       
        tr.appendChild(td2);
    
        var td3 = document.createElement("td");
        td3.textContent = book.isbn;
        td3.classList.add("isbn");   // <-- This will be used to locate the data you want to show       
        tr.appendChild(td3);
    
        var td4 = document.createElement("td");
        td4.textContent = book.publisher;
        td4.classList.add("publisher");  // <-- Used to locate the data you want to show           
        tr.appendChild(td4);
    
        var td5 = document.createElement("td");
        // td5.appendChild(createEditionDetails(index));
        td5.classList.add("edition");   // <-- This will be used to locate the data you want to show   
        tr.appendChild(td5);
    
        // All table content must be contained inside of cells. You have to put your button in 
        // a cell and then that cell goes into the row.
        var td6 = document.createElement("td");
        var btn = document.createElement("button");
        btn.textContent = "Details";
        td6.appendChild(btn);
        tr.appendChild(td6);
    
        table.appendChild(tr);
      });
      return table;
    }

    function createHeader(h, text) {
      header = document.createElement("header");
      h = document.createElement(h);
      h.textContent = text;
      header.appendChild(h);
      return header;
    }

    function createSection(title) {
      var section = document.createElement("section");
      section.appendChild(createHeader("h3", title));
      return section;
    }
  
    createBook("book");
    
    // You'll need to reference the table and the aside more than once.
    // Just query for them one time and then keep referring to those variables:
    let tbl = document.querySelector("table");
    let side = document.querySelector("aside");

    // Any buttons within the table that get clicked will also cause a click event to 
    // trigger for the table itself. We'll handle the details there.
    tbl.addEventListener("click", function(evt){
      // Set the aside's text content by navigating to the clicked button's closest
      // (<tr>) and then query from there to find the cell with the desired class.
      // Here, we're showing the title in the aside, but you can substitute any of the other 
      // book data by just referring to the class that was assigned to the cell.
      side.textContent = evt.target.closest("tr").querySelector(".title").textContent;
    });
  </script>
</body>