javascript - 当下拉列表中的 "select"发生变化时，按 ID 填充表 TD-6ren

javascript - 当下拉列表中的 "select"发生变化时，按 ID 填充表 TD

转载作者：可可西里更新时间：2023-11-01 14:54:27

我的任务是创建一个动态表，用于在表中比较不同经纪人的服务。鉴于网站规模和客户要求，当用户从 thanle 标题的下拉菜单中进行选择时，我需要能够更改为表 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>

<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>

最佳答案

查看此 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>

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;
        }
    });

});

关于javascript - 当下拉列表中的 "select"发生变化时，按 ID 填充表 TD，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12815485/

文章推荐： javascript - 使用鼠标指针简单地交换水平和垂直滚动

文章推荐： java - JobControl 和 JofConf.setMapperClass() 错误

文章推荐： c++ - 如何为 native C++(非托管)开发配置 Visual Studio？

文章推荐： hadoop - 在一列上选择不同但返回所有列

java - 背景随着淡入淡出而过渡/变化
嘿伙计们。实现背景变化(基本上是幻灯片放映)和过渡效果的常见方法有哪些。我想每隔一段时间改变complte文档背景。我是一名 ASP.net 开发人员，并且希望大部分内容都可以在 ASP 中实现。
c++ - 指针随时间的改进/变化？
也许，指针已经在修改过程中指向 auto_ptr 的常规指针指向 unique_ptr 和 shared_ptr 我只是想知道已经开发出来的新型指针是否完全覆盖了旧版本(或者您可能认为存在内存泄漏问题
Android Fragments 变化
我使用 Android Studio 构建 Android 应用。我的问题是:当 fragment 改变时，应用程序崩溃。控制台输出[控制台] 01-06 18:35:21.952 27756-
javascript - 将鼠标悬停在表行上时如何放大表行？ - 变化
****澄清**我做了这个 [Fiddle] ( http://jsfiddle.net/sggPv/10/ ) 来帮助澄清情况。该脚本起初适用于两个表格，但随后当您点击 slider 并将新表格加
html - float 变化
我有图标，单击它会将新的 div(列)添加到 div 容器。问题是，当新的 div(列)出现时，按钮不会向右移动。是否可以以某种方式仅在 div 内添加 position:fixed？这是我的几个屏
Java编译时接口(interface)变化
我是 Java 新手，继承了现有的 Android 应用程序。原始开发人员选择使用常量接口(interface)。我的问题是我需要更改其中一些常量来编译生产应用程序与开发应用程序。如果我手动修改一些
iOS10 UIColor 变化
在 Apple developer Document 中，我在 UIColor 中发现了一些新东西。 If your app was linked on or after iOS 10 and whe
iphone - ShareKit 变化？
我没有经常使用 ShareKit，但我只想拥有三个共享选项:Facebook、Twitter 和电子邮件。 ShareKit 提供了更多选项，包括更多按钮。但是，我不想要“更多”选项，只想要三个。在
javascript - 高效检测单页应用中的 DOM 变化
我正在构建一个 JS 库，其中一个用例要求我在 DOM 更改时触发一个事件，特别是如果它是一个单页应用程序，例如:github search bar 经过一番研究，我遇到了MutationObserv
Excel 检测并跟踪任何工作表中的(值)变化
我已经设法编写了一个代码来检测任何工作表中特定单元格的值变化，但我一直在努力构建检测和跟踪范围(值)变化的东西。例如，如果用户决定复制和粘贴某个范围的数据(假设超过 1 个单元格)，它不会被宏捕获。
audio - 复杂的音频音量随 ffmpeg 变化
使用 ffmpeg ，我们可以对音频电平进行多少控制？例如，我想在程序的时间轴上映射一个“M”形: t0 - t1 : fade in from 0 to 1 t1 - t2 : play at fu
IE8 中的 jQuery on() 变化
使用 jQuery 1.7.1，我尝试为下拉列表上的更改事件创建一个事件处理程序。下拉列表会动态添加到 DOM 中。似乎在大多数浏览器上都能很好地工作，但是哦，奇怪的 IE8 想要变得困难。有解决方法
delphi - 调整非客户区大小后如何反射(reflect)变化？
我想制作一个具有可选边框大小的自定义控件。请参阅下面的代码。边框绘制在非客户区，其宽度可以是 0、1 或 2 像素。我已经在 WM_NCPAINT 中成功完成了边框绘制。问题是，在更改控制边框大小的属
javascript - 检测 URL 变化
我知道这个问题之前已经被问过，而且我实际上已经找到了一些我已经实现的解决方案。不幸的是，我没能得到我想要的。我以前没有做过AngularJS，我想做的是: 检测网址何时更改根据网址更改的内容进行一
AngularJS 观察 DOM 变化
我有一个 auto-carousel 指令，它循环访问链接元素的子元素。但是，子级尚未加载到 DOM 中，因为它们的 ng-if 表达式尚未解析。如何确保父指令知道其 DOM 树已发生更改？
android - 如何观察协程流的 ContentProvider 变化
我有一个流程可以通过内容提供商从数据库中获取数据。 fun getDataFlow(): Flow { return flow { emit(Result.Loading)
javascript - 文本随动画 jquery 变化
我有一些有效的代码，但有时它只是“跳转”到其他文本而不考虑间隔。该代码基本上按时间间隔更改标题的文本。 var text = ["text1", "text2", "text3","text4","
android - 如何监听 SwitchPreferenceCompat 变化
我正在尝试将 onCLick 监听器添加到我的 PreferenceScreen 上的开关，但它不起作用。我尝试了 Java 教程中的代码并将其转换为 Kotlin，但由于某种原因它无法正常工作。这
build - 升级ffmpeg时处理ffmpeg库接口(interface)变化
我们目前正在尝试升级我们的程序使用的 ffmpeg 版本。跳跃很大，因为我们目前使用的是 ffmpeg 0.8，最新版本是 1.2。在这些测试中，我使用的是(让我说)我发现的令人惊叹的软件包 her
android - 如何观察协程流的 ContentProvider 变化
我有一个流程可以通过内容提供商从数据库中获取数据。 fun getDataFlow(): Flow { return flow { emit(Result.Loading)

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 当下拉列表中的 "select"发生变化时，按 ID 填充表 TD