javascript - 使用 Javascript 和 MVC 在我的表中添加一行

Question

我的 MVC 视图上有一张这样的表

 <table class="PBHEP table table-bordered">
    <thead>
        <tr>
            <th style="text-align: center">Compute PBHEP Offsets</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th style="text-align: center">Present Conditions</th>
        </tr>
    </tbody>
</table>
<table class="PDHEPparams table table-bordered">
    <tbody>
        <tr>
            <th></th>
            <th>Township</th>
            <th>Range</th>
            <th>Section</th>
            <th>Crop</th>
            <th>Acres</th>
        </tr>
        <tr id="rowtoadd">
            <td style =" text-align:center">
                <input  type="button" class="btn btn-small btn-primary" value="+" onclick="addrow"></td>
            <td style =" text-align:center">
                <input class="input-small" type="text" placeholder="Township"></td>
            <td style =" text-align:center">
                <input class="input-small" type="text" placeholder="Range"></td>
            <td style =" text-align:center">
                <input class="input-small" type="text" placeholder="Section"></td>
            <td style =" text-align:center">
                <select></select></td>
            <td style =" text-align:center">
                <input class="input-small" type="text" placeholder="Acres"></td>
        </tr>
    </tbody>
</table>

如何在单击按钮时向此表添加新行？我的按钮 onclick 的 javascript 函数应该是什么。

Answer 1

这是它的总体思路。

$('.btn').on('click', function() {
  var township = $('.input-small').eq(0).val();
  var range = $('.input-small').eq(1).val();
  var section = $('.input-small').eq(2).val();
  var acres = $('.input-small').eq(3).val();
  $('.PDHEPparams tbody').append("<tr><td>" + township + "</td><td>" + range + "</td><td>" + section + "</td><td>" + acres + "</td></tr>");
});

这是一个粗略的小提琴。