Question

我有一个表，其数据是动态填充的。每行都有一个下拉状态部分，用户可以从中选择一个值，根据所选值，必须显示一些输入框，但这些框应显示在下拉列表所在的行中。因此，如果下拉列表属于第一行，则该框应仅出现在第一行，如果下拉列表属于第二行，则该框应仅出现在第二行

目前，我正在使用的代码是在不同的行中随机显示输入框，而不考虑下拉位置

任何人都可以告诉我们如何纠正这个问题 HTML代码

<table class="table table-bordred table-striped">
  <thead>
    <th>NAME</th>
    <th>STATUS</th>
  </thead>
  <tbody>
    <?php foreach($student as $per_student): ?>
      <tr>
        <td><?php echo $per_student->name; ?></td>
        <td>
          <select class="can-dd" onchange="myFunction(this)" name="status">
            <option value="">STATUS</option>
            <option value="Accepted ">Accepted</option>
            <option value="Forwarded ">Forwarded </option>
            <option value="Schedule">Schedule </option>
            <option value="Custom">Custom</option> 
          </select>
          <div class="schedule">
            <input  type="text" placeholder="schedule" name="schedule">
            <button type="submit" class="btn btn-primary "  >SUBMIT</button>
          </div>

          <div class="custom">
            <input  type="text" placeholder="custom"  name="custom">
            <button type="submit" class="btn btn-primary "  >SUBMIT</button>
          </div>

          <div class="submit_value">
            <button type="submit" class="btn btn-primary "  >SUBMIT</button>
          </div>
        </td>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

脚本

<script type="text/javascript">
  function myFunction(selectObject) {
    var value = selectObject.value;
    if(value == 'Schedule'){
      jQuery('.custom').remove();
      jQuery('.submit_value').remove();
      $(".schedule").show();
    }
    else if(value == 'Custom'){     
      jQuery('.schedule').remove();
      jQuery('.submit_value').remove();
      $(".custom").show();
    }
    else{
      jQuery('.schedule').remove();
      jQuery('.custom').remove();
      $(".submit_value").show();  
    }
  }
</script>

Answer 1

您可以尝试这一点并检查它是否适合您。我对代码进行了一些更改，但不是通过php生成代码，而是通过JavaScript执行此操作，但它不会产生太大的影响。

在您的html文件中，您生成的行中，子div共享相同的ID submit_value，custom，schedule。您应该更改要动态生成的ID或完全删除它们。我删除了它们，因为对我来说，它们似乎没必要。

这是一个经过修改的HTML文件。

<tr>
  <td>--- PHP GENERATED NAME ---</td>
  <td>
    <select class="can-dd" onchange="myFunction(event)" name="status">
      <option value="">STATUS</option>
      <option value="Accepted ">Accepted</option>
      <option value="Forwarded ">Forwarded </option>
      <option value="Schedule">Schedule </option>
      <option value="Custom">Custom</option>
    </select>
    <div class="schedule">
      <input  type="text" placeholder="schedule" name="schedule">
      <button type="submit" class="btn btn-primary "  >SUBMIT</button>
    </div>

    <div class="custom">
      <input  type="text" placeholder="custom"  name="custom">
      <button type="submit" class="btn btn-primary "  >SUBMIT</button>
    </div>

    <div class="submit_value">
      <button type="submit" class="btn btn-primary "  >SUBMIT</button>
    </div>
  </td>
</tr>

这是一个经过修改的javascript代码。第一部分只是生成html，你可以跳过它。 myFunction部分通过event.target选择适当的元素，因此您可以定位文档的特定部分而不是整个文档。

event.target在您的情况下是select元素，因此如果您在其上调用parentNode，则会得到相应的行。通过使用某个类名作为搜索查询调用该行上的querySelector，您将搜索具有该类的元素，但仅在当前行的子树中搜索。

＆＃13;

// just to dynamically generate the table
const generateTable = n => {
  const tBody = document.querySelector('tbody');

  for (let i = 0; i < n; i++) {
    let htmlCode = `<tr>
      <td>Some name</td>
      <td>
        <select class="can-dd" onchange="myFunction(event)" name="status">
          <option value="">STATUS</option>
          <option value="Accepted ">Accepted</option>
          <option value="Forwarded ">Forwarded </option>
          <option value="Schedule">Schedule </option>
          <option value="Custom">Custom</option>
        </select>
        <div class="schedule">
          <input  type="text" placeholder="schedule" name="schedule">
          <button type="submit" class="btn btn-primary "  >SUBMIT</button>
        </div>

        <div class="custom">
          <input  type="text" placeholder="custom"  name="custom">
          <button type="submit" class="btn btn-primary "  >SUBMIT</button>
        </div>

        <div class="submit_value">
          <button type="submit" class="btn btn-primary "  >SUBMIT</button>
        </div>
      </td>
    </tr>`
    tBody.innerHTML += htmlCode;
  }
}

function myFunction(e) {
  var value = e.target.value;
  if(value == 'Schedule'){
    e.target.parentNode.querySelector('.custom').remove();
    e.target.parentNode.querySelector('.submit_value').remove();
  }
  else if(value == 'Custom'){
    e.target.parentNode.querySelector('.schedule').remove();
    e.target.parentNode.querySelector('.submit_value').remove();
  }
  else{
    e.target.parentNode.querySelector('.schedule').remove();
    e.target.parentNode.querySelector('.custom').remove();
  }
}

generateTable(4);

＆＃13;

<table id="mytable" class="table table-bordred table-striped">
  <thead>
    <th>NAME</th>
    <th>STATUS</th>
  </thead>
  <tbody>

  </tbody>
</table>

＆＃13;

Answer 2

使用以下代码也许这有助于您

<table id="mytable" class="table table-bordred table-striped">
  <thead>
    <th>NAME</th>
    <th>STATUS</th>
  </thead>
  <tbody>
    <?php foreach($student as $per_student): ?>
      <tr>
        <td><?php echo $per_student->name; ?></td>
        <td>
          <select class="can-dd status_value"  name="status">
            <option value="">STATUS</option>
            <option value="Accepted ">Accepted</option>
            <option value="Forwarded ">Forwarded </option>
            <option value="Schedule">Schedule </option>
            <option value="Custom">Custom</option> 
          </select>
          <div class="schedule input_box">
            <input  type="text" placeholder="schedule" name="schedule">
            <button type="submit" class="btn btn-primary "  >SUBMIT</button>
          </div>

          <div class="custom input_box">
            <input  type="text" placeholder="custom"  name="custom">
            <button type="submit" class="btn btn-primary "  >SUBMIT</button>
          </div>

          <div class="submit_value input_box">
            <button type="submit" class="btn btn-primary "  >SUBMIT</button>
          </div>
        </td>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#mytable").on("change", ".status_value", function(){
        var selDiv = jQuery(this).parent("td");
        var selVal = jQuery(this).val();
        if(selVal == 'Schedule'){
            selDiv.find(".input_box").hide();
            selDiv.find(".schedule").show();
        } 
        else if(selVal == 'Custom'){
            selDiv.find(".input_box").hide();
            selDiv.find(".custom").show();
        } 
        else {
            selDiv.find(".input_box").hide();
            selDiv.find(".submit_value").show();
        }
    });
});
</script>

我必须从所有字段中删除ID，并根据特定原始

的类设置jQuery更改事件

Answer 3

我不是专家，仍处于学习阶段，但我想我可以尝试为此提供一个可能的解决方案。

您已经为“计划”和“计划”等ID名称提供了有效的名称，因为它们在HTML中区分大小写。但是，在通过CSS调用这些函数时，它们被视为不区分大小写，如https://www.w3.org/TR/selectors-3/#casesens

中所述

因此，当通过jQuery'#schedule'使用CSS #idname时，可以考虑任何名为id = schedule或Schedule的标记。当有多个具有相同ID的标签时，结果会根据浏览器而有所不同。提到：How jQuery works when there are multiple elements with the same "id"?

尝试为所有元素提供唯一ID并尝试代码..它应该可以解决问题。

无法显示有关下拉值更改的数据

3 个答案: