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

Add a row to my table using Javascript and MVC

本文关键字：添加 一行 我的 Javascript MVC 使用      更新时间：2023-09-26

我的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函数应该是什么。

以下是它的总体概念。

$('.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>");
});

这是一把粗糙的小提琴。

相关文章：