Question

我想通过单击按钮更改桌面上的某个文本。在表格中有一个带有文本a / d的标题。点击一个按钮我想让用户点击它来改变文字a / d以表示b / c。

$(document).ready(function(){
$("#testTable").prepend("<div><button class='clickButton'>Click Me</button></div>"); 
$('.clickButton').on("click", function(e){
e.stopPropagation();
$("#testTable").find('table').find('tbody').find('tr:eq(0)').find('th').html().replace("a/d","b/c");
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable">
<tbody>
<tr>
<th colspan="3">This is a test
<br>This is a test
<br>(This is a test, a/d)
</th>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr></tbody></table>

Answer 1

＆＃13;

$(document).ready(function() {
  $("#testTable").prepend("<div><button class='clickButton'>Click Me</button></div>");
  $('.clickButton').on("click", function(e) {
    e.stopPropagation();
    // find the element you want
    var title = $('#testTable th')
    // get and modify the text
    var new_title = title.html().replace("a/d", "b/c")
    // replace old title with new text
    title.html(new_title)
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable">
  <tbody>
    <tr>
      <th colspan="3">This is a test
        <br>This is a test
        <br>(This is a test, a/d)
      </th>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

＆＃13;

不确定为什么要使用这种不稳定的选择器。也许这只是代码的淡化版本。实际上，您只需要使用内容th（使用testTable）获取表格内唯一的$('#testTable th')内容。此外，您必须抓取文本，修改它，然后将其放回到您想要的位置。

Answer 2

修改click功能的内容，如下所示

    e.stopPropagation();
    // Find the element. Remember: This will return all the 'th' elements in '#testTable'
    var title = $("#testTable").find('th');

    // Replace string
    title.html(title.html().replace("a/d", "b/c"));

应该这样做。

在表格上更改标题

2 个答案: