如何调整响应表的JavaScript以在移动设备中选择其他列

Question

这是我的CodePen：

https://codepen.io/matbathome77/pen/KeEzZG

var pos = $(this).index()+2;

它基于其他人的CodePen。 在移动版本中，如何将其默认设置为“ 1年”列，并在该列中显示内容。

现在默认为3年，并且在您选择该项目之前不会显示该内容。

我尝试将第4行的JS编辑为+1而不是+2，希望这会将默认值更改为1年。 没用

Answer 1

在页面加载和单击上激活列。 将onclick内联函数移动到其自己的名称，然后在单击它时对其进行调用（使用li样式更新）。

从：

$( "ul" ).on( "click", "li", function() {
  var pos = $(this).index()+2;
  $("tr").find('td:not(:eq(0))').hide();
  $('td:nth-child('+pos+')').css('display','table-cell');
  $("tr").find('th:not(:eq(0))').hide();
  $('li').removeClass('active');
  $(this).addClass('active');
});

至

function loadColumn(pos) {
  $("tr").find('td:not(:eq(0))').hide();
  $('td:nth-child('+pos+')').css('display','table-cell');
  $("tr").find('th:not(:eq(0))').hide();
}

loadColumn(2);

$( "ul" ).on( "click", "li", function() {
  var pos = $(this).index() + 1;
  loadColumn(pos);
  $('li').removeClass('active');
  $(this).addClass('active');
});

是您要寻找的。

这是codepen： https ://codepen.io/anon/pen/KeEXzR

Answer 2

我想到了。 我必须创建一个li并将其隐藏。 我还必须告诉javascript调用第三列，而不是第二列。 谢谢大家

https://codepen.io/matbathome77/pen/KeEzZG

<li class="hidden">Name (ticker)<br>Bla bla bla category</li>

和CSS

li.hidden {display:none;}

最后，JavaScript

loadColumn(3);