Question

我搜索了Stackoverflow并找到了很多答案，我可以通过jQuery或简单的内联js显示/隐藏下拉列表中的字段。但我的问题是在桌子内使用它。

首先让我们保持简单并使用内联简单js而不是jQuery。我想如果选择recaptcha，那么私有和公钥字段将是可见的。我使用一个表，所以应该隐藏整行。如果应隐藏这些字段以避免表格中的行之间存在间隙，则表单的其余部分应该变为高于紧接选择菜单。但它不适用于行。并且只有第二个字段在/不可见，因为我在字段而不是tr上添加了样式。（仅用于测试第一个用于tr和第二个我用于字段以查看发生了什么，但只有第二个工作。）如何设置它适用于行删除，其余的形式将是上层以避免表格中有两个空白行？关于如何使用jQuery而不是内联简单js来解决它的问题也很受欢迎，因为我的最终目标是使用jQuery。

<tr class="something1">
<td class="left">Activate Captcha: </td>
<td class="right"><select name="activate_captcha" onchange="if (this.value=='recaptcha'){this.form['recaptcha'].style.visibility='visible'}else{this.form['recaptcha'].style.visibility='hidden'};">
<option value="none">None</option>
<option value="recaptcha">ReCaptcha</option>
</select>
</td>

</tr>
<tr class="something1" id="recaptcha" style="visibility:hidden;">
<td class="left">ReCaptcha Public Key: </td>
<td class="right"><input type="text" size="40" name="pub_key" value="" /></td>

</tr>
<tr class="something1">
<td class="left">ReCaptcha Private Key: </td>
<td class="right"><input type="text" id="recaptcha" style="visibility:hidden;" size="40" name="priv_key" value="" /></td>
</tr>

</tr>
<tr class="something1">
<td class="left">This row should come up under dropdown if rows above are invisible: </td>
<td class="right"><input type="text" value="" /></td>
</tr>

Answer 1

ID必须是唯一的，因此您不能拥有多个class="recaptcha"。将它们更改为this.form['recaptcha'].style.visibility = 'hidden';。

然后改变

recaptcha = this.form.getElementsByClassName('recaptcha');
for (i = 0; i < recaptcha.length; i++) {
    recaptcha[i].style.visibility = 'hidden';
}

为：

$(this.form).find('.recaptcha').css('visibility', 'hidden');

在jQuery中，这变为：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table>
    <tr class="something1">
      <td class="left">Activate Captcha:</td>
      <td class="right">
        <select name="activate_captcha" onchange="$(this.form).find('.recaptcha').css('visibility', this.value=='recaptcha' ? 'visible' : 'hidden');">
          <option value="none">None</option>
          <option value="recaptcha">ReCaptcha</option>
        </select>
      </td>

    </tr>
    <tr class="something1 recaptcha" style="visibility:hidden;">
      <td class="left">ReCaptcha Public Key:</td>
      <td class="right">
        <input type="text" size="40" name="pub_key" value="" />
      </td>

    </tr>
    <tr class="something1">
      <td class="left">ReCaptcha Private Key:</td>
      <td class="right">
        <input type="text" class="recaptcha" style="visibility:hidden;" size="40" name="priv_key" value="" />
      </td>
    </tr>

    </tr>
    <tr class="something1">
      <td class="left">This row should come up under dropdown if rows above are invisible:</td>
      <td class="right">
        <input type="text" value="" />
      </td>
    </tr>
  </table>
</form>

完整的代码可以是：

pkg_ver=$(
    python -c 'import sys,json; print(json.load(sys.stdin)["version"])' \
    < package.json
)

Answer 2

您没有任何名称为recaptcha的表单，因此您无法真正使用this.form['recaptcha']，但是，由于您拥有id，因此您可以使用document.getElementById获取特定元素的函数，从那里你的代码是相同的。

点击此处：

<table>
<tr class="something1">
<td class="left">Activate Captcha: </td>
<td class="right"><select name="activate_captcha" onchange="if (this.value=='recaptcha'){document.getElementById('recaptcha').style.visibility='visible'}else{document.getElementById('recaptcha').style.visibility='hidden'};">
<option value="none">None</option>
<option value="recaptcha">ReCaptcha</option>
</select>
</td>

</tr>
<tr class="something1" id="recaptcha" style="visibility:hidden;">
<td class="left">ReCaptcha Public Key: </td>
<td class="right"><input type="text" size="40" name="pub_key" value="" /></td>

</tr>
<tr class="something1">
<td class="left">ReCaptcha Private Key: </td>
<td class="right"><input type="text" id="recaptcha" style="visibility:hidden;" size="40" name="priv_key" value="" /></td>
</tr>

<tr class="something1">
<td class="left">This row should come up under dropdown if rows above are invisible: </td>
<td class="right"><input type="text" value="" /></td>
</tr>
</table>

Answer 3

相反，为了在线添加代码，我更喜欢在运行时添加它。

我从可见性更改为显示，因为您要求删除空白行。

我的建议是：

＆＃13;

// Polyfill for Internet Explorer 8
if(!("nextElementSibling" in document.documentElement)){
  Object.defineProperty(Element.prototype, "nextElementSibling", {
    get: function(){
      var e = this.nextSibling;
      while(e && 1 !== e.nodeType)
        e = e.nextSibling;
      return e;
    }
  });
}

window.addEventListener('DOMContentLoaded', function (e) {
  [].forEach.call(document.querySelectorAll('tr.something1 select'), function (element, index) {
    element.addEventListener('change', function (e) {
      if (this.value == 'recaptcha') {
        this.closest('tr').nextElementSibling.style.display = 'block';
        this.closest('tr').nextElementSibling.nextElementSibling.style.display = 'block';
        this.closest('tr').nextElementSibling.nextElementSibling.nextElementSibling.style.display = 'block';
      } else {
        this.closest('tr').nextElementSibling.style.display = 'none';
        this.closest('tr').nextElementSibling.nextElementSibling.style.display = 'block';
        this.closest('tr').nextElementSibling.nextElementSibling.nextElementSibling.style.display = 'block';
      }
    })
  });
});

＆＃13;

<table>
    <tbody>
    <tr class="something1">
        <td class="left">Activate Captcha:</td>
        <td class="right"><select name="activate_captcha">
            <option value="none">None</option>
            <option value="recaptcha">ReCaptcha</option>
        </select>
        </td>

    </tr>
    <tr class="something1" style="display:none;">
        <td class="left">ReCaptcha Public Key:</td>
        <td class="right"><input type="text" size="40" name="pub_key" value=""/></td>

    </tr>
    <tr class="something1"  style="display:block;">
        <td class="left">ReCaptcha Private Key:</td>
        <td class="right"><input type="text" id="recaptcha" size="40" name="priv_key"
                                 value=""/></td>
    </tr>

    </tr>
    <tr class="something1"  style="display:block;">
        <td class="left">This row should come up under dropdown if rows above are invisible:</td>
        <td class="right"><input type="text" value=""/></td>
    </tr>
    </tbody>
</table>

＆＃13;

如何在下拉列表更改中显示/隐藏字段？

3 个答案: