JQuery和嵌套表 - 針對正確的目標添加/刪除或顯示/隱藏

因此，像往常一樣，我很難找到正在嘗試完成的指令，並且它變得有點「曲折」 '至今我所知道的。JQuery和嵌套表 - 針對正確的目標添加/刪除或顯示/隱藏

我正在試圖完成：我建立一個客戶端系統，將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>[email protected]</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>[email protected]</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>

我真的很感謝所有幫助任何人都可以給我，讓我在正確的方向。

來源

2013-05-02 Steve

這是文章還是一個問題？ – undefined 2013-05-02 22:05:37

@undefined只是想徹底。對不起，如果它有點冗長。 – Steve 2013-05-02 23:05:48

從迴應和意見來看，無論我需要重寫這個還是沒有人喜歡嵌套表格 – Steve 2013-05-03 14:07:25

好吧，我覺得這裏有不止一個的問題，讓我們從頭開始

多個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-03 14:18:01 chickpeas

Hi @chickpeas。我嘗試了你的小提琴，演出和新服務按鈕停止工作。我想知道...如果我應該唯一標識新數據（可能添加一個？），當使用ADD（用於添加新客戶端容器）時，最好是使用'Show /隱藏「或」新服務「按鈕，我可以定位唯一的客戶端ID並深入到需要添加的部分。 – Steve 2013-05-03 16:40:58

其實......我開始認爲使用嵌套表的單個頁面佈局和數據操作如果我稍微分離一些工具，並在單獨的頁面上創建這些工具（比如搜索工具和客戶端創建頁面，在單個客戶端頁面下的服務），那麼最好是這樣。綠色這個東西大聲笑（除了'多個問題'評論哈哈）。 – Steve 2013-05-03 16:56:00

JQuery和嵌套表 - 針對正確的目標添加/刪除或顯示/隱藏

回答

相關問題