使用jquery通过输入添加到表

时间:2015-03-08 19:18:40

标签: jquery html

我一直在寻找并寻找答案。我可能没有使用正确的搜索条件,非常感谢您的帮助。

我是编程新手。这可能是一个非常简单的解决方案......我似乎无法在网站上找到它。现在我正在努力获取一个两元素数组,以便在从用户那里获取输入后显示在表中。基本上接受用户给出的两个数字,然后将它们放在表格的单独列中。

此时我可以让他们进入桌面,但是每次添加新的时候我都无法让他们进入自己的行。它们只是添加到同一行。

非常感谢你的帮助。

这是我的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>

1 个答案:

答案 0 :(得分:0)

一行是TR而不是TD ......你的代码中没有任何新的TR ... 试试这个

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