javascript - 存储与javascript循环的输入值

Question

我有一个列输入字段，<td>由于这个每个字段都在循环中，Row我input得到了一个javascript它存储字段local storage的input字段，但问题是这个javascript只适用于一个input例如：

我有五行，由于input自动为 5 行生成了循环字段

我正在寻找的是为每一行存储不同的值..由于这个脚本它没有单独为每一行实现

代码

<input type="text" id="txt_1" onkeyup='saveValue(this);'/> 

Javascript

<script type="text/javascript">
        document.getElementById("txt_1").value = getSavedValue("txt_1");    // set the value to this input
        document.getElementById("txt_2").value = getSavedValue("txt_2");   // set the value to this input
        /* Here you can add more inputs to set value. if it's saved */

        //Save the value function - save it to localStorage as (ID, VALUE)
        function saveValue(e){
            var id = e.id;  // get the sender's id to save it . 
            var val = e.value; // get the value. 
            localStorage.setItem(id, val);// Every time user writing something, the localStorage's value will override . 
        }

        //get the saved value function - return the value of "v" from localStorage. 
        function getSavedValue  (v){
            if (!localStorage.getItem(v)) {
                return "";// You can change this to your defualt value. 
            }
            return localStorage.getItem(v);
        }
</script>

图像显示

代码

<table class="table table-hover table-striped table-bordered" id="input-group">
<thead ><tr >
 <th class="text-right"><?php echo "Contact No."; ?></th>
  <th><?php echo "Followup 1 Date"; ?>
    </th></tr></thead>
    <tbody>
    <?php
      if (empty($enquiry_list)) {
       ?>
       <?php
        } else {
        foreach ($enquiry_list as $key => $value) {
         $current_date = date("d/m/Y");
         $next_date = $value["next_date"];
         if (empty($next_date)) { $next_date = $value["follow_up_date"];
          }if ($next_date < $current_date) {                                      
          $class = "class='danger'";} else {
           $class = ""; } ?>
           <td class="mailbox-name"><?php echo $value['contact']; ?> </td>
   <td class="mailbox-name" >
    <div  style="width:200px" style="height:200px" >
     <input id="txt_<?= $row[id] ?>" onkeyup='saveValue(this);' 
      autocomplete="off" type="text" class="form-control"   /></div></td>
      </tr> </tr>
      <?php }}?> </tbody> </table>

标签： javascriptalgorithmdebugging

Answer 1

var inputGroup = document.getElementById('input-group');
var inputs = inputGroup.getElementsByTagName('input');

for(i=0;i<inputs.length;i++)
{
	var id = inputs[i].getAttribute('id');
	inputs[i].value = getSavedValue(id);
} 
 
//Save the value function - save it to localStorage as (ID, VALUE)
function saveValue(e){
    var id = e.id;  // get the sender's id to save it . 
    var val = e.value; // get the value. 
    localStorage.setItem(id, val);// Every time user writing something, the localStorage's value will override . 
}

//get the saved value function - return the value of "v" from localStorage. 
function getSavedValue  (v){
    if (!localStorage.getItem(v)) {
        return "";// You can change this to your defualt value. 
    }
    return localStorage.getItem(v);
}

<table id="input-group">
  <tr>
  	<th>Text 1</th>
  	<th><input type="text" id="txt_1" onkeyup='saveValue(this);'/> </th>
  </tr>
  <tr>
  	<th>Text 2</th>
  	<th><input type="text" id="txt_2" onkeyup='saveValue(this);'/> </th>
  </tr>
  <tr>
  	<th>Text 3</th>
  	<th><input type="text" id="txt_3" onkeyup='saveValue(this);'/> </th>
  </tr>
  <tr>
  	<th>Text 4</th>
  	<th><input type="text" id="txt_4" onkeyup='saveValue(this);'/> </th>
  </tr>
  <tr>
  	<th>Text 5</th>
  	<th><input type="text" id="txt_5" onkeyup='saveValue(this);'/> </th>
  </tr>
</table>