文章/答案/技术大牛

发布

社区首页 >问答首页 >在动态创建的表上使用CSS和JQuery的最佳实践

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

Stack Overflow用户

提问于 2015-05-18 13:11:05

回答 4查看 1K关注 0票数 3

我有一个页面，它从MySQL数据库获取信息，并使用。

因为这只是一个测试运行，所以我开始怀疑像这样使用ID，因为最后一个页面将使用超过400个不同的#tdi和#冒泡。

问题：

有什么更好的练习吗？
什么是一个可行的选项显示泡泡表暂时在鼠标悬停，但永久(直到另一个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/

html

css

dynamic-tables

javascript

jquery

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-05-18 16:00:36

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

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格式相当容易

票数 1

Stack Overflow用户

发布于 2015-05-18 13:16:25

对于这种情况，最好使用事件委托。这可以通过使用.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()

票数 1

Stack Overflow用户

发布于 2015-05-18 13:24:48

是啊。这里是包罗万象的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');
        }
    });
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30304158

复制

相似问题

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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