Question

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

我想要的是使用（this）以便单个函数可以用于多个表，我试图使用（this）但它显然无法工作，第一个问题是它无法读取属性＆＃39 ;长度＆＃39;对于桌子，但我相信我会遇到更多的问题。

任何帮助将不胜感激。

期望的结果：使用（this）在多个表上使用一个单独的函数。

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

Answer 1

我怀疑你为什么要使用这个＆＃39;这个＆＃39;关键词。说这个＆＃39;按钮是没有意义的，除非你告诉它什么＆＃39;这个＆＃39;是。否则就无法知道这个＆＃39;这个＆＃39;实际上是一个名为custList的表。不知何故，你需要建立这种连接，我选择在下面的代码片段中将表名作为参数传递给js函数。

您的代码中也存在未声明i变量的问题。

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

Answer 2

不要担心this，只需从有效的函数中定义泛型函数：

function appendRow(id) {
    var custList = document.getElementById(id),
        row = custList.insertRow(custList.rows.length),
        i;
    for (i = 0; i < custList.rows[0].cells.length; i++) {
        createCell(row.insertCell(i), i, 'row');
    }
}

JavaScript使用（this）关键字

2 个答案: