Question

我有这个继承的HTML代码。我不确定在表元素中是否有一个按钮元素是最佳实践，但这就是我给出的。

我需要能够从ready: function() { const key = this.getAttribute('key') if (!key) { throw new Error('cm-app-global element requires key') } const val = vars.get(key) if (!!val) { this.set('data', val) } },（子）元素到达<table>（父）元素。我尝试使用.parent（）或.closest（），但它不适用于我提供的HTML。

任何让JS工作的建议？这是JSfiddle

https://jsfiddle.net/nvjamtLo/2/

<button>

Answer 1

请注意：虽然你把按钮放在里面＆＃34;表格 - 无效。

如果您检查元素（在chrome上：右键单击按钮 - >从菜单中选择inspect元素），您将清楚地看到该按钮位于外面表元素

这也是更改父选择器的原因：

"uploads/user/#{mounted_as}/#{model.id}"
"uploads/customer/#{mounted_as}/#{model.id}"

为：

$("button#dfg").parent('table#fsg').css("background-color", "red")

将用红色背景绘制整个身体

Conslusion：当你使用表格时 - 请将按钮作为有效的表格元素放置（在td元素内）

Answer 2

表定义后不能立即包含一个按钮。有关详细信息，请参阅HTML element。

相反，您可以在单元格中插入按钮。在这种情况下，您可以使用.closest()。但是，因为你的表有id，你可以简单地引用它。

摘录：

$("#fsg").css("background-color", "red")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="fsg">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<button id="dfg">text</button>

Answer 3

如果您尝试更改表格的背景颜色，则不需要父属性，您可以通过其ID访问该元素

$(function(){
    $("#dfg").click(function(){
      $("#fsg").css("background-color","red");
   });
})

https://jsfiddle.net/p4v69cda/

Answer 4

你的小提琴中的例子会发生一些事情。

首先关闭按钮THERE将在许多浏览器中渲染表格 - 这是无效的HTML。
你的代码只是奇怪 - $.when？这是为了什么？
第三，您的代码永远不会执行该功能 - 就像您通常单击该按钮一样。
你通常更好地直接添加一个类而不是CSS，修改CSS可能并不总能达到你想要的效果。
通过ID选择包含按钮的表格比标签更好，而#mytableid的ID优于table#mytableid - 特别是考虑到嘶嘶声引擎的左右选择器性质 - （通过id（快速）查找元素然后找到一个具有该id的表（不是那么快） - 因为ID在文档中是唯一的，只需使用它。
从UP按钮遍历到父元素使用.parents()和选择器.parents("#mytableid")或者如果您不知道id .parents('table')
- 注意我在这里使用.parents()而不是单数.parent()，因为它会得到父元素，但该表不是button的父，它是按钮的祖先< / LI>

所以，这里是html的部分更新以及用它做代码的代码。

function f1(event) {
    $(this).parents('#fsg').addClass('myred');
    console.log('gff');
}
$('#dfg').on('click',f1);

移动按钮的HTML：

<table id="fsg">
  <tr>
    <th>Company
      <button id="dfg">
        text
      </button>
    </th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

更新了小提琴：https://jsfiddle.net/MarkSchultheiss/vyukyqsu/1/

获取孩子的父DOM元素

4 个答案: