将文本框值复制到动态表内的另一个文本框

Question

我有一个文本框，用户可以在其中输入所有者的名称，我想自动复制它，或者在按钮上单击动态表中的文本框。我怎样才能使用javascript做到这一点？我需要在第一个文本框中输入的值的确切副本是动态表中文本框的值。请帮助

window.onload = function() {
  var ModelArray = {
    "Mammals": {
      "Dog": {
        "Dog Food": ["Milk"]
      },
      "Cat": {
        "Cat food": ["Milk"]
      },
      "Tiger": {
        "Meat": ["Water"]
      },
      "Monkey": {
        "Banana": ["Water"]
      }
    },
    "Reptiles": {
      "Snake": {
        "Rat": ["None"]
      },
      "Turtle": {
        "Plant": ["Water"]
      },
      "Lizard": {
        "Insects": ["None"]
      },
      "Crocodile": {
        "Meat": ["Water"]
      }
    }
  }


  //Get html elements
  var model = document.getElementById("MODEL");
  var destination = document.getElementById("destination");
  var criteria = document.getElementById("criteria");
  var material_form = document.getElementById("material_form");

  //load models
  for (var model_value in ModelArray) {
    model.options[model.options.length] = new Option(model_value, model_value);
  }

  //model changed -> destination value
  model.onchange = function() {

    destination.length = 1;
    criteria.length = 1;
    material_form.length = 1;

    if (this.selectedIndex < 1) {
      criteria.options[0].text = ""
      return;
    }
    destination.options[0].text = "Select Animal..."
    for (var destination_value in ModelArray[this.value]) {
      destination.options[destination.options.length] = new Option(destination_value, destination_value);
    }
    if (destination.options.length == 2) {
      destination.selectedIndex = 1;
      destination.onchange();
    }
  }

  //destination changed -> criteria value
  model.onchange();
  destination.onchange = function() {

    criteria.length = 1;
    material_form.length = 1;

    if (this.selectedIndex < 1) {
      criteria.options[0].text = ""
      return;
    }
    criteria.options[0].text = ""
    for (var criteria_value in ModelArray[model.value][this.value]) {
      criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
    }
    if (criteria.options.length == 2) {
      criteria.selectedIndex = 1;
      criteria.onchange();
    }
  }

  //criteria changed -> material form value
  criteria.onchange = function() {
    material_form.length = 1;

    if (this.selectedIndex < 1) {
      material_form.options[0].text = ""
      return;
    }
    material_form.options[0].text = ""
    var material_form_value = ModelArray[model.value][destination.value][this.value];

    for (var i = 0; i < material_form_value.length; i++) {
      material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
    }
    if (material_form.options.length == 2) {
      material_form.selectedIndex = 1;
      // material_form.onchange();
    }
  }
}

function SaveData() {

  var DataList = [];
  var table = document.getElementById("bod");
  var rowLength = table.rows.length;

  //loops through rows    
  for (i = 0; i < rowLength; i++) {

    //gets cells of current row  
    var oCells = table.rows.item(i).cells;

    //gets amount of cells of current row
    //var cellLength = oCells.length-2;

    //loops through each cell in current row
    var item = {};
    item["destination"] = oCells.item(0).innerHTML;
    item["criteria"] = oCells.item(1).innerHTML;
    item["material"] = oCells.item(2).innerHTML;

    DataList.push(item)
  }

  var request = new XMLHttpRequest()
  request.open("POST", "DOM_SAVE.php", true)
  request.setRequestHeader("Content-type", "application/json")
  request.send(JSON.stringify(DataList));

  console.log(DataList);
}


function addRow() {
  var table = document.getElementById("bod");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);


  row.insertCell(0).innerHTML = destination.value;
  row.insertCell(1).innerHTML = criteria.value;
  row.insertCell(2).innerHTML = material_form.value;
  row.insertCell(3).innerHTML = '<input type ="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
  row.insertCell(4).innerHTML = '<input type ="text" name = "owner">';
}

function deleteRow(obj) {
  var index = obj.parentNode.parentNode.rowIndex;
  var table = document.getElementById("myTableData");
  table.deleteRow(index);
}

Owner: <input type="text" name="field10" id="field10" readonly="true" />
<td><b>MODEL: </b></td>
<td>
  <select id="MODEL" NAME="MODEL" size="1" required>
    <option value="" selected="selected">Select Model...</option>
  </select>
</td>
<b>DESTINATION: </b></td>
<tr>
  <td>
    <select ID="destination" NAME="destination[]" required>
      <option value="" selected="selected">Select Model First...</option>
    </select>
    <select ID="criteria" NAME="criteria[]" contenteditable="true" required>
    </select>
    <select ID="material_form" NAME="material_form[]" required>
    </select>
    <input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
  </td>
</tr>
</center>
<div id="mydata" style="text-align: center">
  <center>
    <table id="myTableData" border="1" style="text-align:center;"><br>
      <thead>
        <tr>
          <td style="padding: 0 10px 0 10px"><b>DESTINATION</b></td>
          <td style="padding: 0 10px 0 10px"><b>CRITERIA</b></td>
          <td style="padding: 0 10px 0 10px"><b>MATERIAL FORM</b></td>
          <td style="padding: 0 10px 0 10px"><b>.............</b></td>
          <td style="padding: 0 10px 0 10px"><b>Owner Name</b></td>
        </tr>
  </center>
  </thead>
  <tbody id="bod">
  </tbody>
  </table>
</div><br>
<center>
  <input type="submit" name="submit" value="Submit">

Answer 1

可以。我知道这个问题已经过时，但是希望它将对将来的搜索者有所帮助。

使用javascript，您可以将值从一个文本框复制到另一个文本框：

HTML：

<input type='text' onblur="sync()" id='from'/>
<input type='text' id='to'/>

JavaScript

<script type="text/javascript">

function sync() {
src = document.getElementById("from");
dest = document.getElementById("to");
dest.value = src.value;

}
</script>