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

我有一个div显示单选按钮，允许显示表格，还有一个ok和cancel按钮。当用户单击ok时，我想调用一个函数，其操作取决于表中选定的单元格。我怎样才能做到这一点

代码如下：

    <!-- 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> 

基础集选项

极小的

STO-2G
STO-3G
STO-3G*
STO-6G
相关常数

apr cc pV（Q+d）Z
aug-cc-pCV5Z
8月cc pCVDZ
八月cc pCVQZ
8月cc pCV（T+d）Z

---

非常感谢

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

但让我来回答你们的问题

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

#我的桌子{
宽度：100px；
光标：指针；/*（任何）可单击，最好更改光标*/
}
#我的桌子是红色的{
背景色：红色；
}
#我的桌子是绿色的{
背景颜色：绿色；
}
#我的桌子是蓝色的{
背景颜色：蓝色；
颜色：白色；
}
123
456
789
$（文档）.ready（函数（）{
//制作一个onClick事件
$（“#我的表格td”）。单击（函数（e）{
//在onClick中，被单击的被设置为变量this（或者$（this）（如果需要jQuery函数）
var单击了单元格=$（此）；
//现在，让我们阅读一些属性：innerHTML、类和索引；并在中显示它
var index=$（this）.index（'#my_table td'）//查找它是哪一个cel。基于零！
var html=单击了_cell.html（）上的_；
var className=单击了_cell.attr（'class'）上的_；
var id=单击了\u cell.attr（'id'）；
$（'#display'）.html(
“innerHTML:”+html
+“
类：”+className
+“
id:”+id
+“
索引：”+索引
);
})
});

为什么不使用实际的单选按钮？对于您的任何代码，我们都不知道您正在执行什么操作来选择某个项目。我可以使用表中的单选按钮吗？当然，您可以将单选按钮放置在表的单元格中。没问题谢谢你的回答，我试试这个。

<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>