JQuery 和嵌套表 - 定位正确的目标以添加/删除或显示/隐藏

Question

所以像往常一样，我很难找到正确的指示来完成我想要完成的工作，而且到目前为止我所知道的有点“曲折”。

我想要完成的事情： 我正在构建一个客户端系统，它将 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; }

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>

我非常感谢任何人能给我的帮助，让我朝着正确的方向前进。

Answer 1

好吧，我觉得这里的问题不止一个，让我们从头开始

• 多个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/