キーワードを使用してJavaScriptを設定する

Question

複数のテーブルを持つアプリケーションを作成しています.1つは顧客とその場所を持ち、もう1つは在庫アイテムとアイテムIDを持つ顧客です。私は、複数のテーブルで使用できる関数を作成するのに問題があります。関数はユーザーがテーブルの新しい行を作成できるようにしていますが、作業コードを持っていますが、そのコードで各固有テーブルごとにコピーする必要があります。

複数のテーブルに対して1つの関数が動作するようにするには、これを使用しようとしていますが、明らかに機能しませんでした。最初の問題は、プロパティの長さ'テーブルのために、私はより多くの問題に遭遇すると確信しています。

ご協力いただければ幸いです。

希望の結果：複数のテーブルで1つの機能を使用する場合にこれを使用します。

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>

Answer 2

だけで動作するものから、一般的な関数を定義し、およそthisを心配しないでください：一般的な `関数appendRow（ID）{VARを定義していないのはなぜ

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'); 
    } 
}