1

jquery/ajaxを使用してxmlドキュメントをHTMLテーブルに変換したいと思います。trさらに、条件が満たされた場合にクラスを追加したいと思います。これは私がこれまでに行ったことですが、意図したとおりに機能しません。1）HTMLテーブルの出力に必要以上trのtdものがあり、2）tr（）の条件付きクラスが機能し.no-kidsていません。どんな助けでも適用されるでしょう！

JQUERY / AJAXコード：

$(document).ready(function(){
  $.ajax({
  type: "GET",
  url: "database.xml",
  dataType: "xml",
  success: function(xmlData) {
    $("person", xmlData).each(function(){
    var name = $(this).find("name").text(),
        kids = $(this).find("kids").text(),
            cars = $(this).find("cars").text();
    if(kids<1){
      $("tbody").append('<tr class="no-kids">');
    }else{
      $("tbody").append('<tr>');
    }             
    $("tbody tr").append('<td class="name">'+name+'</td>');
    $("tbody tr").append('<td class="kids">'+kids+'</td>');
    $("tbody tr").append('<td class="cars">'+cars+'</td>');
    $("tbody").append('</tr>');
    });
   }
  });
  $(".no-kids").css("color","red");
});

HTMLコード：

<table> 
    <thead>
        <tr> 
            <th>NAME</th>
            <th>KIDS</th>
            <th>CARS</th>
        </tr> 
    </thead> 
    <tbody>
    </tbody> 
</table>

DATABASE.XMLコード：

<root>
  <person>
    <name>Matt</name>
    <kids>3</kids>
    <cars>1</cars>
  </person>
  <person>
    <name>Jason</name>
    <kids>0</kids>
    <cars>2</cars>
  </person>
  <person>
    <name>Molly</name>
    <kids>1</kids>
    <cars>0</cars>
  </person>
</root>
4

1 に答える 1

4

jQueryは要素全体のみを追加し、開始/終了タグは追加しません。

var output = '<tr' + parseInt(kids) < 1 ? ' class="no-kids">' : '>';
output += '<td class="name">'+name+'</td>';
output += '<td class="kids">'+kids+'</td>';
output += '<td class="cars">'+cars+'</td>';
output += '</tr>';
$("tbody").append(output);

編集：さらに、成功コールバックで赤いフォントの色を適用する必要があります。

   }
  });
  $(".no-kids").css("color","red");
});

する必要があります

     $(".no-kids").css("color","red");
   }
  });
});
于 2012-09-28T20:55:57.650 に答える