如何通过 for 循环显示数据库中特定项目的信息?
How to display information for a specific item from a database through a for loop?
我正在使用 web2py 框架工作,这就是我想要实现的目标;
我在我的数据库中有不同地方的联系方式,这些不同地方的名称在页面中显示为links,我想要的是一个联系方式当我单击该地点的 link 名称时,该地点将显示在工具提示中。 但事实并非如此!发生的事情是,当我单击地点名称时,我会得到工具提示,其中包含不同地点的不同联系信息,这些信息堆叠在一起!
如上所述,我想要的是当我单击该地点的 link 名称时,该地点的详细联系信息将显示在工具提示中.,谁能帮我解决这个问题。
型号代码
db.define_table('services',
Field('service_name', requires=IS_NOT_EMPTY()),
format='%(service_name)s', migrate=False, fake_migrate=True)
db.define_table('company',
Field('logo', 'upload'),
Field('company_name', requires=IS_NOT_EMPTY()),
Field('services', 'reference services'),
#Field('tlamelo', 'reference tlamelo'),
Field('product', 'reference product'),
Field('tel', requires=IS_NOT_EMPTY()),
Field('email', requires=IS_NOT_EMPTY()),
Field('fax', requires=IS_NOT_EMPTY()),
Field('cell', requires=IS_NOT_EMPTY()),
Field('facebook', requires=IS_NOT_EMPTY()),
Field('twitter', requires=IS_NOT_EMPTY()),
Field('website', requires=IS_NOT_EMPTY()),
Field('postal_address', requires=IS_NOT_EMPTY()),
Field('located_at', requires=IS_NOT_EMPTY()), migrate=False, fake_migrate=True)
CSS 工具提示代码
#branch1 {outline:none; position: relative; font-weight: bold;}
#branch1 {text-decoration:none;}
span.contacts1
{
display:inline;
position:absolute;
color:#111;
border:1px solid #000000;
background: #000000;
opacity: 0.9;
color: white;
font-weight: bold;
font-size: small;
border:1px solid #000000;
border-radius: 25px;/*border-radius: 5px 100px 5px;*/
z-index:1;
left: 40px;
display:none;
padding:14px 15px;
margin-top:-56px;
margin-left:70px;
width:500px;
line-height:16px;line-height:20px;
}
控制器代码
def companies():
results=db.services(request.args(0))
rslts=db(db.company.services==results.id).select(db.company.ALL, orderby=db.company.company_name)
return locals()
查看代码
<script>
$(document).ready(function(){
$('.branch1').click(function(e) {
$(this).each(function(){
$('.contacts1').fadeIn();
e.preventDefault();
});
});
$('img#close').click(function(e)
{
$('.contacts1').fadeOut();
e.preventDefault();
});
});
</script>
<div class="comps">
<span class="companies">COMPANIES (A-F)</span><br /><br />
{{letters=['A', 'B', 'C', 'D', 'E', 'F']
for company in rslts:
if company.company_name[0] in letters:
company.company_name
}}
<a href="#" id="branch1" class="branch1 branches">{{=company.company_name}}</a><br />
<span class="contacts1">
<a href="#"><img src="{{=URL('static', 'images/close.png')}}" style="width: 50px; position: absolute; top:0px;right:0px;" id="close"/></a>
<div class="info" id="logo">
<img id="companyLogo" width="140px" src="{{=URL('download',args=company.logo)}}" /><br />
<span style="position: absolute; bottom:0px; left: 10px;">SESOA&trade</span>
</div>
<div class="info" style="padding-left:5px; border-left: solid 1px white;" id="details">
<span class="companyName">{{=company.company_name}}</span>
<hr class="divider" />
<span class="contact" id="cell">TEL: </spanM <strongstyle="color:green;">{{=company.tel}}</strong><br />
<span class="contact" id="cell">EM@IL: </span> <strong style="color:green;">{{=company.email}}</strong><br />
<span class="contact" id="cell">CELL: </span><strong style="color:green;">{{=company.cell}}</strong><br />
<span class="contact" id="fb">Facebook: </span> <strong style="color:green;">{{=company.facebook}}</strong><br />
<span class="contact" id="twit">Twitter: </span> <strong style="color:green;">{{=company.twitter}}</strong><br />
<a href="{{=company.website}}" target="_blank"><span class="contact" id="e_mail">WEBSITE: </span> <strong style="color:green;">{{=company.website}}</strong></span></a><br />
<span class="contact" id="cell">FAX: </span> <strong style="color:green;">{{=company.fax}}</strong><br />
<span class="contact" id="cell">LOCATION: </span> <strong style="color:green;">{{=company.located_at}}</strong><br />
</div>
</span>
{{pass}}
{{pass}}
</div>
点击此link第一手查看问题Contacts Problem Example
在点击处理程序中,联系人通过以下方式显示:
$('.contacts1').fadeIn()
但是在for
循环中,每个联系人得到一个"contacts1"class,所以上面的select或selects所有的联系人每当单击 link 时淡入。
相反,您必须为每个联系人添加一个唯一标识符,并且 select 只有在单击 link 时才添加该联系人。
尝试更改:
<a href="#" id="branch1" class="branch1 branches">{{=company.company_name}}</a><br />
<span class="contacts1">
至:
<a href="#" class="branch1 branches" data-id="{{=company.id}}">{{=company.company_name}}</a><br />
<span class="contacts1" id="{{=company.id}}">
请注意,公司 ID 添加为联系人元素的唯一 id
,并且添加相同的 ID 作为关联 link 的 data-id
属性。
然后,像这样设置点击处理程序:
$('.branch1').click(function(e) {
const id = $(this).data('id'); // Extract the data-id attribute of the link.
$('#' + id).fadeIn(); // Select the contact with that id.
e.preventDefault();
});
另请注意,在 HTML 页面中,每个 id
属性必须是唯一的,但您在每个循环中重复使用相同的 id
值(即 "branch1"、"close"、"logo")。您甚至可以在循环的单次迭代中多次重复使用 "cell" id
。目前还不清楚你是否需要所有这些 id
,但如果你确实需要它们中的任何一个,请确保它们是唯一的(例如,像 "{{='branch%s' % company.id}}"
)。
我正在使用 web2py 框架工作,这就是我想要实现的目标;
我在我的数据库中有不同地方的联系方式,这些不同地方的名称在页面中显示为links,我想要的是一个联系方式当我单击该地点的 link 名称时,该地点将显示在工具提示中。 但事实并非如此!发生的事情是,当我单击地点名称时,我会得到工具提示,其中包含不同地点的不同联系信息,这些信息堆叠在一起!
如上所述,我想要的是当我单击该地点的 link 名称时,该地点的详细联系信息将显示在工具提示中.,谁能帮我解决这个问题。
型号代码
db.define_table('services',
Field('service_name', requires=IS_NOT_EMPTY()),
format='%(service_name)s', migrate=False, fake_migrate=True)
db.define_table('company',
Field('logo', 'upload'),
Field('company_name', requires=IS_NOT_EMPTY()),
Field('services', 'reference services'),
#Field('tlamelo', 'reference tlamelo'),
Field('product', 'reference product'),
Field('tel', requires=IS_NOT_EMPTY()),
Field('email', requires=IS_NOT_EMPTY()),
Field('fax', requires=IS_NOT_EMPTY()),
Field('cell', requires=IS_NOT_EMPTY()),
Field('facebook', requires=IS_NOT_EMPTY()),
Field('twitter', requires=IS_NOT_EMPTY()),
Field('website', requires=IS_NOT_EMPTY()),
Field('postal_address', requires=IS_NOT_EMPTY()),
Field('located_at', requires=IS_NOT_EMPTY()), migrate=False, fake_migrate=True)
CSS 工具提示代码
#branch1 {outline:none; position: relative; font-weight: bold;}
#branch1 {text-decoration:none;}
span.contacts1
{
display:inline;
position:absolute;
color:#111;
border:1px solid #000000;
background: #000000;
opacity: 0.9;
color: white;
font-weight: bold;
font-size: small;
border:1px solid #000000;
border-radius: 25px;/*border-radius: 5px 100px 5px;*/
z-index:1;
left: 40px;
display:none;
padding:14px 15px;
margin-top:-56px;
margin-left:70px;
width:500px;
line-height:16px;line-height:20px;
}
控制器代码
def companies():
results=db.services(request.args(0))
rslts=db(db.company.services==results.id).select(db.company.ALL, orderby=db.company.company_name)
return locals()
查看代码
<script>
$(document).ready(function(){
$('.branch1').click(function(e) {
$(this).each(function(){
$('.contacts1').fadeIn();
e.preventDefault();
});
});
$('img#close').click(function(e)
{
$('.contacts1').fadeOut();
e.preventDefault();
});
});
</script>
<div class="comps">
<span class="companies">COMPANIES (A-F)</span><br /><br />
{{letters=['A', 'B', 'C', 'D', 'E', 'F']
for company in rslts:
if company.company_name[0] in letters:
company.company_name
}}
<a href="#" id="branch1" class="branch1 branches">{{=company.company_name}}</a><br />
<span class="contacts1">
<a href="#"><img src="{{=URL('static', 'images/close.png')}}" style="width: 50px; position: absolute; top:0px;right:0px;" id="close"/></a>
<div class="info" id="logo">
<img id="companyLogo" width="140px" src="{{=URL('download',args=company.logo)}}" /><br />
<span style="position: absolute; bottom:0px; left: 10px;">SESOA&trade</span>
</div>
<div class="info" style="padding-left:5px; border-left: solid 1px white;" id="details">
<span class="companyName">{{=company.company_name}}</span>
<hr class="divider" />
<span class="contact" id="cell">TEL: </spanM <strongstyle="color:green;">{{=company.tel}}</strong><br />
<span class="contact" id="cell">EM@IL: </span> <strong style="color:green;">{{=company.email}}</strong><br />
<span class="contact" id="cell">CELL: </span><strong style="color:green;">{{=company.cell}}</strong><br />
<span class="contact" id="fb">Facebook: </span> <strong style="color:green;">{{=company.facebook}}</strong><br />
<span class="contact" id="twit">Twitter: </span> <strong style="color:green;">{{=company.twitter}}</strong><br />
<a href="{{=company.website}}" target="_blank"><span class="contact" id="e_mail">WEBSITE: </span> <strong style="color:green;">{{=company.website}}</strong></span></a><br />
<span class="contact" id="cell">FAX: </span> <strong style="color:green;">{{=company.fax}}</strong><br />
<span class="contact" id="cell">LOCATION: </span> <strong style="color:green;">{{=company.located_at}}</strong><br />
</div>
</span>
{{pass}}
{{pass}}
</div>
点击此link第一手查看问题Contacts Problem Example
在点击处理程序中,联系人通过以下方式显示:
$('.contacts1').fadeIn()
但是在for
循环中,每个联系人得到一个"contacts1"class,所以上面的select或selects所有的联系人每当单击 link 时淡入。
相反,您必须为每个联系人添加一个唯一标识符,并且 select 只有在单击 link 时才添加该联系人。
尝试更改:
<a href="#" id="branch1" class="branch1 branches">{{=company.company_name}}</a><br />
<span class="contacts1">
至:
<a href="#" class="branch1 branches" data-id="{{=company.id}}">{{=company.company_name}}</a><br />
<span class="contacts1" id="{{=company.id}}">
请注意,公司 ID 添加为联系人元素的唯一 id
,并且添加相同的 ID 作为关联 link 的 data-id
属性。
然后,像这样设置点击处理程序:
$('.branch1').click(function(e) {
const id = $(this).data('id'); // Extract the data-id attribute of the link.
$('#' + id).fadeIn(); // Select the contact with that id.
e.preventDefault();
});
另请注意,在 HTML 页面中,每个 id
属性必须是唯一的,但您在每个循环中重复使用相同的 id
值(即 "branch1"、"close"、"logo")。您甚至可以在循环的单次迭代中多次重复使用 "cell" id
。目前还不清楚你是否需要所有这些 id
,但如果你确实需要它们中的任何一个,请确保它们是唯一的(例如,像 "{{='branch%s' % company.id}}"
)。