Question

我想使用表格中的按钮来获取下一个的文本，并在同一个td-Element 中使用“tID”类。目前，我没有文字。谢谢你的提示！

@RequestMapping(value = "/saveDetails", method = RequestMethod.POST) public String saveDetails(@Valid @ModelAttribute("selectedProduct") final Product selectedProduct, final BindingResult bindingResult, SessionStatus status) { if (bindingResult.hasErrors()) { return "templates/details"; } status.setComplete(); return "/templates/overview"; }

$('.editTerm').on('click', function() { var currentID = $('tID span:first').text(); alert('currentID: ', currentID); });

Answer 1

你的选择器错了。除.之后tID strong以外的$('.editTerm').on('click', function() { var currentID = $(this) .parent() //get the parent td .find('span.tID strong') //get strong element that is child of span with tID class .text(); //get text console.log('currentID: ', currentID); //prints out: currentID: NVMDIS22475 });：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <button class="editTerm btn btn-default btn-xs" type="submit">
          <i class="fa fa-pencil"></i>
        </button> <span class="targetTerm">
  <span class="fM">Musculoskeletal syndrome</span></span>
        <span class="tID">Target ID: <strong>NVMDIS22475</strong></span> 
        <span class="prefTargetTerm">Preferred Term: <strong>syndrome</strong></span> 
        <span class="otherTargetInfo">Informations: <strong>Lorem Ipsum</strong></span>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

this

＆＃13;

评论后编辑：您可以使用f.object.age = ""（请参阅DOM元素）。

Answer 2

您需要使用this关键字来引用点击的按钮。在那里，您可以使用siblings()获取相关的.tID元素，使用find()获取strong标记中的值。试试这个：

＆＃13;

$('.editTerm').on('click', function() {
  var currentID = $(this).siblings('.tID').find('strong:first').text();
  alert('currentID: ' + currentID);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <button class="editTerm btn btn-default btn-xs" type="submit">
          <i class="fa fa-pencil"></i>
        </button> 
        <span class="targetTerm">
          <span class="fM">Musculoskeletal syndrome</span>
        </span>
        <span class="tID">Target ID: <strong>NVMDIS22475</strong></span> 
        <span class="prefTargetTerm">Preferred Term: <strong>syndrome</strong></span> 
        <span class="otherTargetInfo">Informations: <strong>Lorem Ipsum</strong></span>
      </td>
    </tr>
    <tr>
      <td>
        <button class="editTerm btn btn-default btn-xs" type="submit">
          <i class="fa fa-pencil"></i>
        </button> 
        <span class="targetTerm">
          <span class="fM">Foo bar syndrome</span>
        </span>
        <span class="tID">Target ID: <strong>F00B4r 1234</strong></span> 
        <span class="prefTargetTerm">Preferred Term: <strong>syndrome</strong></span> 
        <span class="otherTargetInfo">Informations: <strong>Dolor sit</strong></span>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

请注意，此模式的优势在于，当表格中有多行时，正如代码段演示的那样。

Answer 3

$('.editTerm').on('click', function() {
  var currentID = $('span.tID:first').text();//use . for Class
  alert('currentID: ', currentID);
});

单击按钮后获取下一个跨度的文本

3 个答案: