2015-03-08 55 views
0

我一直在寻找,寻找一个答案。我可能没有使用正确的搜索条件,并希望得到您的帮助。使用jQuery通过输入添加到表

我对编程非常陌生。这可能是一个非常简单的解决方案...我似乎无法在网站上找到它。现在我正在处理从用户获取输入后获取两个元素数组以显示在表中。基本上采用用户给出的两个数字,然后将它们放在表格的不同列中。

在这一点上,我可以让他们在表上,但我不能让他们给每个我添加新的时间在自己的行。他们只是被添加到同一行。

非常感谢您的帮助。

这里是我的Java/jQuery的

// this one adds new data to the row that I create. 
      var $newTd = $("<td>"); 

      var $smallArrayPartOne = $("<td>").text($firstnumber); 
      var $smallArrayPartTwo = $("<td>").text($secondnumber); 


      // This section creates my two different arrays 
      smallArray.push($firstnumber); 
      smallArray.push($secondnumber); 
      totalArray.push(smallArray); 


      // This is to get the numbers under the inputs 
      print = $("<p>").text(sum); 
      $(".totals").prepend(print); 

      // this clears the input boxes after I have clicked the button 
      $(".number-input input").val(""); 
      $(".other-number input").val(""); 

      // This is how I get the array in to the table. This gets it to show up right. It is not getting the html to show up how I would like it though. 
      $(".theTable").append($smallArrayPartOne); 
      $(".theTable").append($smallArrayPartTwo); 


      // I added this because when it was not there it would add data on to one row instead of creating a new one. Hopefully that gets it to work. 

和HTML

<html> 
<head> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
    <header> 
    </header> 

    <main> 
     <table style="width:50%" border="1" text-align="center" class = "theTable"> 
      <tr> 
       <th>First Number</th> 
       <th>Second Number</th> 
       </tr> 
       <tr> 
       <td>Test number</td> 
       <td>Second Test</td> 
       </tr> 
     </table> 
     </br> 
     </br> 
     <section class="number-input"> 
     <input type="integer"> 
     </section> 
     </br> 
     </br> 
     <section class="other-number"> 
     <input type="integer"> 
     <button>+</button></br> 
     </br> 
     <section class="addition"> 
     <button class="first">total number one</button> 
     <button class="second">total number two</button> 
     </section> 

     <section class="totals"> 
     </section> 

    </main> 

    <footer> 
    </footer> 

    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script src="app.js"></script> 
</body> 
</html> 
+0

一排是TR不是TD ...你在你的代码中没有一个新的TR ... – Umingo 2015-03-08 19:22:17

回答

0

一排是TR不是TD ...你无处代码中的一个新的TR ... 试这

$(".theTable").append($('<tr>').append($smallArrayPartOne)); 
+0

这工作像一个ch臂。非常感谢! – 2015-03-08 19:35:50