javascript - 如何正确地将选择标签放入表格单元格

Question

我拼命地尝试让一个选择标签适合表格单元格，就像它属于那里一样，而不是像有人用 pry 棍把它塞进去一样。这是代码，后面是它如何显示的图片:

<tr>
  <td class="lblCell_L" >ISIN Code </td>
  <td id="ISINcb" class="lblCell_R" align="center">
   <select id='isinz' width="144" style="height:19px; width:140px; text-align:center;">
       <option id="ISIN1" onclick="JavaScript:quarterUpdate()" >A</option>
       <option id="ISIN2" onclick="JavaScript:quarterUpdate()" >B</option>
       <option id="ISIN3" onclick="JavaScript:quarterUpdate()" >C</option>
       <option id="ISIN4" onclick="JavaScript:quarterUpdate()" >E</option>
   </select>
  </td>
  <td class="lblCell_tx" id="isinOptions" style="color:#a56;">0</td>
</tr>

这在 FireFox 中出现的方式:

所以，这真的很难看，因为 Select 对象在单元格内有自己的可见边框，单元格有自己的边框。就像把 pig 肉塞进鹅里一样......看起来很惨淡!

是否可以抑制表格单元格边框以允许选择标签边框取代它们？

您可能还会注意到，该单元格的高度高于其他“纯文本”单元格。

Answer 1

播放选择的边框(这在 Safari 中可能有效，也可能无效)

select {
    border: 0;
    width: 100%;
}

这是一个 JsFiddle:http://jsfiddle.net/EuNw4/

也可以使用 select onchange"JavaScript:quarterUpdate()" 而不是很多 option onclick="JavaScript:quarterUpdate()"... Inline不应使用这样的 Javascript，您应该这样做:

// jQuery
jQuery(document).ready(function($) {
    $('#isinz').on('change', quarterUpdate());
});