以下是指向site，stylesheet和javascript的链接。
我正在尝试使用提交的表单值在javascript中创建和设置div，然后将其附加到表格中的下一个可用单元格。
更具体地说，脚本抓取表单值onsubmit，找到第一个可用行（4个div到一行），找到第一个可用单元格，创建div并设置样式，然后将其附加到表中。如果它具有正确的类和id，那么当页面刷新时，div应该与其他人一起滑入。
表单值indexLink是div发送给你的url，而imageLink是div的背景图像。
我的问题是：我是否正确导航和操作DOM？我的功能是否在桌面上导航？如果我的代码中有任何明显的错误，我会很感激修复它们的一些提示。谢谢！
哦，我的css目前只与webkit兼容。
编辑：这是代码，对于绒毛抱歉：
HTML：
<!DOCTYPE html>
<html>
<head>
<title>project site</title>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<!-- useless navbar -->
<div id="navbar">
<a class="navLink" href="http://www.netflix.com/WiMovie/Drinking_Buddies/70272917?trkid=13462061">Drinking Buddies</a>
<a class="navLink" href="https://animebytes.tv/">AnimeBytes</a>
<a class="navLink">Nothing</a>
</div>
<!-- table containing projectDivs -->
<table id="projectDivContainer">
<tr>
<td><div class="projectDiv" id="div0">
<a class="projectDivLink" href="http://google.com"></a>
</div>
</td>
<td><div class="projectDiv" id="div1">
<a class="projectDivLink" href="http://google.com"></a>
</div>
</td>
<td><div class="projectDiv" id="div2">
<a class="projectDivLink" href="http://google.com"></a>
</div>
</td>
</tr>
</table>
<!-- div containg form used in javascript -->
<div id="newProjectFormContainer">
<h4 style="text-align: center;">submit a new project<h4/>
<form id="newProjectForm" style="margin-left: 10px;">
project name: <input type="text" name="projectName" value=" "><br>
index link:        <input type="text" name="indexLink" value=""><br>
image link:       <input type="text" name="imageLink" value=""><br>
<input type="submit" value"submit" style="position:relative;left: 206px;">
</form>
</div>
</body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->
的CSS：
body {
padding: 0;
margin: 0;
}
#navbar {
height: 50px; width: 100%;
background: #B33030;
font-family: helvetica;
position: fixed;
z-index: 2;
}
.navLink {
color: white;
text-decoration: none;
position: relative;
float: left;
margin: 15px 10px 10px 10px;
}
.navLink:hover {
text-decoration: underline;
}
#projectDivContainer {
height: 750px; width: 950px;
/*border-style: solid;
border-width: 2px;
border-color: gray; */
margin: 0px 0px 0px 0px;
overflow: hidden;
display: block;
float: left;
position: relative;
top: 51px; left: 0%;
}
.projectDiv {
cursor: pointer;
height: 250px; width: 190px;
border-radius: 3px;
background-size: 190px 250px;
margin: 10px 10px 10px 10px;
box-shadow: ;
float: left;
position: relative;
top: 50px; left: 50px;
-webkit-animation: slide .75s;
-webkit-animation-timing-function: cubic-bezier(0,0,0,1);
-webkit-transition: -webkit-transform .1s ease-in-out;
}
.projectDiv:hover{
-webkit-transform: scale(1.1);
}
.projectDiv:active{
height: 250px; width: 190px;
}
.projectDivLink{
display: block;
height: 250px; width: 190px;
border-radius: 3px;
background: red;
opacity: 0;
}
#div0 {
background-image: url('http://www.eatbrie.com/large_posters_files/Killbill13.jpg');
}
#div1 {
background-image: url('http://www.impawards.com/tv/posters/mad_men_xlg.jpg');
}
#div2 {
background-image: url('http://www.cigarettestime.com/gallery/default/original/20465/365px-Marlboro_logo.png?1326977198');
}
#div3 {
background-image: url('http://www.impawards.com/tv/posters/portlandia.jpg');
}
#newProjectFormContainer {
height: 500px; width: 300px;
margin: 0px 60px 0px 0px;
background: #B33030;
border-radius: 3px;
float: right;
position: relative;
right: 1%; top: 111px;
color: white;
font-family: helvetica;
}
#newProjectForm{
}
@-webkit-keyframes slide {
from {top: 1200px;opacity: 0.01;}
to {top:50px;opacity:1;}
}
javascript：
var i=0;
window.onload = function(){
document.getElementById('newProjectForm').onsubmit = function() {
//collect all the form values, no use for projectName yet
var projectName = document.getElementById('newProjectForm').projectName.value;
indexLink = document.getElementById('newProjectForm').indexLink.value;
imageLink = document.getElementById('newProjectForm').imageLink.value;
table = document.getElementById('projectDivContainer');
console.log(projectName);
console.log(indexLink);
console.log(imageLink);
function searchRow() {
for(j=0;j<table.rows[i].cells.length;j++) {
if(!table.rows[i].cells[j]) { //find the next available cell
//create the elements for the cell
var div = document.createElement('div');
td = document.createElement('td');
a = document.createElement('a');
//style the elements and give them attributes(the form values)
a.className = "projectDivLink";
a.setAttribute("href", indexLink);
div.className = "projectDiv";
div.setAttribute("id", "div"+table.rows[i].cells.length);
document.getElementById("div"+table.rows[i].cells.length).style.backgroundImage = "url(imageLink)";
console.log(table.rows[i].cells[2]);
//begin appending here, building the cell first, then the div, then the link
table.rows[i].appendChild(td);
table.rows[i].cells[j].appendChild(div);
table.rows[i].cells[j].div.appendChild(a);
}
}
}
function searchTable() {
//begin navigating the table containing the projectDivs
if(table.rows[i].cells.length<5) { //check how many cells ex0ist in a row
searchRow();
} else {
i = i+1; //move to the next row, begin again
searchTable();
}
}
}
}