Question

我被赋予了一个任务，即制作2个HTML页面，一个是用户输入他/她的联系信息的表单，另一个是在表格中查看用户信息的页面。

我只需要使用这些语言（JavaScript，jquery，HTML，CSS，bootstrap）;不使用PHP / JSP，只使用客户端语言并且不应使用任何数据库。到目前为止，我已经做了很多。

$(function()
{
   $('#form').validate(
   {
    rules:
    {
	email:
	{required:true,
	email:true
	},
	gender:
    {required:true
	},
	cont:{
	required:true,
	number:true}
	}
   
   })

});
function onsumit(){
localStorage.setItem("input0",1);
var ip=document.getElementById("name");
 localStorage.setItem("input1", ip.value);
var ip2=document.getElementById("email");
 localStorage.setItem("input2", ip2.value);
var ip3=document.getElementById("cont");
 localStorage.setItem("input3", ip3.value);
var ip4=document.getElementById("gender");
 localStorage.setItem("input4", ip4.value);
var ip5=document.getElementById("comment");
 localStorage.setItem("input5", ip5.value);  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"
type="text/javascript"></script>
<div class="divmid text-center" id="divmid" >
<p id="head"></p>
<a> CONTACT FORM</a>
<form class="table-responsive" id="form" name="form" action="next.html" method="get" onsubmit="onsumit()" >
<table>
  <tr>
    <td>NAME:</td>
    <td><input type="text" name="name" id="name"required>*<p id="p1"></p></td>
  </tr>
  <tr>
    <td>Contcat no:</td>
    <td><input type="text" size="10" name="cont" id="cont"required>*<p id="p2"></p></td>
 </tr>
  <tr>
    <td>EMAIL:</td>
    <td><input type="text" name="email" id="email"required>*<p id="p3"></p></td>
 </tr>
  <tr>
    <td>Gender:</td>
    <td><select id="gender" name="gender" required>
      <option value="" >SELECT</option>
	  <option value="male">MALE</option>
      <option value="female">FEMALE</option>
    </select>*<p id="p4"></p></td>
		
  </tr>
  <tr>
	<td>comments:</td>
    <td> <textarea class="form-control" rows="5" id="comment" maxlength="100"></textarea>
	</td>
  </tr>
</table>
<label><input id="submit" type="submit" value="SUBMIT"></label>


</form>



</div>

现在这是第二个html页面。

function load(){
    var table = document.getElementById("tab2");
    var rowCount = table.rows.length;
    var colCount = table.rows[0].cells.length;    
    var validate_Noof_columns = (colCount - 1);
    var row = table.insertRow(1);
	for(var i=0; i < colCount; i++) {  
            	
            var text = localStorage.getItem("input"+i);
            var newcell = row.insertCell(i);
                if(i == (colCount - 1)) {
    newcell.innerHTML = "<INPUT type='button' value='X' id='work' onclick='removeLine(this)'/><INPUT type='button' value='&' onclick='removeRow(this)'/>"; break;
                }  else  {
                    newcell.innerHTML = text;
                    
                }
		}
function removeLine(lineItem) {
  var row = lineItem.parentNode.parentNode;
  row.parentNode.removeChild(row);
}
function removeRow(onclickTAG) {
    // Iterate till we find TR tag. 
    while ( (onclickTAG = onclickTAG.parentElement)  && onclickTAG.tagName != 'TR' );
            onclickTAG.parentElement.removeChild(onclickTAG);      
}
}

body {
      font: 20px Montserrat, sans-serif;
      line-height: 1.8;
      color: black;
  }
  p {font-size: 16px;}
  .margin {margin-bottom: 45px;}
  .bg-1 {
      background-color: #1abc9c; /* Green */
      color: #ffffff;
  }
  .bg-2 {
      background-color: #474e5d; /* Dark Blue */
      color: #ffffff;
  }
  .bg-3 {
      background-color: #ffffff; /* White */
      color: #555555;
  }
  .bg-4 {
      background-color: #2f2f2f; /* Black Gray */
      color: #fff;
  }
  .container-fluid {
      padding-top: 70px;
      padding-bottom: 70px;
  }
  .navbar {
      padding-top: 15px;
      padding-bottom: 15px;
      border: 0;
      border-radius: 0;
      margin-bottom: 0;
      font-size: 12px;
      letter-spacing: 5px;
  }
  .navbar-nav  li a:hover {
      color: #1abc9c !important;
  }
  
  #divmid {
	margin:20px;
	padding:20px;
	border:3px solid red;
  }
 table{
    text-align:left ;


}

th, td {
    padding: 20px;
	text-align:left;
}
textarea{
	max-height:300px;
	resize:none;
}
#div1{
text-align:center;
	
	
}
#tab2 {
    text-align:left ;
	border:2px solid red;
	margin-left:auto;
	margin-top:40px;
	margin-bottom:200px;

}
#pick{
 
 padding:100px;
	
	}

<style>
table, td,th{
    border: 1px solid black;
}
</style>
<body onload="load()">
<div id="div1">
<span id="div2">CONTACT LIST</span>

<table id="tab2">
  <tr>
    <th>S No.</th>
    <th>NAME</th>
	<th>CONTACT</th>
    <th>EMAIL</th>
	<th>GENDER</th>
    <th>COMMENTS</th>
	<th>EDIT</th>
  </tr>
</table>
</div>
  </body>

问题是我需要在每次用户输入表单中的新值时在第二页中创建一行，但是在做了什么，它只创建了一行并且总是用新值更新它。虽然我使用了本地存储，但我仍然被困在这里。

Answer 1

问题出在代码的第6行。传递给insertRow函数的参数1使用表的第一行实例化变量row。这样，每次在row变量中使用insertCell时，它都会更新第一行的值。我认为切换到rowCount + 1会完成这项工作。

function load(){
var table = document.getElementById("tab2");
var rowCount = table.rows.length;
var colCount = table.rows[0].cells.length;    
var validate_Noof_columns = (colCount - 1);
var row = table.insertRow(rowCount + 1);
for(var i=0; i < colCount; i++) {  

        var text = localStorage.getItem("input"+i);
        var newcell = row.insertCell(i);
            if(i == (colCount - 1)) {
newcell.innerHTML = "<INPUT type='button' value='X' id='work' onclick='removeLine(this)'/><INPUT type='button' value='&' onclick='removeRow(this)'/>"; break;
            }  else  {
                newcell.innerHTML = text;

            }
    }
function removeLine(lineItem) {
  var row = lineItem.parentNode.parentNode;
  row.parentNode.removeChild(row);
}
function removeRow(onclickTAG) {
    // Iterate till we find TR tag. 
    while ( (onclickTAG = onclickTAG.parentElement)  && onclickTAG.tagName != 'TR' );
            onclickTAG.parentElement.removeChild(onclickTAG);      
}
}

Answer 2

看看这段代码。我认为应该是你在寻找的东西。

每次提交表单时，我首先获取本地存储的值并将新条目添加为JSON。

在另一页上，我获取本地存储，转换值以从JSON字符串中获取对象，并使用该对象显示表中的信息。

希望这有帮助！

第一页：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    function onsumit() {
      if (typeof(Storage) !== "undefined") {
        // Exemple of str : {'d' : [{'name':'Mister A','cont':'1',email':'MisterA@test.com'},{'name':'Mister B','cont':'1','email':'MisterB@test.com'}]}
        var str = localStorage.getItem("contactinformation");
        var contactModel;
        if (str !== '') {
          contactModel = JSON.parse(str); 
        } else {
          contactModel = {
            d : []
          };
        }  
        contactModel.d[contactModel.d.length] = {
          name:$('#name').val(),
          cont:$('#cont').val(),
          email:$('#email').val()
        }
        localStorage.setItem("contactinformation",JSON.stringify(contactModel));
        return true;
      } else {
          // Sorry! No Web Storage support..
        return false;
      }

    }
  </script>
</head>
<body>
  <div class="divmid text-center" id="divmid" >
    <p id="head"></p>
      <a>CONTACT FORM</a>
      <form id="form" name="form" action="next.html" method="get" onsubmit="return onsumit();">
        <table>
          <tr>
            <td>NAME:</td>
            <td><input type="text" name="name" id="name">*</td>
          </tr>
          <tr>
            <td>Contcat no:</td>
            <td><input type="text" size="10" name="cont" id="cont">*</td>
          </tr>
          <tr>
            <td>EMAIL:</td>
            <td><input type="text" name="email" id="email">*</td>
          </tr>
        </table>
        <input id="submit" type="submit" value="SUBMIT">
      </form>
  </div>
</body>
</html>

第二页：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
    table, td,th{
      border: 1px solid black;
    }
    </style>
  </head>
  <body>
    <div id="div1">
      <span id="div2">CONTACT LIST</span>
      <table id="tab2">
        <tr>
          <th>NAME</th>
            <th>CONTACT</th>
          <th>EMAIL</th>
        </tr>
      </table>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        if (typeof(Storage) !== "undefined") {
          var str = localStorage.getItem("contactinformation");
          var info = JSON.parse(str);
          if (typeof(info.d) !== "undefined") {
            for (var x=0;x<info.d.length;x++) {
              $('#tab2').append('<tr><td>' + info.d[x].name + '</td><td>' + info.d[x].cont + '</td><td>' + info.d[x].email + '</td></tr>');
            }
          }
        }
      });
    </script>
  </body>
</html>

如何使用JavaScript每次添加和删除带有新值的新行？

2 个答案: