我可以在html按鈕上顯示html表嗎？

Question

我想要顯示3個並排包含5個值的按鈕。我想增強按鈕的顯示。

實施例：

1 aombhkjsdhffhf hehehe  4 5 
2 khdjhfhf   dhjfhj  6 7 
3 hhkjhdjkhdjh  jhkjhjkh 8 9 

因此，每個線之上需要是上的按鈕。所以我有3個按鈕，但按鈕上的顯示需要像顯示錶一樣。 你有什麼建議嗎？

Answer 1

這聽起來像你可以輕鬆處理與CSS和JavaScript。換句話說，渲染一個普通的html表格，使用CSS使每一行看起來像一個按鈕，並使用javascript將事件處理程序綁定到每行的單擊。

的Html

<table> 
    <tr class="button"> 
    <td>aombhkjsdhffhf</td> 
    <td>hehehe</td> 
    <td>4</td> 
    <td>5</td> 
    </tr> 
    <tr class="button"> 
    <td>khdjhfhf</td> 
    <td>jhkjhjkh</td> 
    <td>6</td> 
    <td>7</td>  
    </tr> 
    <tr class="button"> 
    <td>hhkjhdjkhdjh</td> 
    <td>dhjfhj</td> 
    <td>8</td> 
    <td>9</td>  
    </tr> 
</table> 

的CSS

tr.button { 
    /* the css to make each row look like a button */ 
} 

的Javascript

// using jQuery 
$('tr.button').click(function() { 
    // do whatever here. 
}); 

Answer 2

你可以把一個表<button>標籤內。

<button> 
    <table> 
    <tr> 
    <td>1</td> 
    <td>aombhkjsdhffhf</td> 
    <td>hehehe</td> 
    <td>4</td> 
    <td>5</td> 
    </tr> 
    </table> 
</button> 
<br> 
<button> 
    <table> 
    <tr> 
    <td>2</td> 
    <td>khdjhfhff</td> 
    <td>dhjfhj</td> 
    <td>6</td> 
    <td>7</td> 
    </tr> 
    </table> 
</button> 
<br> 
<button> 
    <table> 
    <tr> 
    <td>3</td> 
    <td>hhkjhdjkhdjk</td> 
    <td>jhkjhkjh</td> 
    <td>8</td> 
    <td>9</td> 
    </tr> 
    </table> 
</button> 

並定義的CSS，使得TD元件具有一定的寬度：上JSFiddle

td{width:100px;} 

見樣品。