Question

我在函数上创建一个div

function formatdata() {
  var div = document.createElement("div");
  div.className = 'inTable';
  div.innerHTML = "<label>Cannot Select</label><input type='text' value='' style='z-index:1300;!important'>";
  return div;
}

$('#data-table tbody').on('click', 'td.details-control', function() {
  var tr = $(this).closest('tr');
  var row = tabel.row(tr);
  if (row.child.isShown()) {
    row.child.hide();
    tr.removeClass('shown');
  } else {
    var data = tabel.row(this).data();
    row.child(formatdata(row.data())).show();
    tr.addClass('shown');
  }
});

我无法选择标签，不能用光标关注输入字段，但是使用tab键可以对焦，我认为，它关于这个div的z-index低于父元素，我只是创建脚本来获取z-索引

$(document.body).click(function() {
  var zind = $(this).css('z-index');
  alert(zin);
});

当我点击div时，div的父级称为“auto”，在chrome中检查开发者工具 - ＆gt;元素，但我不知道问题在哪里。

任何人都可以指导我知道问题出在哪里？

Answer 1

您需要将创建的div附加到正文

function formatdata() {
  var div = document.createElement("div");
  div.className = 'inTable';
  div.innerHTML = "<label>Cannot Select</label><input type='text' value='' style='z-index:1300;!important'>";
  return div;
}


document.body.appendChild(formatdata());

无法选择文字，无法点击<input />

1 个答案: