スパン内の文字列を動的に追加する方法​​

Question

スパンタグに*記号を赤色で追加しようとしています。スクリプトセクションで

 <tr> 
      <td class="tftable">First Name </td> <span> </span> 
      <td class="tftable">Last Name </td> 
      <td class="tftable">ID </td> 
      <td class="tftable">Department </td> 
     </tr> 

私は、CSS

.red 
{ 
color:red; 
} 

で

var value = $('.tftable span').text("*"); 
    value.addClass("red"); 

を追加しようとしています。しかし、私は動的に私のラベルの近くに*印を得ていないのです。

Answer 1

は、ここでは、この

<tr> 
    <td class="tftable">First Name <span> </span></td> 
    <td class="tftable">Last Name <span> </span></td> 
    <td class="tftable">ID <span> </span></td> 
    <td class="tftable">Department <span> </span></td> 
</tr> 

Answer 2

を試してみてください、あなたは間違いがTDのタグを閉じたソリューションhttps://jsfiddle.net/w1un7sw8/

var value = $('.tftable > span').html("*"); 
 

 
    value.addClass("red");

.red 
 
{ 
 
color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
      <td class="tftable">First Name <span> </span></td> 
 
      <td class="tftable">Last Name </td> 
 
      <td class="tftable">ID </td> 
 
      <td class="tftable">Department </td> 
 
     </tr> 
 

 
</table>

で行きます。 tdタグをスパン終了タグの後に閉じてください。

Answer 3

ここでは、すべてのスパンで*を動的に追加できます。

この例を確認すると役立ちます。

$(document).ready(function() 
 
{ 
 
    $(".tftable span").addClass("red").html("*"); 
 
});

.red {color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <td class="tftable">First Name <span></span></td> 
 
    <td class="tftable">Last Name <span></span></td> 
 
    <td class="tftable">ID <span></span></td> 
 
    <td class="tftable">Department <span></span></td> 
 
</tr> 
 
</table>

Answer 4

はい@Prasanthラヴィは、あなたが「TD」 内のスパンを配置する必要があり、あなたが特定のものに星を与えたいならば、またがるようにクラスを与えると....答えとしてjqueryの 例では、そのクラスを選択します。 -

<tr> 
    <td class="tftable">First Name <span class="star"> </span></td> 
    <td class="tftable">Last Name <span> </span></td> 
    <td class="tftable">ID <span class="star"> </span></td> 
    <td class="tftable">Department <span> </span></td> 
</tr> 

やスクリプトを

var value = $('.star').text("*"); 
value.addClass("red"); 

Answer 5

CSSのみで解決しました。 span要素であるtftableクラスのすべての子孫がアスタリスクであると仮定します。

.tftable span:before { 
    content:'*'; 
    color:red; 
} 

Answer 6

これを試してみて、

$('table tr td:first-child').append("<span class='red'>*</span>"); 

ホープ助け、