时间戳

首页 > 解决方案 > 动态更改表格数据的文本

javascript - 动态更改表格数据的文本

问题描述

我正在尝试根据选择标记输入的选择来更改表格元素的文本。

这是它的jsFiddle。

<html>

<body>
    <table>
        <tr>
            <td style="text-align: left;">People - 2
                <div id="people" class="panel">
                    <div class="panel-body">
                        <form method="POST" id="update">
                            <b>Person - 1</b>
                            <table class="table table-condensed">
                                <tbody>
                                    <tr>
                                        <td>
                                            <b>First Name:</b> <input type="text" id="firstName" name="firstName" value="Jonny Boy"> <br>
                                            <b>Last Name:</b> <input type="text" id="lastName" name="lastName" value="Smith"> <br>
                                        </td>
                                        <td>
                                            $<input type="text" id="cost" name="cost" size="3" maxlength="3" value="25">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><b>Wristband(s):</b>
                                            <select name="wristSelection" class="wristbands">
                                    <option value="No Wrist Bands">No Wrist Bands</option>
                                    <option value="1 X $50">1 X $50</option>
                                    <option value="2 X $50">2 X $50</option>
                                    <option value="3 X $50">3 X $50</option>
                                    <option value="4 X $50" selected="">4 X $50</option>
                                </select>
                                        </td>
                                        <td>$200.00</td>
                                    </tr>
                                    <tr>
                                        <td><b>Friday Event:</b>
                                            <select id="friday" name="friday">
                                    <option value="Yes" selected="">Yes</option>
                                    <option value="No">No</option>
                                </select>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td><button type="submit" class="btn">Update Person 1</button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                        <form method="POST" id="golferUpdate">
                            <b>Person - 2</b>
                            <table class="table table-condensed">
                                <tbody>
                                    <tr>
                                        <td>
                                            <b>First Name:</b> <input type="text" id="firstName" name="firstName" value="William"> <br>
                                            <b>Last Name:</b> <input type="text" id="lastName" name="lastName" value="Jefferson"> <br>
                                        </td>
                                        <td>
                                            $<input type="text" id="cost" name="cost" size="3" maxlength="3" value="150">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><b>Wristband(s):</b>
                                            <select name="wristSelection" class="wristbands">
                                    <option value="No Wrist Bands">No Wrist Bands</option>
                                    <option value="1 X $50">1 X $50</option>
                                    <option value="2 X $50" selected="">2 X $50</option>
                                    <option value="3 X $50">3 X $50</option>
                                    <option value="4 X $50">4 X $50</option>
                                </select>
                                        </td>
                                        <td>$100.00</td>
                                    </tr>
                                    <tr>
                                        <td><b>Friday Event:</b>
                                            <select id="friday" name="friday">
                                    <option value="Yes">Yes</option>
                                    <option value="No" selected="">No</option>
                                </select>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td><button class="btn">Update Person 2</button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
            </td>
            <td>$475.00</td>
        </tr>
    </table>
    <script type="text/javascript">
        var wrist = document.getElementsByClassName("wristbands");
        var i;

        for (i = 0; i < wrist.length; i++) {
            wrist[i].addEventListener("change", function() {
                var content = this.nextElementSibling;
                if (wrist[i].value == "No Wrist Bands") {
                    content.innerHTML = "$0.00";
                } else {
                    var wristbands = wrist[i].value.split(" ");
                    var amount = wristbands[2].replace("$", "");
                    var qty = wristbands[0];
                    content.innerHTML = "$" + amount * qty + ".00";
                }
            });
        }

    </script>
</body>

因此，如上所示，我有一个选择标签来选择您要购买的腕带数量。我希望它在以下 td 上更新总成本。我在它下面有javascript函数。我正在尝试在更改时添加一个事件侦听器，它将获取所选值的值，将其拆分，然后将它们组合在一起以获得总数。我有另一个类似的 js 函数，它做同样的事情，但它是在点击时工作的。

我对 JS 还很陌生，有点卡住了。任何帮助将不胜感激。

标签： javascripthtmladdeventlistener

解决方案

我发现代码有两个问题。

  1. 当调用'change'回调时，this是<select>标签，它没有任何兄弟。我想你想要<td>的价格。所以，我会把它改成this.parentElement.nextElementSibling，这样它就会抓住第一个的父<td>级<select>。

  2. 在回调内部引用的时候wrist[i]，for循环已经完成，值为i2，所以当wrist[i]在回调内部使用时，确实是在抓取wrist[2]，这当然是未定义的。我会使用 event.currentTarget 这是触发更改事件的地方。

    for (i = 0; i < wrist.length; i++) { wrist[i].addEventListener("change", function(_event) { var content = this.parentElement.nextElementSibling; var selectTag = _event.currentTarget; if (selectTag.value == "No Wrist Bands") { content.innerHTML = "$0.00"; } else { var wristbands = selectTag.value.split(" "); var amount = wristbands[2].replace("$", ""); var qty = wristbands[0]; content.innerHTML = "$" + amount * qty + ".00"; } }); }

推荐阅读