在.hta中切换隐藏/显示表td

时间：2014-07-19 12:18:18

标签： javascript toggle html-table show-hide hta

我已经看过几个关于这个主题的帖子，但是尽管尝试了不同的方法，我还是没有设法解决自己的问题。

我正在使用.hta文件进行编程，其中我将所有注释标题列在彼此之上。每当您单击一个音符标题时，该标题下的描述都应该出现（切换/展开）。所有笔记都应该隐藏起来。

sub searchdata

    SQL_query = "SELECT * FROM dvd WHERE Title LIKE '%"& txtsrch.value &"%' OR Notes LIKE '%"& txtsrch.value &"%' ORDER BY Title"
    Set rsData = conn.Execute(SQL_query)
    strHTML2 = strHTML2 & ""
    Do Until rsData.EOF = True
    strHTML2 = strHTML2 & "<table width='97%' border='0' id='bodytext' style='border-bottom: solid #000000 1px;'><tr><span class'togglelink'><td width='70%' style='cursor: pointer'><b>" & rsData("Title") & "</b></td></span><td align='right' style='color: #000'>" & rsData("Cat") & "&nbsp; <a href='#' onclick='editUser("& rsData("ID") &")' language='vbscript'><img src='images/arrow-blue.png' border='0' title='Rediger notatet' /></a>&nbsp;<a href='#' onclick='deleteUser("& rsData("ID") &")' language='vbscript'><img src='images/slet.png' border='0' title='Slet notatet' /></a></td><tr><span class='toggle' style='display: block'><td colspan='2'>" & rsData("Notes") & "</td></span></tr></table>"
    rsData.moveNext ' go to next record
    Loop
    strHTML2 = strHTML2 & ""
    searchIT.innerHTML = strHTML2

end sub

我正在使用这个JS脚本来运行它：

<script type="text/javascript">
$(document).ready(function () {
    $('.toggle').hide();
    $('span.togglelink').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.toggle')
        $('.toggle').not(elem).hide('fast');
        elem.toggle('fast');
    });
});
</script>

在使用纯文本进行测试时，我可以轻松地使脚本正常工作。 JSFiddle

附带问题：HTA中的编程与HTML真的如此不同吗？我试图将整个网站（MySQL，PHP，HTML）转换为HTA工作时遇到了很多问题。

提前致谢！

更新：列出了我的整个.hta脚本：

<html>
<HTA:APPLICATION ID="oHTA"
     APPLICATIONNAME="myApp"
     BORDER="thick"

     CAPTION="yes"
     ICON=./images/Icon.ico
     MAXIMIZEBUTTON="yes"
     MINIMIZEBUTTON="yes"
     SHOWINTASKBAR="yes"
     SINGLEINSTANCE="no"
     SYSMENU="yes"
     RESIZE="yes"
     VERSION=7.2
     WINDOWSTATE="normal"
     contextMenu=no
  >
<head>
<style>
#vis1{
    display:none;
}
</style>
<script type="text/javascript"> // Width and height in pixel to the window
    window.resizeTo(683,725);
</script>
<script type="text/javascript">

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="Yes" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" 
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>
<title>Søgning</title>
<link href="stylesheet/stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="SHORTCUT ICON" href="images/icon.ico"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.7.min.js"></script>

<script language="vbscript">

Dim conn 'GLOBAL doing this here so that all functions can use it

sub dotheconnection

    Set conn = CreateObject("ADODB.Connection")

    conn.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source =./Database/data.mdb; User Id=; Password="

    If conn.errors.count <> 0 Then 


    else
        ' if connected OK call sub getdata
        getdata

    end if
end sub

sub getdata

    SQL_query = "SELECT * FROM dvd ORDER BY Title"
    Set rsData = conn.Execute(SQL_query)

    strHTML = strHTML & ""
    Do Until rsData.EOF = True
    strHTML = strHTML & "<table width='97%' border='0' id='bodytext' style='border-bottom: solid #000000 1px;'><tr><td width='70%' style='cursor: pointer'><span id='vis'><b>" & rsData("Title") & "</b></span></td><td align='right' style='color: #000'>" & rsData("Cat") & "&nbsp; <a href='#' onclick='editUser("& rsData("ID") &")' language='vbscript'><img src='images/arrow-blue.png' border='0' title='Rediger notatet' /></a>&nbsp;<a href='#' onclick='deleteUser("& rsData("ID") &")' language='vbscript'><img src='images/slet.png' border='0' title='Slet notatet' /></a></td><tr><td colspan='2'><span id='vis1'>" & rsData("Notes") & "</span></td></tr></table>"

    rsData.moveNext ' go to next record
    Loop

    strHTML = strHTML & ""

    SQL_query = "SELECT Count(*) AS intTotal FROM dvd"
    Set rsData = conn.Execute(SQL_query)
    strHTML1 = strHTML1 & ""
    strHTML1 = strHTML1 & "" & rsData("intTotal") & " "
    Count.innerHTML = strHTML1
end sub

sub searchdata

    SQL_query = "SELECT * FROM dvd WHERE Title LIKE '%"& txtsrch.value &"%' OR Notes LIKE '%"& txtsrch.value &"%' ORDER BY Title"
    Set rsData = conn.Execute(SQL_query)
    strHTML2 = strHTML2 & ""
    Do Until rsData.EOF = True
    strHTML2 = strHTML2 & "<table width='97%' border='0' id='bodytext' style='border-bottom: solid #000000 1px;'><tr><span class'togglelink'><td width='70%' style='cursor: pointer'><b>" & rsData("Title") & "</b></td></span><td align='right' style='color: #000'>" & rsData("Cat") & "&nbsp; <a href='#' onclick='editUser("& rsData("ID") &")' language='vbscript'><img src='images/arrow-blue.png' border='0' title='Rediger notatet' /></a>&nbsp;<a href='#' onclick='deleteUser("& rsData("ID") &")' language='vbscript'><img src='images/slet.png' border='0' title='Slet notatet' /></a></td><tr><span class='toggle' style='display: block'><td colspan='2'>" & rsData("Notes") & "</td></span></tr></table>"
    rsData.moveNext ' go to next record
    Loop
    strHTML2 = strHTML2 & ""
    searchIT.innerHTML = strHTML2

end sub

sub deleteUser(id)
    If MsgBox("Vil du slettet dette notat?", vbYesNo) =vbYes Then       
    SQL_query = "DELETE * FROM dvd WHERE ID = " & id
    conn.Execute(SQL_query)
    getdata
    reloadpage()
Else
    MsgBox("Notatet er ikke blevet slettet.")
End IF
end sub

sub addUser

    SQL_query = "INSERT INTO dvd (Title,Length,Notes,Cat) VALUES ('"& txtTitle.value &"','"& txtLength.value &"','"& txtNotes.value &"','"& txtCat.value &"')"
    conn.Execute(SQL_query)
    reloadpage()
    expandcontent("sc2")
    getdata

end sub

sub editUser(id)

    SQL_query = "SELECT * FROM dvd WHERE ID=" & id
    Set rsData=conn.Execute(SQL_query)
    txtTitle.value = rsData("Title")
    txtLength.value =   rsData("Length")
    txtNotes.value =    rsData("Notes")
    txtCat.value =  rsData("Cat")
    txtID.value = rsData("ID")
    btnUpdate.disabled = false // Show
    btnOpret.disabled = true // Hide
    expandcontent("sc2")
    getdata

end sub


sub updateUser

    SQL_query = "UPDATE dvd SET Title='"& txtTitle.value &"', Length='"& txtLength.value &"' , Notes='"& txtNotes.value &"', Cat='"& txtCat.value &"' WHERE ID= " & txtID.value 
    conn.Execute(SQL_query)
    getdata
    reloadpage()
    expandcontent("sc2")

end sub


</script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.7.min.js"></script>
<SCRIPT TYPE="text/javascript">
function init()
{
dotheconnection();
searchdata();
getdata();
}
</SCRIPT>

    <script>
function addNotat() {
    btnOpret.disabled = false; // Show
    btnUpdate.disabled = true; // Hide
    expandcontent("sc2");
}
</script>
<script>
function reloadpage() {
    location.reload();
}
</script>
<script type="text/javascript">
$(document).ready(function () {
    $('.toggle').hide();
    $('div.togglelink').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.toggle')
        $('.toggle').not(elem).hide('fast');
        elem.toggle('fast');
    });
});
</script>
</head>

<body onLoad="init()" language="vbscript">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" width="20%" id="top_bar">
<input language="vbscript" onload="searchdata" onkeyup="searchdata" name="txtsrch" id="filter_input" width="15%" tabindex="0" autofocus="autofocus" size="35" type="search" style="background: url(images/search_bg.png) #FFF no-repeat left; padding-left: 20px; margin-left: 10px" placeholder="Søgning">&nbsp;</td>

<td id="top_bar"></div><span id="Count"></span> notater </td>

<td width="22%" id="top_bar" align="right"><input type="button" style="margin-right: 10px" onClick="history.go(0)" value="Opdater"><a onClick="addNotat()" style="cursor: hand">Opret</a>&nbsp;</span></td>
<td width="20%" id="top_bar" align="right"><a href="" target="_blank"><img src="images/footer-logo.png" style="margin-right: 10px" border="0" title="Gå til forsiden" /></a></td>
</tr>
</table>
<br>
<div id="sc2" class="switchcontent" style="margin-left: 10px">
<b>Title:<br></b><input type="text" name="txtTitle" size="43"><br>
<b>Kategori:</b><br>
<select size="1" name="txtCat">
    <option value="">Vælg kategori</option>
    <option value="Thriller">Thriller</option>
    <option value="Westerns">Westerns</option>
</select><br>
<b>Length</b><br><input type="text" name="txtLength" size="8"><br>
<b>Notat:</b><br><textarea rows="6" name="txtNotes" cols="55"></textarea><br>

<p align="left"><b>
<input type="button" name="btnOpret" value="Opret" onclick="addUser" language="vbscript" disabled>
<input type="button" name="btnUpdate" value="Gem" onclick="updateUser" language="vbscript" disabled>
<input type="hidden" name="txtID">
</b></p>

</div>
</div>
<div id="searchIT" style="margin-left: 10px"></div>
</body>
</script>


</html>

1 个答案:

答案 0 :(得分：0)

文档加载后将附加div.togglelink，on - 处理程序只对文档加载时存在的元素产生影响。

将处理程序附加到正文：

$('body').on('click','span.togglelink',function(){/*your callback*/});
相关问题
最新问题