3

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

由于这只是一个测试运行，我开始想知道如何使用这样的 ID，因为最终页面将使用超过 400 个不同的#td[i] 和 #bubble[i]。

问题：

  1. 我应该使用更好的做法吗？

  2. 什么是在鼠标悬停时暂时显示气泡表的可行选项，但在单击时永久（直到另一个 td 悬停/单击）。

脚本：

$(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/

4

4 回答 4

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()

于 2015-05-18T13:16:25.493 回答
1

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

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 中处理服务器渲染。在 PHP 中将数据转换为 JSON 格式相当容易使用json_encode()

于 2015-05-18T16:00:36.067 回答
0

是的。这是包罗万象的 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');
        }
    });
});
于 2015-05-18T13:24:48.787 回答
0

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

因此，即使在尝试构建数据繁重的 DOM 之前，您也应该这样做

  • 将你的 DOM 元素分解成不可分割的元素
  • 将这些不可分割的元素组合成更复杂的对象
  • 在这些复杂对象之间建立层次结构

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

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

  • 为元素添加class='bubble'属性。<table>因为，所有人似乎都有一致的理由存在
  • 在它们内部，它们具有<button>元素，可以给出一个class='bubble-button'以显示应用中的相似性。
  • 因此，虽然button是不可分割的元素，但将其与 结合<td>以获得复杂的表格数据元素。
  • 收集此类表格数据可以制作您的bubble表格。

我希望你看到层次结构的建立。在设计这一切时，您应该意识到 JS 解析并不是 Web 应用程序的瓶颈。就是修改 DOM 需要花费很多时间。因此，您可以拥有很多 ID，但正确的寻址可以帮助您更有效地遍历 DOM 树。从长远来看，DOM 树中糟糕的层次结构会让您付出代价。

现在您可以将clickandhover处理程序添加为：

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

让我知道更多说明。

于 2015-05-18T13:32:57.310 回答