JQuery で幅 4 列、高さ 16 行 (16x4) のテーブルを作成しようとしています。このテーブルは、16 人の従業員がいる「Meet the Staff」ページ用です。このページには、彼らの名前、小さな写真、社内での役職、彼らを説明する小さな宣伝文句などの情報が含まれています。これは、各情報 (名前、写真、位置、宣伝文句) が次のように個別の行に含まれるようにレイアウトされています。
Name Name Name Name
Image Image Image Image
Position Position Position Position
Blurb Blurb Blurb Blurb
NEW ROW
Name Name Name Name
Image Image Image Image
Position Position Position Position
Blurb Blurb Blurb Blurb
etc....
情報は XML ファイルから読み込まれます。以下は、管理チーム全体 (従業員 4 人) を含むファイルの一部です。
<!--Management-->
<management>
<name>Daniel Duffy</name>
<position>Manager of Mechanical Services</position>
<blurb>Over a decade of mechanical experience, nine of those years working souly on GM vehicles, Dan knows the ins and outs of almost all North American GM vehicles like the back of his hand.</blurb>
</management>
<management>
<name>Kelly Assise</name>
<position>Manager of Customer Service</position>
<blurb>A degree in Communication Studies and an outgoing upbeat attitude makes Kelly the perfect candidate for our Customer Service Dept.</blurb>
</management>
<management>
<name>Aly McAvoy</name>
<position>Manager of Sales</position>
<blurb>A well-rounded personality, with an aptitude for number crunching and excellent financial forsight, Aly McAvoy comes to us with over 6 years experience in the auto parts field.</blurb>
</management>
<management>
<name>Rich Sarlous</name>
<position>Manager of Marketing</position>
<blurb>Business and Communication careers run in the family. Rich Sarlous is no exception. Fresh out of college, smart as a whip, graduating with a Masters in Business/Marketing.</blurb>
</management>
これは 4 回にわたって作成されます (16 人の従業員全員に対して)。これは、削除したい現在のコードの例です。
<div class="infoBlurb"><table id="employeeTable">
<!--Directors-->
<tr><td class="employeeName1"></td><td class="employeeName2"></td><td class="employeeName3"></td><td class="employeeName4"></td></tr>
<tr><td class="employeePic1"></td><td class="employeePic2"></td><td class="employeePic3"></td><td class="employeePic4"></td></tr>
<tr><td class="employeePos1"></td><td class="employeePos2"></td><td class="employeePos3"></td><td class="employeePos4"></td></tr>
<tr><td class="employeeBlurb1"></td><td class="employeeBlurb2"></td><td class="employeeBlurb3"></td><td class="employeeBlurb4"></td></tr>
これらの行のブロックをさらに 3 つ持つと、乱雑に見えるため、JQuery を使用してテーブルを作成する必要があります。データのビットごとに 16 の異なるセル クラスを作成し、セルごとに 16 の異なる CSS クラスを作成することなく、これを行う方法が必要です。
私は正しい Jquery を書き、XML ファイルをループして、次のように書いた html のすべてのデータを表示します。
$(document).ready(function () {
$.ajax({
type: "GET",
url: "../stylesheets/employees.xml",
dataType: "xml",
success: function (xml) {
var x = 1;
$(xml).find('directors').each(function () {
var name = $(this).find('name').text()
$(".employeeName" + x).text(name);
var position = $(this).find('position').text()
$(".employeePos" + x).html(position);
var blurb = $(this).find('blurb').text()
$(".employeeBlurb" + x).html(blurb);
x++
});
$(xml).find('management').each(function () {
var name = $(this).find('name').text()
$(".employeeName" + x).text(name);
var position = $(this).find('position').text()
$(".employeePos" + x).html(position);
var blurb = $(this).find('blurb').text()
$(".employeeBlurb" + x).html(blurb);
x++
});
$(xml).find('supervisor').each(function () {
var name = $(this).find('name').text()
$(".employeeName" + x).text(name);
var position = $(this).find('position').text()
$(".employeePos" + x).html(position);
var blurb = $(this).find('blurb').text()
$(".employeeBlurb" + x).html(blurb);
x++
});
$(xml).find('juniorSupervisor').each(function () {
var name = $(this).find('name').text()
$(".employeeName" + x).text(name);
var position = $(this).find('position').text()
$(".employeePos" + x).html(position);
var blurb = $(this).find('blurb').text()
$(".employeeBlurb" + x).html(blurb);
x++
});
}
});
});
しかし、HTMLをそれに組み込む方法や、それを正しく行っているかどうかさえわかりません..
これらすべてに加えて、ドロップダウン メニューを使用して、16 人の従業員全員を表示することから、1 つの部門だけを表示することまで、このテーブルをフィルター処理できるようにしたいと考えています。私はドロップダウンメニューをロックする準備ができていますが、別の方法でコーディングする必要がある場合に備えて、そこにその情報を少し入れると思います.
どんな助けでも大歓迎です、