在动态创建的表上使用 CSS & JQuery 的最佳实践

Question

我有一个页面从 MySQL 数据库获取信息并使用 PHP 生成 HTML。

由于这只是一个测试运行，我开始怀疑是否可以像这样使用 ID，因为最终页面将使用超过 400 个不同的 #td[i] 和 #bubble[是。

问题：

我应该使用更好的做法吗？
什么是在鼠标悬停时临时显示气泡表，但在单击时永久显示（直到另一个 td 为 hovered/clicked）的可行选项。

脚本：

$(document).ready(function(){
    $("#maintable").show();

    $( "#td1" ).click(function() {
        $("#bubble1").toggle();
        $("#bubble1").css("background-color", "yellow");
    }); 
    $( "#td2" ).click(function() {
        $("#bubble2").toggle();
        $("#bubble2").css("background-color", "yellow");
    }); 
    $( "#td3" ).click(function() {
        $("#bubble3").toggle();
        $("#bubble3").css("background-color", "yellow");
    }); 
    $( "#td4" ).click(function() {
        $("#bubble4").toggle();
        $("#bubble4").css("background-color", "yellow");
    }); 
    $( "#td5" ).click(function() {
        $("#bubble5").toggle();
        $("#bubble5").css("background-color", "yellow");
    }); 
    $( "#td6" ).click(function() {
        $("#bubble6").toggle();
        $("#bubble6").css("background-color", "yellow");
    });     
    });

</head>
<body>
  <h1>Dynamic tables</h1>
  <br>
  <table id="maintable" border="1">
    <tr>
      <td id="td1">TD1</td>
      <td id="td2">TD2</td>
      <td id="td3">TD3</td>
      <tr>

      <td id="td4">TD4</td>
      <td id="td5">TD5</td>
      <td id="td6">TD6</td>
    </tr>
  </table>
  <br><br>

  <table id="bubble1" border="1">
    <td>
    Selected tablepart:<br>
    <b>TD1</b><br>
    Location:<br>
    <b>R1F:D3-4:E1</b><br>
    Connection:<br>
    none <button id="create1">Create</button>
    </td>
  </table>

  <table id="bubble2" border="1">
    <td>
    Selected tablepart:<br>
    <b>TD2</b><br>
    Location:<br>
    <b>R1F:D3-4:E2</b><br>
    Connection:<br>
    none <button id="create2">Create</button>
    </td>
  </table>

  <table id="bubble3" border="1">
    <td>
    Selected tablepart:<br>
    <b>TB3</b><br>
    Location:<br>
    <b>R1F:D3-4:E3</b><br>
    Connection:<br>
    none <button id="create3">Create</button>
    </td>
  </table>

  <table id="bubble4" border="1">
    <td>
    Selected tablepart:<br>
    <b>TB4</b><br>
    Location:<br>
    <b>R1F:D3-4:E4</b><br>
    Connection:<br>
    none <button id="create4">Create</button>
    </td>
  </table>

  <table id="bubble5" border="1">
    <td>
    Selected tablepart:<br>
    <b>TB5</b><br>
    Location:<br>
    <b>R1F:D3-4:E5</b><br>
    Connection:<br>
    none <button id="create5">Create</button>
    </td>
  </table>

  <table id="bubble6" border="1">
    <td>
    Selected tablepart:<br>
    <b>TB6</b><br>
    Location:<br>
    <b>R1F:D3-4:E6</b><br>
    Connection:<br>
    none <button id="create6">Create</button>
    </td>
  </table>

还有我的CSS：

table {
    margin-left:auto; 
    margin-right:auto;
    display: none;
    border: 1px solid black;
    border-collapse: collapse;
}

编辑：迄今为止最好的解决方案：（结合几个答案） https://jsfiddle.net/Zimpari/3wm01nmL/

Answer 1

对于这种情况，最好使用事件委托。这可以通过使用 .on() 的委托样式语法来实现。例如：

$('#maintable').on('click', 'td', function (evt) {
    var index = this.id.substring(2);
    $('#bubble' + index).toggle();
    $('#bubble' + index).css('background-color', 'yellow');
});

此代码段有效地替换了上面 $(document).ready 块中使用的所有事件处理程序。通过将单个事件附加到父元素，您允许事件冒泡到 DOM 树并通过单个处理程序执行。

这也适用于动态生成的内容。添加新内容时，不需要新的事件处理程序。

参考： .on()

Answer 2

是的。这里包罗万象jQuery。应该可以。

@War10ck 说的对，子串更好

$('td').each(function(){ //you might want to add a class selector, but whatever
    var mybubble=$('#bubble'+this.id.substring(2));
    $(this).click(function(){
        mybubble.toggle().css('background-color','yellow');
    });
    $(this).mouseover(function(){
        if(mybubble.css('display')=='none'){
            mybubble.toggle().css("background-color", "yellow")
            .attr('data-mouseover','true');
        }
    });
    $(this).mouseout(function(){
        if(mybubble.attr('data-mouseover')=='true'){
            mybubble.toggle().css("background-color", "yellow")
            .attr('data-mouseover','false');
        }
    });
});

Answer 3

使用 400 个不同的 ID 几乎没问题，但是如果这些 DOM 元素具有某些一致的特征，那么您应该向这些元素添加 class 属性。因此，当尝试通过 jQuery 中的选择器调用访问它时，它更容易访问。

因此，即使在尝试构建大量数据之前 DOM，这也是您应该做的事情

将 DOM 元素分解为 不可分割的元素
将这些不可分割的元素组合成为更复杂的对象
在这些复杂对象中构建层次结构

这三个步骤应该对您在每个应用程序中都有很大帮助。

考虑到您在上面尝试构建的当前 DOM，以下是我的建议：

向 <table> 元素添加 class='bubble' 属性。因为，所有似乎都有一致的存在理由
它们里面有<button>个元素，可以给它一个class='bubble-button'来表示应用上的相似性。
因此，虽然 button 是不可分割的元素，但将其与 <td> 组合以获得复杂的 table 数据元素。
收集此类 table 数据可以使您的 bubble table.

我希望你能看到层次结构的建立。在设计所有这些时，您应该意识到 JS 解析不是 Web 应用程序的瓶颈。就是修改DOM 比较耗时。因此，您可以拥有很多 ID，但适当的寻址可以帮助您更有效地遍历 DOM 树。 DOM 树中的错误层次结构将使您付出长期运行.

的代价

现在您可以将 click 和 hover 处理程序添加为：

$('.bubble').on('yourevent', function(e){
    /* handle the click, or onmouseover, or onmouseout events appropriately
     by adding or removing CSS classes */
});

让我知道更多说明。

Answer 4

正如我所说，我已经制作了一个版本，其中气泡 table 所需的数据隐式存储在每条记录中。

https://jsfiddle.net/tLqbks0c/

    <table id="maintable" border="1">
    <tr>
      <td id="td1" data-bubble='{"part":"TD1","location":"R1F:D3-4:E1"}'>TD1</td>
      <td id="td2" data-bubble='{"part":"TD2","location":"R2F:D3-4:E1"}'>TD2</td>
      <td id="td3" data-bubble='{"part":"TD3","location":"R3F:D3-4:E1"}'>TD3</td>

    </tr>
  </table>

<table id="bubbleTable" border="1" style="display:none;">
    <td>
    Selected tablepart:<br>
    <b class="part"></b><br>
    Location:<br>
    <b class="location"></b><br>
    Connection:<br>
    none <button id="create3">Create</button>
    </td>
  </table>

 $( "#maintable td" ).click(function() {
        $("#bubbleTable").show();
        var bubData=jQuery.parseJSON($(this).attr("data-bubble"));
        console.log(bubData);
        $("#bubbleTable b.part").text(bubData.part);
        $("#bubbleTable b.location").text(bubData.location);
    });

我必须警告你这是一个相当粗略的草稿。您必须在 PHP 和 MySql 中处理服务器渲染。使用 json_encode()

将数据转换为 PHP 中的 JSON 格式相当容易

在动态创建的表上使用 CSS & JQuery 的最佳实践

Best practice using CSS & JQuery on dynamically created tables

javascript

jquery

html

css

dynamic-tables