javascript 表格技巧隐藏和显示点击按钮的除法

Question

我几乎完成了我的代码，其中我试图在点击按钮上显示除法，正如您在 fiddle 中看到的那样，我的 javascript 正在运行并且运行良好，但我不知道如何放置点击按钮和位置分区不是固定的，它应该根据按钮位置而改变，现在在我的代码中，隐藏的分区排在最前面，但我希望它直接出现在按钮上，这个隐藏的分区是我通过 php 生成的

链接到 fiddle

我希望你们能理解我的问题，抱歉我的英语不好

HTML

    <div style='display:none' id='id_1'>
        <table border='1'>
            <tr><td>info1</td>
                <td>info1</td>
                <td>info1</td>
            </tr>
     <tr>
                <td>info1</td>
                <td>info1</td>
                <td>info1</td>
            </tr>
        </table>
    </div>

    <div  style='display:none' id='id_2'>
        <table border='1'>
            <tr><td>info2</td>
                <td>info2</td>
                <td>info2</td>
            </tr>
             <tr><td>info2</td>
                <td>info2</td>
                <td>info2</td>
            </tr>
        </table>
    </div>

   <br>
  <table border='1'>
    <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
         <td>5</td>
        <td><button onclick="tab('id_1');">More info</button>
    </tr> 
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td><button onclick="tab('id_2');">More info</button>
    </tr> 
  </table>

JavaScript

     function tab(id) {
        $('div[id^=id_]').hide();
        setTimeout(function() { alert(id);},10);     
        var data = document.getElementById(id);
        data.style.display = 'table';
     };

Answer 1

使用您的代码，您可以将这些 DIV 设置为绝对定位并使用:

DEMO

function tab(btn, id) {
    var offset = $(btn).offset();
    $('div[id^=id_]').hide();
    $('#' + id).css({
        top: offset.top,
        left: offset.left + $(btn).outerWidth(true)
    }).show();
};

HTML:

<button onclick="tab(this, 'id_1');">More info</button>

CSS:

div[id^=id_] {
    position:absolute;
}

更新:

updated DEMO

function tab(btn, id) {
    var $tr = $(btn).closest('tr'),
        offset = $tr.offset();
    $('div[id^=id_]').hide();
    $('#' + id).css({
        top: offset.top,
        left: offset.left + $tr.outerWidth(true)
    }).show();
};