0

いつものように、私が達成しようとしていることに対する適切な指示を見つけるのに苦労しています。

私が達成しようとしていること：私は、a）クライアントの一般的なデータを保持し、b）その一般的なクライアントコンテナ内で使用しているサービスを保存するクライアントシステムを構築しています。このシステムは少し単純にすることを意図しており、ネストされたテーブルのみを使用しますが、これは私が望んでいたほど単純ではないことがわかりました (笑)。

これまでのところ、データを保持するテンプレートのみを作成しています。アイデアは、javascript/jquery 機能を邪魔にならないようにし、その機能を使用してデータベースからデータを取得することです。内訳は次のとおりです。

  • ページは、検索されたデータを取得するか、すべてのクライアントを表示します。
  • 各クライアントの一般的なデータは表示されますが、サービスは手動で表示されるまで非表示になります (これは、データがユーザーに表示されすぎて、実際のクライアントを探しているときに見つけにくくなるのを防ぐためです)。
  • 何らかの形式の「表示」ボタンを押すと、サービスが表示されます。
  • そのクライアント内でより多くのサービスを簡単に追加するオプションが必要です。
  • クライアントを追加するオプションが必要です。

これまでに持っているものと持っていないもの：これまでの構造を取得しました。私の問題は、「新しいサービス」を押したときに、追加のデータを挿入するために適切なセルを正しくターゲットにできないように見えることです。私の主な問題は、ターゲットにする必要がある場所を一意に識別していないことです。これについての私の考えは、JQuery を使用して .parent() 関係を試みることでしたが、奇妙な試みを何度も試みた後、失敗し続けました。

現在のコードでは .parent の使用法が示されていませんが、サービスを追加するときにテーブルが正しく操作されていないことがわかります。また、追加されたクライアント データをターゲットにすることもできません。「新しいサービス」は、各クライアントに複数のインスタンスも追加します。これも、特定のターゲットではなく、「一般的な」ターゲットにヒットしただけです。

私はjsfiddleで作業モデルをセットアップしました。クライアントを追加するために「追加」を数回押すと、最初のリスト以外のいずれかを「表示」または「新規サービス」しようとすると何が起こるかを確認できます。リンクは次のとおりです。 http://jsfiddle.net/silenced/THmvb/

私の主な質問：これらの操作要素を使用して、すべてではなく特定のクライアントをターゲットにするにはどうすればよいですか? これをもう少し簡単に行うには、テーブル構造を変更する必要がありますか? テーブルの代わりに DIV を追加する必要がありますか? 多分私はもっとテーブル自体が必要です（私はそれらを使いすぎないようにしようとしていました）？各セクションに番号を付ける for ループは理にかなっていますか? もし私がそのルートに行ったとしても、クライアントの番号も見つけなければならないようです.

コードは次のとおりです（上記のjsfiddleリンクでも）：

CSS :

body {
    margin: 0; padding: 0;
    text-align: right; font-family: Arial, sans-serif;
}

#content { text-align: left; }

h1 { padding: 0 3%; color: #ccc; font-size: 1.5em; font-family: Courier, serif; }

table tr th {
    text-align: left; font-size: .6em;
    background-color: #CCC;
}
table { font-size: 1em;  border-collapse: collapse;}
table td { vertical-align: top; padding: 0 2px; }

#prim { margin: 0 auto; width: 1200px;}

#nClient {
    margin: 0 auto; width: 30px;
    background-color: #CCC;
    font-size: .7em; text-align: center;
    cursor: default;
}

#nServ {
    margin: 1px 1px 1px 0px; float: left; width: 70px;
    background-color: #CCC;
    font-size: .8em; text-align: center;
    cursor: default;
}
#tServ {
    margin: 1px 1px 1px 0px; float: left; width: 70px;
    background-color: #CCC;
    font-size: .8em; text-align: center;
    cursor: default;
}

/* Fixes an issue with Mozilla where border-bottom and border-right is still shown on last row */
.hBrdr {
    border-bottom-style: hidden;
    border-right-style: hidden;
}
#sec {
    margin: -1px -3px; width: 100.55%; // ensures inner data table fits correctly
}
#sec td { font-size: .9em; }

.Details { display: none; }
.cent { text-align: center; }

スクリプト (JQuery) :

$(document).ready(function() {

    // when 'add' is clicked, create new client set with template service       
    $('#nClient').click(function() {
        $('#addRow').before('<tr>' +
                  '<td rowspan="3">#</td>' +
                  '<td>Test Name</td>' +
                  '<td>ME</td>' +
                  '<td>test@test.yup</td>' +
                  '<td>Pending</td>' +
                '</tr>' +
                '<tr>' +
                  '<td colspan="5" class="Details">' +
                    '<table id="sec" border="1px">' +
                        '<thead>' +
                          '<tr>' +
                            '<th style="width: 250px;">Descriptor</th>' +
                            '<th style="width: 100px;">ID</th>' +
                            '<th style="width: 25px;">Ref</th>' +
                            '<th style="width: 70px; text-align: center;">Access Data</th>' +
                            '<th style="width: 70px; text-align: center;">Active</th>' +
                            '<th>Start Date</th>' +
                            '<th style="width: 350px;">Comment</th>' +
                          '</tr>' +
                        '</thead>' +
                        '<tbody>' +
                          '<tr>' +
                            '<td>Service Descriptor</td>' +
                            '<td>12345</td>' +
                            '<td>101</td>' +
                            '<td class="ind"><input type="checkbox"></td>' +
                            '<td class="ind"><input type="checkbox"></td>' +
                            '<td>01/01/2014</td>' +
                            '<td>Comment goes here.</td>' +
                          '</tr>' +
                        '</tbody>' +
                    '</table>' +
                  '</td>' +
                '</tr>' +
                '<tr style="font-size: 12px;">' +
                  '<td colspan="2"><div id="tServ">Show</div><div id="nServ">New Service</div></td>' +
                  '<td colspan="3">Notes</td>' +
                '</tr>');
    });

    // when 'New Service' is clicked, add additional service data row to current client
    $('#nServ').click(function() {
        $('#sec tbody tr:last-child').after('<tr>' +
                '<td>Service Descriptor</td>' +
                '<td>12345</td>' +
                '<td>101</td>' +
                '<td class="cent"><input type="checkbox"></td>' +
                '<td class="cent"><input type="checkbox"></td>' +
                '<td>01/01/2014</td>' +
                '<td>Comment goes here.</td>' +
              '</tr>');
    });

    /* show/hide additional data */
    $('#tServ').click(function() {
        $(this).text($(this).text() == 'Hide' ? 'Show' : 'Hide');
        $('.Details').toggle();
    });
});

HTML :

<div id="content">

<h1>New Client Project</h1>

<table border="1px" id="prim">
<thead>
    <tr>
      <th style="width: 5px;">No.</th>
      <th>Name</th>
      <th>State</th>
      <th>E-mail</th>
      <th>Status</th>
    </tr>
</thead>
<tbody>
    <!-- BEGIN CLIENT DATA -->
    <tr>
      <td rowspan="3">#</td>
      <td>Test Name</td>
      <td>ME</td>
      <td>test@test.yup</td>
      <td>Pending</td>
    </tr>
    <tr>  
      <td colspan="5" class="Details">


        <table id="sec" border="1px">
            <thead>
              <tr>
                <th style="width: 250px;">Descriptor</th>
                <th style="width: 100px;">ID</th>
                <th style="width: 25px;">Ref</th>
                <th style="width: 70px; text-align: center;">Access Data</th>
                <th style="width: 70px; text-align: center;">Active</th>
                <th style="width: 100px;">Start Date</th>
                <th style="width: 350px;">Comment</th>
              </tr>
            </thead>
            <tbody>
            <!-- BEGIN CLIENT SUB-DATA -->
              <tr>
                <td>Service Descriptor</td>
                <td>12345</td>
                <td>101</td>
                <td class="cent"><input type="checkbox"></td>
                <td class="cent"><input type="checkbox"></td>
                <td>01/01/2014</td>
                <td>Comment goes here.</td>
              </tr>
            <!-- END CLIENT SUB-DATA -->
            </tbody>
        </table>            


      </td>
    </tr>
    <tr style="font-size: 12px;">  
      <td colspan="2"><div id="tServ">Show</div><div id="nServ">New Service</div></td>
      <td colspan="3">Notes</td>
    </tr>
    <!-- END CLIENT DATA -->

    <tr id="addRow">
      <td><div id="nClient">ADD</div></td>
      <td colspan="5" class="hBrdr"></td>
    </tr>       
</tbody>

私を正しい方向に導くために誰かが私を助けてくれることに本当に感謝しています。

4

1 に答える 1

0

わかりました、ここには複数の問題があると思います。最初から始めましょう

  • 複数の ID: 複数の要素に同じ ID を割り当てることはできません#nServ。#tServ

  • onclick動的に追加された要素のイベント: これを見てください: http://api.jquery.com/on/そして、このような何かを試してください

    $('table').on('click', '#tServ', function() {
    $(this).text($(this).text() == 'Hide' ? 'Show' : 'Hide');
    $('.Details').toggle();
});

私はいくつかの変更を加えましたhttp://jsfiddle.net/jMbvk/

于 2013-05-03T14:18:01.493 に答える