Question

我想点击表格中的颜色代码，然后点击更改按钮。 <p>的颜色会发生变化。这是HTML代码。

 <button id="changijg" data-toggle="modal" href="#" class="btn btn-primary btn-lg">Change</button>
<p>changing color</p>
<table>
    <tr class='clickable-row'><td>334455</td></tr>
    <tr class='clickable-row'><td>FFFFFF</td></tr>
</table>

这是JS代码

jQuery(document).ready(function ($) {
    $(".clickable-row").click(function (event) {
    $(".clickable-row").not(this).removeClass('selected');
    $(this).toggleClass('selected');
    $("#changingButton").prop("disabled", !$(this).hasClass('selected'));
    if ($(this).hasClass('selected')) {
        var str ="color: #";
        //make the p color changing to the selected in the table
        $("p").prop("style", str);
});

我尝试了很多不同的方法，但没有一个方法将td更改为string。那么我该怎么做才能将td中的数据转换为字符串。

Answer 1

使用$(this).find("td").text()查找存储为HTML的颜色值。

$(".clickable-row").click(function(event) {
  $(".clickable-row").not(this).removeClass('selected');
  $(this).toggleClass('selected');
  if ($(this).hasClass('selected')) {
    var color = "#"+$(this).find("td").text();
    $("p").css("color", color);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="changijg" data-toggle="modal" href="#" class="btn btn-primary btn-lg">Change</button>
<p>changing color</p>
<table>
  <tr class='clickable-row'>
    <td>334455</td>
  </tr>
  <tr class='clickable-row'>
    <td>FFFFFF</td>
  </tr>
  <tr class='clickable-row'>
    <td>FF0000</td>
  </tr>
</table>

Answer 2

您可以使用$(this).text()检索内容并将其应用于Jquery css()函数。

jQuery(document).ready(function ($) {
    $(".clickable-row").click(function (event) {
        $(".clickable-row").not(this).removeClass('selected');
        $(this).toggleClass('selected');
    })

    $("#changeButton").click(function (event) {
       var selectedTD = $(".selected").first();
       var colorCode = "#" + selectedTD.text() 
       $("p").css("color", colorCode);
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <button id="changeButton" data-toggle="modal" href="#" class="btn btn-primary btn-lg">Change</button>
<p>changing color</p>
<table>
    <tr class='clickable-row'><td>c90ee8</td></tr>
    <tr class='clickable-row'><td>334455</td></tr>
    <tr class='clickable-row'><td>FFFFFF</td></tr>
    <tr class='clickable-row'><td>2d89ff</td></tr>
</table>

如何在HTML中将HTML中的数据转换为字符串

2 个答案: