【问题标题】:extract html table information based on radio button checked根据选中的单选按钮提取html表格信息
【发布时间】:2010-12-21 03:38:57
【问题描述】:

使用下面的示例,我可以使用哪些选择器组合来获取包含“价格”的文本? (假设用户点击了单选按钮和提交按钮)

<table border="1" id="modal_table">
<tbody>
<tr>

<td> <input type="radio" name='sub' value="509"/> </td>
<td> 509 </td>
<td class='price'> Price is $99 </td>

</tr>
<tr>

<td> <input type="radio" value="510"/> </td>
<td> 510 </td>
<td id="price"> Price is $88 </td>

</tr>
</table>

<input type='button' id='idButton2' value="Submit">
  • 获取选中的单选按钮后面的 td 单元格的内容,或
  • 获取选中的单选按钮后面由 id=price 标识的 td 单元格的内容

【问题讨论】:

    标签: javascript jquery button radio-button selected


    【解决方案1】:
    $('tr input[name=sub]:checked').parent().find('#price').html()
    

    【讨论】:

      【解决方案2】:

      很好的答案!我必须将 parent() 更改为 parents() 才能使其正常工作。代码如下:

      <script type="text/javascript">
          $(document).ready(function(){
              $("#myButton").click(function () {
                  val1 = $("td input[name='sub']:checked").parents().find('.desc').html();
                  val2 = $("td input[name='sub']:checked").parents().find('.price').html();
                  if (val1 == null){
                      alert("Please select one value above");
                  } else {
                      alert(val1 + " sells for " + val2);
                  };
              });
          });
      </script>
      <table border=1>
          <tr>
              <td>Select</td><td>Product</td>
              <td>Description</td><td>Price</td>
          </tr>
          <tr>
              <td><input type='radio' name='sub' value='ABCDE'></td>
              <td>ABCDE</td>
              <td class='desc'>Product ABCDE</td>
              <td class='price'>55.95</td>
          </tr><tr>
              <td><input type='radio' name='sub' value='GHIFK' ></td>
              <td>GHIFK</td>
              <td class='desc'>Product GHIFK</td>
              <td class='price'>34.99</td>
          </tr>
      </table>
      
      <input type='button' id='myButton' value="Click Me">
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2018-01-01
        • 2013-09-21
        • 1970-01-01
        • 2018-03-14
        • 2012-02-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多