当下拉列表中的“选择”更改时，按 ID 填充表 TD
Posted
技术标签:
【中文标题】当下拉列表中的“选择”更改时，按 ID 填充表 TD【英文标题】：Populate table TD by ID when "select" changes in dropdown 【发布时间】：2012-09-30 16:43:01 【问题描述】：我的任务是创建一个动态表，用于在表中比较不同代理的服务。鉴于网站大小和客户要求，当用户从标题中的下拉菜单中进行选择时，我需要能够更改表 td 的内容。
我已经用我迄今为止汇总的最新版本更新了下面的代码。
我需要帮助的任务是：
脚本只监听 col2 如何将图像添加到数组博客？ 默认情况下，每列 eq Broker 1、Broker 2、Broker 3 加载下拉列表中的一项表格
<html>
<head>
<title>Comparison Chart Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
<table class="zebra" size="100%" border="1">
<thead>
<tr>
<th class="center">Broker Vergleichsliste</th>
<th>
<select class="col2 selectBroker">
<option>Broker 1</option>
<option>Broker 2</option>
<option>Broker 3</option>
<option>Broker 4</option>
<option>Broker 5</option>
</select>
</th>
<th>
<select class="col3 selectBroker">
<option>Broker 1</option>
<option>Broker 2</option>
<option>Broker 3</option>
<option>Broker 4</option>
<option>Broker 5</option>
</select>
</th>
<th>
<select class="col4 selectBroker">
<option>Broker 1</option>
<option>Broker 2</option>
<option>Broker 3</option>
<option>Broker 4</option>
<option>Broker 5</option>>
</select>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Broker</strong></td>
<td class="col2 blogo"></td>
<td class="col3 blogo"></td>
<td class="col4 blogo"></td>
</tr>
<tr>
<td><strong>Reguliert</strong></td>
<td class="col2 regulated"></td>
<td class="col3 regulated"></td>
<td class="col4 regulated"></td>
</tr>
<tr>
<td><strong>securityicherheit</strong></td>
<td class="col2 security"></td>
<td class="col3 security"></td>
<td class="col4 security"></td>
</tr>
<tr>
<td><strong>Verrechnungskonto</strong></td>
<td class="col2 account"></td>
<td class="col3 account"></td>
<td class="col4 account"></td>
</tr>
<tr>
<td><strong>Mindesteinlage</strong></td>
<td class="col2 deposit"></td>
<td class="col3 deposit"></td>
<td class="col4 deposit"></td>
</tr>
<tr>
<td><strong>Software</strong></td>
<td class="col2 software"></td>
<td class="col3 software"></td>
<td class="col4 software"></td>
</tr>
<tr>
<td><strong>Handelseinheit</strong></td>
<td class="col2 einheit"></td>
<td class="col3 einheit"></td>
<td class="col4 einheit"></td>
</tr>
<tr>
<td><strong>Margin Forex</strong></td>
<td class="col2 margin"></td>
<td class="col3 margin"></td>
<td class="col4 margin"></td>
</tr>
<tr>
<td><strong>Kommission pro Halfturn</strong></td>
<td class="col2 comission"></td>
<td class="col3 comission"></td>
<td class="col4 comission"></td>
</tr>
<tr>
<td><strong>Spreads</strong></td>
<td class="col2 spread"></td>
<td class="col3 spread"></td>
<td class="col4 spread"></td>
</tr>
<tr>
<td><strong>Finanzierungskosten</strong></td>
<td class="col2 fcost"></td>
<td class="col3 fcost"></td>
<td class="col4 fcost"></td>
</tr>
<tr>
<td><strong>Orderarten</strong></td>
<td class="col2 orders"></td>
<td class="col3 orders"></td>
<td class="col4 orders"></td>
</tr>
<tr>
<td><strong>Telefonhandel</strong></td>
<td class="col2 phone"></td>
<td class="col3 phone"></td>
<td class="col4 phone"></td>
</tr>
<tr>
<td><strong>Mobile Trading</strong></td>
<td class="col2 mobile"></td>
<td class="col3 mobile"></td>
<td class="col4 mobile"></td>
</tr>
<tr>
<td><strong>Produktpalette</strong></td>
<td class="col2 products"></td>
<td class="col3 products"></td>
<td class="col4 products"></td>
</tr>
<tr>
<td><strong>Besonderheiten</strong></td>
<td class="col2 special"></td>
<td class="col3 special"></td>
<td class="col4 special"></td>
</tr>
<tr>
<td><strong>ECN / MM / STP / DMA</strong></td>
<td class="col2 art"></td>
<td class="col3 art"></td>
<td class="col4 art"></td>
</tr>
<tr>
<td><strong>Fazit</strong></td>
<td class="col2 fazit"></td>
<td class="col3 fazit"></td>
<td class="col4 fazit"></td>
</tr>
<tr>
<td><strong>Zur Webseite</strong></td>
<td class="center"><a href="/goto/forex/" target="_blank" class="button-more">Konto eröffnen</a></td>
<td class="center"><a href="#" target="_blank" class="button-more">Konto eröffnen</a></td>
<td class="center"><a href="#" target="_blank" class="button-more">Konto eröffnen</a></td>
</tr>
</tbody>
</table>
</body>
JS
<script language="JavaScript">
var data =
"brokers":
"broker": [
"name": "Broker 1",
"blogo": "Broker1 Logo",
"regulated": "YES",
"security": "Mindep",
"account": "Konto",
"deposit": "Einlage",
"software": "Software",
"einheit": "H Einheit",
"margin": "100:1",
"comission": "Komission",
"spread": "Spreads",
"fcost": "F Kosten",
"orders": "Orderarten",
"phone": "YES/No",
"mobile": "Yes/No",
"products": "Products",
"special": "Besonderheiten",
"art": "MM/DMA",
"fazit": "Fazit"
,
"name": "Broker 2",
"blogo": "Broker2 Logo",
"regulated": "NO",
"security": "Mindep",
"account": "Konto",
"deposit": "Einlage",
"software": "Software",
"einheit": "H Einheit",
"margin": "200:1",
"comission": "Komission",
"spread": "Spreads",
"fcost": "F Kosten",
"orders": "Orderarten",
"phone": "YES",
"mobile": "Yes/No",
"products": "Products",
"special": "Besonderheiten",
"art": "DMA/STP",
"fazit": "Fazit"
,
"name": "Broker 3",
"blogo": "Broker3 Logo",
"regulated": "YES",
"security": "Mindep",
"account": "Konto",
"deposit": "Einlage",
"software": "Software",
"einheit": "H Einheit",
"margin": "Forex margin",
"comission": "Komission",
"spread": "Spreads",
"fcost": "F Kosten",
"orders": "Orderarten",
"phone": "NO",
"mobile": "Yes/No",
"products": "Products",
"special": "Besonderheiten",
"art": "ECN/MM/DMA",
"fazit": "Fazit"
,
"name": "Broker 4",
"blogo": "Broker4 Logo",
"regulated": "NO",
"security": "Mindep",
"account": "Konto",
"deposit": "Einlage",
"software": "Software",
"einheit": "H Einheit",
"margin": "Forex margin",
"comission": "Komission",
"spread": "Spreads",
"fcost": "F Kosten",
"orders": "Orderarten",
"phone": "Green Tick",
"mobile": "Yes/No",
"products": "Products",
"special": "Besonderheiten",
"art": "MM/DMA",
"fazit": "Fazit"
,
"name": "Broker 5",
"blogo": "Broker5 Logo",
"regulated": "YES",
"security": "Mindep",
"account": "Konto",
"deposit": "Einlage",
"software": "Software",
"einheit": "H Einheit",
"margin": "Forex margin",
"comission": "Komission",
"spread": "Spreads",
"fcost": "F Kosten",
"mobile": "Yes/No",
"products": "Products",
"special": "Besonderheiten",
"art": "ECN/STP",
"fazit": "Fazit"
]
$(".selectBroker").change(function()
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col2"))
whichCol = "col2";
$.each(data.brokers.broker, function(i, v)
if (v.name == jthis.val())
$("td." + whichCol + ".name").html(v.name);
$("td." + whichCol + ".blogo").html(v.blogo);
$("td." + whichCol + ".regulated").html(v.regulated);
$("td." + whichCol + ".security").html(v.security);
$("td." + whichCol + ".account").html(v.account);
$("td." + whichCol + ".deposit").html(v.deposit);
$("td." + whichCol + ".software").html(v.software);
$("td." + whichCol + ".einheit").html(v.einheit);
$("td." + whichCol + ".margin").html(v.margin);
$("td." + whichCol + ".comission").html(v.comission);
$("td." + whichCol + ".spread").html(v.spread);
$("td." + whichCol + ".fcost").html(v.fcost);
$("td." + whichCol + ".orders").html(v.orders);
$("td." + whichCol + ".phone").html(v.phone);
$("td." + whichCol + ".mobile").html(v.mobile);
$("td." + whichCol + ".products").html(v.products);
$("td." + whichCol + ".special").html(v.special);
$("td." + whichCol + ".art").html(v.art);
$("td." + whichCol + ".fazit").html(v.fazit);
return;
);
);
</script>
</html>
【问题讨论】：
通常当你绞尽脑汁去做以前从未做过的事情时，这可能是一个坏主意。为什么不将外部数据保存为 XML 或 JSON 格式？您始终可以从 XML 或 JSON 数据重建 HTML。哎呀，如果您还将 XSLT 与 XML 一起使用，它可以即时完成。另外，这与Java有什么关系吗？你的意思是用Javascript标记它吗？ 嗨@Neil，感谢您的回复。我想我是打算用javascript标记它，我的错。如果我知道如何去做，我会很乐意使用 XML 文件。我不像其他许多人那样是 javascript 或 XML 向导。这似乎是尝试通过 td 类进行操作的正确方法，或者就像现在一样。但我不能使用 txtarea 来填充单元格。任何帮助表示赞赏 我想我已经找到了使用 getElementById 和 innerHtml 的方法。我只是不确定如何以最好的方式添加它。 您只需将 innerHtml 设置为字符串即可更改 dom。要追加，请执行element.innerHtml += appendedHtml
@Neil 再次感谢。我做了一些更多的研究，并且非常接近拥有我想要的东西。我已将函数更改为function changeContent(which)document.getElementById("blogo").innerHTML = brokerlogo[which.selectedIndex]; id 为 blogo 的表 td 现在显示来自 brokerlogo[0] 的文本。我现在被困在修复 document.bv24compare.blogo.value=brokerlogo[document.bv24compare.selectbox.selectedIndex] 以在选择更改时调用数组中的下一项。有什么建议吗？
【参考方案1】：
看到这个jsfiddle。您当然需要扩展它以完成代码。可能有更好的方法可以做到这一点，但它确实有效，而且我在几分钟内就搞定了。
HTML
<table class="table table-bordered table-striped">
<tr>
<th>
<select class="col1 selectBroker">
<option>Broker 1</option>
<option>Broker 2</option>
<option>Broker 3</option>
</select>
</th>
<th>
<select class="col2 selectBroker">
<option>Broker 1</option>
<option>Broker 2</option>
<option>Broker 3</option>
</select>
</th>
<th>
<select class="col3 selectBroker">
<option>Broker 1</option>
<option>Broker 2</option>
<option>Broker 3</option>
</select>
</th>
</tr>
<tr>
<td class="col1 isTotallyAwesome"></td>
<td class="col2 isTotallyAwesome"></td>
<td class="col3 isTotallyAwesome"></td>
</tr>
<tr>
<td class="col1 foo"></td>
<td class="col2 foo"></td>
<td class="col3 foo"></td>
</tr>
</table>
JS
var data =
"brokers":
"broker": [
"name": "Broker 1",
"isTotallyAwesome": "yes",
"foo": "no",
"name": "Broker 2",
"isTotallyAwesome": "no",
"foo": "yes",
"name": "Broker 3",
"isTotallyAwesome": "true",
"foo": "no"
]
$(".selectBroker").change(function()
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col1"))
whichCol = "col1";
$.each(data.brokers.broker, function(i, v)
if (v.name == jthis.val())
$("td." + whichCol + ".isTotallyAwesome").html(v.isTotallyAwesome);
$("td." + whichCol + ".foo").html(v.foo);
return;
);
);
【讨论】：
非常感谢！只剩下两个问题，也许你能帮助我？ 1：我是否仍然可以使用 您可以将.change 的一些功能分解为它自己的函数，然后在页面加载时调用它，或者您可以将该数据设置为表的初始值。至于您的第二个问题，jquery 可以更改图像的src，只需查找并将源添加到数据数组中即可。
请投票并接受这个答案，因为它对你有帮助。
嗨@Eonasdan。再次感谢你的帮助。我打算提高答案，但需要更多的声誉点。我肯定会的。至于实现，我在向 var 数据数组添加更多列时遇到问题。出于某种原因，尽管我已经设置了 td 并添加了另一个 `$("td." + whichCol + ".new").html(v.new); 但在我添加它们的那一刻，它在 Dreamweaver 中引发了一个异常。 ' - 但是，我会从这里解决问题，并感谢您抽出宝贵的时间。 ;)
获取您的数组并将其复制到 [json lint)[jsonlint.com/] 这将有助于验证您的 json。你至少应该能够接受这个作为答案以上是关于当下拉列表中的“选择”更改时，按 ID 填充表 TD的主要内容，如果未能解决你的问题，请参考以下文章