根据点击的链接更改表格内容

时间:2016-10-06 08:57:14

标签: javascript jquery html mysql ajax

我有2个HTML表格。我正在尝试根据第一个表中按下的链接更改第二个表的内容。

以下是填充第一个表格的代码:

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

以下是填充第二个表格的代码:

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

如您所见,表格是动态填充的。我需要知道如何将第一个表中的每个值转换为将变量tableName更改为所选值的链接。

然后,页面应刷新并显示所选表格中的数据。如果它有助于我的程序有F#后端。

另外在旁注中,是否有人知道如何将tableNames默认值设置为table1中的第一个值。

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:1)

您可以将tableName存储在触发元素的属性中(例如a)。然后,当用户点击此触发器时,使用.attr()从属性中获取tableName

我不知道你的反应,所以在我的例子中有一个假的。

(点击任意一行,查看日志中的tableName

&#13;
&#13;
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({ ....
});
&#13;
<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>
&#13;
&#13;
&#13;

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

备注:

  1.   

    然后页面应刷新并显示数据

    刷新你的意思是ajax&#34;刷新&#34;?否则你为什么需要一个ajax?

  2. 您无法将td放入tbody,因此您还需要添加一行(tr)。