0

So as usual, I'm having a hard time finding the right instruction for what I'm attempting to accomplish and it's getting a little 'twisty' for what I know so far.

What I'm attempting to accomplish: I'm building a client system that will a) hold a client's general data and b) store whatever services they are using within that general client container. The system is meant to be a bit simple and only uses nested tables, which I'm finding isn't nearly as simple as I'd hoped for lol.

So far I'm building just the template that will hold the data. The idea is to get the javascript/jquery functionality out of the way, then pull the data from a database using that functionality. Here's a breakdown:

  • Page will pull any searched data or show all clients.
  • Each client's general data will be displayed, but their services will be hidden until manually shown (this is to keep the data from showing too much to the user making it harder to find the actual client while looking for them).
  • The services will be shown after hitting some form of 'show' button.
  • An option to easily add more services within that client is needed.
  • An option to add additional clients is needed.

What I have so far and what I don't: I've gotten the structure so far. My issue is that I can't seem to correctly target the right cells to insert additional data when hitting 'New Service'. I can see that my main problem is that I'm not uniquely identifying where I need to target. My thought on this was to attempt .parent() relationships using JQuery, but after a lot of odd trial attempts, I kept failing.

Although my current code doesn't show the .parent usage, you can see how it's not manipulating the tables correctly when adding services. I am also not able to target any added client data. 'New Service' also adds multiple instances in each client, which again is me just hitting a 'general' target instead of a specific one.

I did setup a working model on jsfiddle. If you hit 'ADD' a few times to add a client, you can see what happens when you try to 'Show' or 'New Service' any of them other then the first listing. Here's the link: http://jsfiddle.net/silenced/THmvb/

My Main Question: How can I use these manipulating elements to target their specific client instead of everything? Do I need to change how the table structure is in order to do this with a little more ease? Should I involve more DIV's instead of the table? Maybe I need more table's themselves (which I was trying to avoid overusing them)? Would a for loops to number each section make sense? It seems like if I went that route, I'd have to still find what number the client was too.

Here's the code (also at the above jsfiddle link):

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; }

SCRIPT(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>

I really appreciate any help anyone could give me to get me in the right direction.

Steve
  • 67
  • 2
  • 2
  • 9

1 Answers1

0

ok, I think there's more than one problem here, let's start from the beginning

  • multiple ID: you can't assign the same ID to multiple elements, you have multiple #nServ and #tServ

  • onclick event on dynamically added element: take a look at this: http://api.jquery.com/on/ and try something like this 

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

I've made a couple of change http://jsfiddle.net/jMbvk/

chickpeas
  • 443
  • 5
  • 16
  • Hi @chickpeas. I tried your fiddle and the show and new service button stopped working. I'm wondering... would it be best that when using the ADD (for adding new client container) if I should uniquely identify the new data (maybe add a ? Then when using the 'Show/Hide' or 'New Service' buttons, I could target the unique client id and drill down to the needed section to add to. – Steve May 03 '13 at 16:40
  • Actually... I'm starting to think that a single page layout and data manipulation using nested tables is a bit beyond my capabilities. Maybe it would be best if I split my tools up a little and created the tools on separate pages (like a search tool and client creation page with the services under a single client page). I'm really green to this stuff lol (an addition to the 'more than one problem' comment lol). – Steve May 03 '13 at 16:56