在表中顯示隱藏行

我正在使用一些基於以下JSFiddle的代碼。目的是在用戶點擊「Show Extra」鏈接時顯示更多信息。在表中顯示隱藏行

我遇到的問題是，當鏈接被點擊時，除了表格的最後一行之外，隱藏的元素會短暫顯示，然後關閉。

我在javascript中使用模板字符串填充表格。下面是我使用將行添加到表中的代碼：

this.addRecordToTable = function(bet, index, id){ 
console.log(index); 
console.log($.data(bet)); 
var butId = id.toString(); 

if (bet.bookies == null){ 
    bet.bookies = ""; 
} 

if (bet.bet == null){ 
    bet.bet = ""; 
} 

var newRow = ` 
<tr> 
    <td>${bet.date}</td> 
    <td>${bet.bookies}</td> 
    <td>${bet.profit}</td> 
    <td><button id=${butId}>Delete</button></td> 
    <td><a href=\"#\" id=\"show_${index}\">Show Extra</a></td> 
</tr> 
<tr> 
    <td colspan=\"5\"> 
     <div id=\"extra_${index}\" style=\"display: none;\"> 
      <br>hidden row 
      <br>hidden row 
      <br>hidden row 
     </div> 
    </td> 
</tr> 
` 



console.log(newRow); 
console.log("#"+butId); 

$(newRow).appendTo($("#betTable")); 
$("#"+butId).click(
    function() 
    { 
     if (window.confirm("Are you sure you want to delete this record?")) 
     { 
      var rec = new Records(); 
      rec.removeRecordAt(index); 
      $("#betTable tbody").remove(); 
      var c = new Controller(); 
      c.init(); 
     } 

    }); 

$("a[id^=show_]").click(function(event) { 
    $("#extra_" + $(this).attr('id').substr(5)).slideToggle("slow"); 
    event.preventDefault(); 
});

}

編輯：

我不得不改變$("a[id^=show_]").click到$("a[id=show_"+index).click...，作爲事件處理程序被添加到每個元素每次我添加一個新的元素。感謝@ freedomn-m。

來源

2017-06-08 James

請爲您的問題創建一個工作示例，以便我們可以更好地幫助您（分享片段中的所有相關代碼） –

您最好的辦法是嘗試在沒有模板的情況下創建此示例。如果它能夠正常工作，您可以重新找回模板生成的代碼和工作代碼之間的區別。由於您已經在小提琴中有工作代碼，您應該能夠查看您的模板正在生成什麼，以瞭解它爲什麼不生成相同的代碼。 –

'$（「a [id^= show _]」）' - 此代碼爲每個*現有鏈接添加一個新的事件處理程序*以及新的事件處理程序，因爲它不是ID特定的，所有'a'匹配選擇。這也是使用「切換」而不是「顯示」的問題。更改爲'$（「a [id^= show_]」，newRow）'或'$（「a＃show_」+ $ {index} +「）' –

此代碼：

$("a[id^=show_]")

增加了一個新的事件處理程序現有的每個環節以及新的一個，因爲它不是ID /特定背景下，這樣所有的節目a的匹配選擇。

您需要添加上下文（newRow），或使用已有的變量（S）爲已定義的循環的一部分，例如：

$("a[id^=show_]", newRow) 
$("a#show_" + index)

（或適用於任何其他的變化）。

另一種方法是使用了動態添加元素甚至代表團，如：

$(document).on("click", "a[id^=show_]", function...

在這種情況下，你只需要定義/調用一次事件，它就會被解僱對於新的元素（即把它放在新的行循環之外）。

來源

2017-06-08 10:43:21

在表中顯示隱藏行

回答

相關問題