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>");
});

这是一个粗略的fiddle。

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

1 个答案: