Блог

Главная - Вопросы по программированию - применение динамического класса к на основе условия

применение динамического класса к на основе условия

#jquery #html #css

#jquery ( jquery ) #HTML #css — код #jquery #css

Вопрос:

Как применить css-класс к «td» на основе условия? Пожалуйста, проверьте приведенный ниже код. У меня есть таблица под названием «FunctionArea», в которой мне нужно динамически создавать td и применять CSS на основе условия 

 var tbody = $('#FunctionArea tbody');
var FArea = ['test','test1','test2','test3'];
$.each(FArea, function (i, FArea) {
  var tr = $('<tr>')
  $('<td>').html(FArea).appendTo(tr);
  $.each(FunctionArea, function (i, FunctionArea) {
    if (FArea == FunctionArea.split(':')[0])
    {
      var tdclass = FunctionArea.split(':')[3] == "Input" ? 'input' : 'delivarable';
      $('<td>').addClass(tdclass);            
      $('<td>').html("<a class='hiddenTab' href="   FunctionArea.split(':')[2]   ">"   FunctionArea.split(':')[1]   "</a>").appendTo(tr);
    }
  });
  tbody.append(tr);
});  
 table#FunctionArea {
  border-collapse: separate;
  border-spacing: 15px;
  color: #4a4a4d;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 10px;
  border: 1px solid #ddd;
 }
#FunctionArea th,
table.input td {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 7px 13px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 3px 3px;
  cursor: pointer;
  /*-webkit-transition-duration: 0.4s;*/
  transition-duration: 0.4s;
  border-radius: 8px;
}
table.delivarable td {
  background-color: yellow;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head></head>
<body>    
<table id="FunctionArea">
        <tbody></tbody>
    </table>
</body>
</html>

Комментарии:

1. Вы уверены, что на вашей странице загружена библиотека `jquery`?

2. Да, я добавил только фрагмент.

3. Откуда FArea берется? А у вас тоже есть html страница?

4. FArea и FunctionArea — это два массива, в которых я храню значения

5. где ваша область, функциональная область

Ответ №1:

Предлагаю избегать прямых манипуляций с dom с помощью «$().html()». потому что do не создает полезный объект. вместо этого создайте объект и добавьте.

` 

 <table id="myTable">
</table>
<button id="btAppend">Append</button>
<style>
    .blue{ color:blue;}
    .red{ color:red;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    var counter=0;
    var myTable=$("#myTable");
    var btAppend=$("#btAppend");

    btAppend.click(function(){
        counter  ;

        var tr=$('<tr id="id-mytr-' counter '">');
        var td1=$('<td>');
        var tdclass=(counter % 2 == 1)?"blue":"red";
        td1.addClass(tdclass);
        td1.append("Hello");

        tr.append(td1);
        myTable.append(tr);
    });
</script>

`

Комментарии:

1. Предоставление отдельных идентификаторов для TD помогло мне решить проблему спасибо Рубенс за вашу помощь и всем другим, кто дал мне информацию, ценю вашу помощь.