Question

我有一个div显示单选按钮，允许显示表格和一个确定和取消按钮。当用户单击“确定”时，我想调用一个函数，该函数的动作取决于表的选定单元格。我怎样才能做到这一点？

这里是代码：

    <!-- Options Dialogue box for Basis -->
    <div id="interfacebox basis_DB" class="dialogWindow fileDialog" style="display: none;">
 <p>Basis Set Options</p>
      <div id="minimal_basis" class="RadioButtonidle menu2" style="Top: 48px; left: 5px;" onclick="changeClass2(this)">
      </div>
    <div id="RadioOption" style="Top: 40px; left: 25px;">
      <p>Minimal</p>
    </div>
       <table id="minimal_basis_DB" class="dialog" align="center" cellpadding="4" cellspacing="12" style="display:                         none;">
                <tr>
                    <td cellid="STO-2G" class="tableButtonidle menu3" onclick="changeClass3(this)">
                    STO-2G
                    </td>
                    <td cellid="STO-3G" class="tableButtonidle menu3" onclick="changeClass3(this)">
                    STO-3G
                    </td>
                     <td cellid="STO-3G*" class="tableButtonidle menu3" onclick="changeClass3(this)">
                    STO-3G*
                    </td>
                    <td cellid="STO-6G" class="tableButtonidle menu3" onclick="changeClass3(this)">
                    STO-6G
                    </td>
                </tr>
       </table>
        <div id="correlation_consistant" class="RadioButtonidle menu2" title="correlation_consistant" style="Top: 48px; left: 190px;" onclick="changeClass2(this)">
        </div>
        <div id="RadioOption" style="Top: 40px; left: 215px;">
          <p>Correlation-Consistant</p>
        </div>
                       <table id="correlation_consistant_DB" class="dialog" align="center" cellpadding="4" cellspacing="12" style="display:                         none;">
                    <tr>
                        <td cellid="apr-cc-pV(Q+d)Z" class="tableButtonidle menu3" onclick="changeClass3(this)">
                        apr-cc-pV(Q+d)Z
                        </td>
                        <td cellid="aug-cc-pCV5Z" class="tableButtonidle menu3" onclick="changeClass3(this)">
                        aug-cc-pCV5Z
                        </td>
                         <td cellid="aug-cc-pCVDZ" class="tableButtonidle menu3" onclick="changeClass3(this)">
                        aug-cc-pCVDZ
                        </td>
                        <td cellid="aug-cc-pCVQZ" class="tableButtonidle menu3" onclick="changeClass3(this)">
                        aug-cc-pCVQZ
                        </td>
                        <td cellid="aug-cc-pCV(T+d)Z" class="tableButtonidle menu3" onclick="changeClass3(this)">
                        aug-cc-pCV(T+d)Z
                        </td>
                    </tr>
           </table>
     <input id="basis_cancel" class="standardButtonidle" type="button" value="Cancel" style="bottom: 10px; right: 70px; float: right;" onclick="changeClass4('STO-2G');changeClass5('correlation_consistant');"/>
     <input id="basis_ok" class="standardButtonidle" type="button" value="Done" style="bottom: 10px; right: 10px; float: right;"/>
     </div>

非常感谢

Answer 1

您可以在表格中使用真正的单选按钮。

但是让我回答你的问题。

您正在寻找的主要内容是此（请参阅代码）

<style>
#my_table td {
  width: 100px;
  cursor: pointer;  /* (anything) clickable, better change the cursor */
}
#my_table td.red {
  background-color: red;
}
#my_table td.green {
  background-color: green;
}
#my_table td.blue {
  background-color: blue;
  color: white;
}
</style>
<table id="my_table">
  <tr>
    <td id="red1" class="red">1</td><td id="green1" class="green">2</td><td id="blue1" class="blue">3</td>
  </tr>
  <tr>
    <td id="red2" class="red">4</td><td id="green2" class="green">5</td><td id="blue2" class="blue">6</td>
  </tr>
  <tr>
    <td id="red3" class="red">7</td><td id="green3" class="green">8</td><td id="blue3" class="blue">9</td>
  </tr>
</table>
<div id="display"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // make an onClick event
    $('#my_table td').click(function(e) {
      // inside the onClick.  the <td> that was clicked upon is set to the variable this ( or $(this) if you need jQuery functions)
      var clicked_on_cell = $(this);
      // now lets read some properties: the innerHTML, the class and the index; and we display it in <div id="display"></div>
      var index = $(this).index('#my_table td')  // finds which of the cels it is.  zero based !
      var html = clicked_on_cell.html();
      var className = clicked_on_cell.attr('class');
      var id = clicked_on_cell.attr('id');

      $('#display').html(
        'innerHTML: '   + html
        + '<br>Class: ' + className
        + '<br>id: '    + id
        + '<br>index: ' + index
      );
    })
  });
</script>

在单击确定时知道选择了哪个表格单元格。

1 个答案: