Блог

У меня есть 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 .

Любая помощь будет оценена.

Вы можете сохранить tableName s в атрибуте элемента триггера (например, a ). Затем, когда пользователь нажимает на этот триггер, получите tableName из атрибута using .attr() .

Я не знаю вашего ответа, поэтому в моем примере есть фиктивный.

(Нажмите на любую строку и посмотрите 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, консоль, вывод

Примечания:

1. Затем страница должна обновиться и отобразить данные

   Под обновлением вы подразумеваете ajax «обновление»? Иначе зачем вам нужен ajax?

2. Вы не можете вставить td , tbody поэтому вам также нужно добавить строку ( tr ).