如何将内部 html 与其他动态对象对齐 - javascript

Question

我有动态复选框和文本框，它还通过内部 html 显示值。但是，这些值未与其正确的文本框和复选框对齐，这使得选择时变得混乱。

有没有办法在每个对象后放置分隔符或边框或对齐以正确分隔值？

Here is the output image

function populate(model, destination) {
    var mod = document.getElementById(model);
    var des = document.getElementById(destination);
    var cri = document.getElementById("criteria");
    var qty = document.getElementById("qty");

    var optionArray = [];
    if (mod.value == "Model-A") {
        des.innerHTML = "";
        if (cri) cri.innerHTML = "";
        if (qty) qty.innerHTML = "";
        optionArray = ["Dog", "Cat"];
    } else if (mod.value == "Model-B") {
        des.innerHTML = "";
        if (cri) cri.innerHTML = "";
        if (qty) qty.innerHTML = "";
        optionArray = ["Fish", "Bird"];
    }

    for (var option in optionArray) {
        if (optionArray.hasOwnProperty(option)) {
            var pair = optionArray[option];
            var checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.name = pair;
            checkbox.value = pair;
            des.appendChild(checkbox);

            var label = document.createElement("label");
            label.htmlFor = pair;
            label.appendChild(document.createTextNode(pair));

            des.appendChild(label);
            des.appendChild(document.createElement("br"));
        }
    }

    updateCriteria();
}

function updateCriteria() {
    var text = "";
    var cri = document.getElementById("criteria").value;
    var models = document.getElementsByTagName("label");
    var model = "";
    var criteria = document.getElementById("criteria");
    var qty = document.getElementById("qty");

    for (var i = 0; i < models.length; i++) {
        var br = document.createElement("br");
        var qtytextbox = document.createElement("input");
        var wrapper = document.createElement("span");
        model = models[i].innerText;

        if (model == "Dog") {
            wrapper.className = model;
            qtytextbox.className = model;
            wrapper.innerText =
                "They can read our emotions—if we’re happy, sad or angry.\n";
            criteria.appendChild(wrapper);
            criteria.appendChild(br);
            qty.appendChild(qtytextbox);
            qty.appendChild(br);
        } else if (model == "Cat") {
            wrapper.className = model;
            qtytextbox.className = model;
            wrapper.innerText =
                "They are inquisitive, friendly, playful, active, loving and independent.\n";
            criteria.appendChild(wrapper);
            criteria.appendChild(br);
            qty.appendChild(qtytextbox);
            qty.appendChild(br);
        }
    }
}

<table>
<tr>
  <td> Choose one: </td><td>
      <select id="model" name="model" onchange="populate(this.id, 'destination')" >
        <option value="select">--Select Animal--</option>
        <option value="Model-A">Pets</option>
       <option value = "Model-B"> Model-B </option>
      </select> 
   </td>
</tr>
</table>
<table>
 <tr>
  <th><center> Animal: </th></center>
  <th><center> Characteristic: </th></center>
  <th><center> Others: </th></center>
 </tr> 
 <tr>
  <td><center><div id="destination" style = "width:230px; word-wrap: break-word"></center></div></td>
  <td><center><div id="criteria" style = "width:350px; word-wrap: break-word"></center></div></td>
  <td><center><div id = "qty" required></td></center>
 
 </tr>

Answer 1

根据评论部分的建议，您需要为所选模型的每个实体附加一个新的 <tr>。为此，您可以创建一个空的 "template" 行，为每个实体克隆它并用适当的数据填充其 .destination、.criteria 和 .qty。我会这样做：

const data = {
  "Model-A": {
    options: [
      { name: "Dog", characteristics: "They can read our emotions—if we’re happy, sad or angry.\n" },
      { name: "Cat", characteristics: "They are inquisitive, friendly, playful, active, loving and independent.\n" }
    ]
  },
  "Model-B": {
    options: [
      { name: "Fish", characteristics: "Fish characteristics" },
      { name: "Bird", characteristics: "Bird characteristics" }
    ]
  },
}

function createRow(option, tableRowClassName) {
  const row = document.getElementById('template').cloneNode(true);
  const dest = row.querySelector('.destination');
  const cri = row.querySelector('.criteria');
  const qty = row.querySelector('.qty');
  
  createDestination(dest, option);
  createCharacteristics(cri, option);
  createQty(qty, option);
 
  row.id = `template_${option.name}`;
  row.classList.add(tableRowClassName);
  
  return row;
}

function createDestination(container, option) {
  const checkbox = document.createElement("input");
  const label = document.createElement("label");
  const id = `checkbox_${option.name}`;
  
  checkbox.type = "checkbox";
  checkbox.name = option.name;
  checkbox.value = option.name;
  checkbox.id = id;
  label.htmlFor = id;
  label.innerHTML = option.name;
  
  container.appendChild(checkbox);
  container.appendChild(label);
}

function createCharacteristics(container, option) { 
  const wrapper = document.createElement("span");
  wrapper.innerHTML = option.characteristics;
  container.appendChild(wrapper);
}

function createQty(container, option) {  
  const qtytextbox = document.createElement("input");
  qtytextbox.placeholder = option.name;
  qtytextbox.name = `qty_${option.name}`
  container.appendChild(qtytextbox);
}

function populate(value) {
  const model = data[value];
  const tableFragment = document.createDocumentFragment();
  const table = document.getElementById('result-table');
  const tableRowClassName = 'added-row';
  
  // reset table
  Array
    .from(table.querySelectorAll('.' + tableRowClassName))
    .forEach(row => row.remove());
  
  model.options.forEach((option) => {
    const row = createRow(option, tableRowClassName);
    tableFragment.appendChild(row);
  });
  
  table.appendChild(tableFragment);
}

#template {
  display: none;
}

#result-table {
  border-collapse: collapse;
}

#result-table td {
  border: 1px solid grey;
}

<table>
  <tr>
    <td> Choose one: </td>
    <td>
      <select id="model" name="model" onchange="populate(this.value)" >
        <option value="select">--Select Animal--</option>
        <option value="Model-A">Pets</option>
        <option value = "Model-B"> Model-B </option>
      </select>
    </td>
  </tr>
</table>

<table id="result-table">
  <tr>
    <th><center> Animal: </center></th>
    <th><center> Characteristic: </center></th>
    <th><center> Others: </center></th>
  </tr> 
  
  <tr id="template">
    <td>
      <center>
        <div 
          class="destination" 
          style = "width:230px; word-wrap: break-word">
        </div>
      </center>
    </td>
    
    <td>
      <center>
        <div 
          class="criteria" 
          style = "width:350px; word-wrap: break-word">
        </div>
      </center>
    </td>
    
    <td>
      <center>
        <div class="qty"></div>
      </center>
    </td>
    
  </tr>
</table>

如何将内部 html 与其他动态对象对齐 - javascript

How to align inner html with other dynamic objects - javascript

html

javascript

css

innerhtml