クリックしたリンクに応じてテーブルの内容を変更します

Question

2つのHTMLテーブルがあります。最初のテーブルでどのリンクが押されているかによって、2番目のテーブルの内容を変更しようとしています。以下は

は、最初のテーブルを移入するコードです：あなたは、テーブルを動的に移入され見ることができるように

$(document).ready(function() { 
    var tableName = 'databaseTable1'; 
    $.ajax({ 
    url: 'http://localhost/api/Dynamic?table=' + tableName, 
    dataType: 'Json', 
    success: function (tableResults) { 
     $.each(tableResults, function (index, value) { 
     if ($('#table2 th:last-child').length === 0) { 
      $('#table2 thead').append('<th>' + value + '</th>'); 
     } else { 
      $('#table2 th:last-child').after('<th>' + value + '</th>'); 
     } 
     }); 
    } 
    }); 
}); 

：

$.each(tableResults, function() { 
    $('#table1 tbody:last-child').append('<td>' + this + '</td>'); 
}); 

以下は、第二のテーブルを移入するコードです。最初のテーブルの各値を、変数tableNameを選択した値に変更するリンクにする方法を知っておく必要があります。

ページが更新され、選択したテーブルのデータが表示されます。私のプログラムに役立つならば、バックエンドはF#です。

また、tableNamesのデフォルト値をtable1の最初の値に設定する方法は誰にも分かりません。

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

Answer 1

tableNameは、トリガー要素の属性（aなど）に格納できます。次に、ユーザーがこのトリガーをクリックすると、.attr()を使用して属性からtableNameを取得します。

私はあなたの応答を知らないので、私の例ではダミーのものがあります。

（任意の行をクリックして、ログにtableNameを参照してください

var tableResults = [ 
 
    { 
 
    name: 'dynamicTable1' 
 
    }, 
 
    { 
 
    name: 'dynamicTable2' 
 
    } 
 
]; 
 

 
$.each(tableResults, function() { 
 
    $('#table1 tbody:last-child').append('<tr><td><a data-table="' + this.name + '">' + this.name + '</a></td></tr>'); 
 
}); 
 

 
$(document).on('click','[data-table]', function(){ 
 
    var link = $(this), 
 
     tableName = link.attr('data-table'); 
 

 
    console.log(tableName); 
 

 
    // do your ajax call with tableName 
 
    // $.ajax({ .... 
 
});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<table id="table1"> 
 
    <tbody></tbody> 
 
</table> 
 
<hr /> 
 
<table id="table2"> 
 
    <tbody></tbody> 
 
</table>

http://jsbin.com/jicihohama/edit?html,js,console,output

注意：

1. ページでは、あなたは、AJAX、「リフレッシュ」を意味リフレッシュすることにより
   

   データを更新して表示する必要がありますか？そうでなければ、なぜajaxが必要ですか？

2. にtdを入れることはできませんので、行（tr）を追加する必要があります。