javascript表技巧隐藏并显示单击右键单击按钮

Question

我几乎完成了我的代码，其中我试图将分区显示在点击按钮上，因为你可以在小提琴中看到我的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();
};