<div"> <div"> <div" />

動的に追加されたTablerowにcssを追加する

I am creating a Website using jQuery mobile and on that website I got a table that looks like this:

FIDDLE

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<table data-role="table" class="ui-responsive ui-shadow gk-decorate" id="testTable" is="jqm-table">
  <thead>
    <tr>
      <th data-priority="1">Animal</th>
      <th data-priority="1">Sports</th>
      <th data-priority="1">Names</th>
      <th data-priority="1">Fruits</th>
      <th data-priority="1">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Cat</th>
      <td>Football</td>
      <td>Anna</td>
      <td>Apple</td>
      <td></td>
    </tr>
    <tr>
      <th>Dog</th>
      <td>Baseball</td>
      <td>James</td>
      <td>Banana</td>
      <td>Checked</td>
    </tr>
    <tr>
      <th>Shark</th>
      <td>Hockey</td>
      <td>David</td>
      <td>Orange</td>
      <td>Checked</td>
    </tr>
    <tr>
      <th>Ape</th>
      <td>PingPong</td>
      <td>Locke</td>
      <td>Mango</td>
      <td></td>
    </tr>
  </tbody>
</table>
</div> </div>

My question is: Can I somehow add a CSS class or CSS in general to the rows that got the String "Checked" inside the Status Coloumn.
I tried stuff like that:

var qTable = document.getElementById("testTable");
var row = qTable.tBodies[0].insertRow();
row.addClass() //error does not support addClass
row.css({..})//error does not support css..

注:テーブルの内容は動的に追加されます。

0

4 答え

Use contains: pseudo selector to filter out <td>s with your marker and then get their parent node (<tr>s)

$('td').filter(":contains('Checked')").parent().addClass('sugar')

https://jsfiddle.net/rttmq4we/

1
追加された

試してください:

$("#testTable tr").each(function(){
  var tds  = $(this).find("td");
  var statusCell = $(tds[3]);
  var statusCellTxt = statusCell.text();
  if (statusCellTxt.indexOf('Checked') !== -1){
    $(statusCell).css('border', '1px solid red');
  }
});

詳しくはこちらをご覧ください。

1
追加された

試してください:

$("#testTable tr").each(function(){
  var tds  = $(this).find("td");
  var statusCell = $(tds[3]);
  var statusCellTxt = statusCell.text();
  if (statusCellTxt.indexOf('Checked') !== -1){
    $(statusCell).css('border', '1px solid red');
  }
});

詳しくはこちらをご覧ください。

1
追加された

これを試して、

JS

$("#testTable td").each(function(){
    if($(this).text() =='StatusChecked'){
   $(this).parent().addClass('checked');
   }
});

CSS(テストスタイル専用)

.checked{
  background:green;
}

更新されたフィドル -

https://JSfiddle.net/guruling/erc3ujzw/
1
追加された