JavaScript 使用 (this) 关键字

Question

我正在创建一个具有多个表的应用程序，一个表包含客户及其位置，另一个表包含客户及其库存商品和商品 ID。我在创建可用于多个表的函数时遇到问题，该函数允许用户为表创建新行，并且我有工作代码，但使用该代码我必须为每个唯一的表复制它。

我想要的是使用(this)以便一个函数适用于多个表，我尝试使用(this)但它显然无法工作，第一个问题是它无法读取属性“length”对于 table ，但我确信我会遇到更多问题。

如有任何帮助，我们将不胜感激。

期望的结果:使用(this)在多个表上使用一个函数。

function appendRow() {
        var table = document.getElementsByTagName('table'); // table reference
        length = this.length, 
        row = this.insertRow(this.rows.length),      // append table row
        i;
    // insert table cells to the new row
    for (i = 0; i < this.rows[0].cells.length; i++) {
        createCell(row.insertCell(i), i, 'row');
    }
}


// this works, but if I want it for multiple tables, I must copy it for each table....
/*
function appendRow() {
    var custList = document.getElementById('custList'), // table reference
        row = custList.insertRow(custList.rows.length),      // append table row
        i;
    // insert table cells to the new row
    for (i = 0; i < custList.rows[0].cells.length; i++) {
        createCell(row.insertCell(i), i, 'row');
    }
}
*/ 


function createCell(cell, text, style) {
    var div = document.createElement('div'), // create DIV element
        txt = document.createTextNode('_'); // create text node
    div.appendChild(txt);               // append text node to the DIV
    div.setAttribute('id', style);        // set DIV class attribute
    div.setAttribute('idName', style);    // set DIV class attribute for IE (?!)
    cell.appendChild(div);                   // append DIV to the table cell
}

<div id="custDiv">
  <div class="addBtns">
    <input id="searchName" onkeyup="custSearchName()" type="text" placeholder="search name"></input>
  </div>
  <div style="width: 355px; margin: 0 auto; height: 50px;">
    <button id="addCust" onclick="appendRow(this)">add customer</button>
  </div>

  <div class="custScroll">
    <table id="custListTop" contenteditable="false">
      <tr>
        <td style="border-top-left-radius: 5px;">Customers</td>
        <td style="border-top-right-radius: 5px;">Main Location</td>
      </tr>
    </table>
    <table id="custList" contenteditable="true">
      <tr>
        <td>Someone</td>
        <td>something</td>
      </tr>
    </table>
  </div>
</div>

Answer 1

我问你为什么要使用“this”关键字。在按钮中说“这个”是没有意义的，除非你以某种方式告诉它“这个”是什么。否则它无法知道“this”实际上是一个名为 custList 的表。您需要以某种方式建立该连接，并且我选择在下面的代码片段中将表名称作为 js 函数中的参数传递。

您的代码中还存在一个问题，即未声明 i 变量。

function appendRow(id) {
        var table = document.getElementById(id); // table reference
        length = table.length, 
        row = table.insertRow(table.rows.length);      // append table row
        var i;
    // insert table cells to the new row
    for (i = 0; i < table.rows[0].cells.length; i++) {
        createCell(row.insertCell(i), i, 'row');
    }
}

function createCell(cell, text, style) {
    var div = document.createElement('div'), // create DIV element
        txt = document.createTextNode('_'); // create text node
    div.appendChild(txt);               // append text node to the DIV
    div.setAttribute('id', style);        // set DIV class attribute
    div.setAttribute('idName', style);    // set DIV class attribute for IE (?!)
    cell.appendChild(div);                   // append DIV to the table cell
}

<div id="custDiv">
  <div class="addBtns">
    <input id="searchName" onkeyup="custSearchName()" type="text" placeholder="search name"></input>
  </div>
  <div style="width: 355px; margin: 0 auto; height: 50px;">
    <button id="addCust" onclick="appendRow('custList')">add customer</button>
  </div>

  <div class="custScroll">
    <table id="custListTop" contenteditable="false">
      <tr>
        <td style="border-top-left-radius: 5px;">Customers</td>
        <td style="border-top-right-radius: 5px;">Main Location</td>
      </tr>
    </table>
    <table id="custList" contenteditable="true">
      <tr>
        <td>Someone</td>
        <td>something</td>
      </tr>
    </table>
  </div>
</div>