[英]How to add two text boxes texts to html table with button click and increment rows dynamically?
I have a drop-down list, two textboxes, add button and a table. 我有一个下拉列表,两个文本框,添加按钮和一个表。 There are two things which I need to do.
我需要做两件事。 First thing is, fill one textbox with the drop-down list's selected text and the user will enter a value in second text box.
第一件事是,用下拉列表的选定文本填充一个文本框,用户将在第二个文本框中输入一个值。 I could find a solution for that part and it is done.
我可以找到该部分的解决方案,并且已经完成。 The second part is, I need to add the texts in those two textboxes to an HTML table with a button click in javascript or jquery.
第二部分是,我需要通过单击javascript或jquery中的按钮,将这两个文本框中的文本添加到HTML表中。 The table rows must increase by one with the button click and textboxes texts.
通过单击按钮和文本框文本,表格行必须增加一。 Can someone please help me.
有人可以帮帮我吗。 I am new to scripts and that is why I find it difficult to do this.
我是脚本新手,所以我很难做到这一点。 Thanks in advance.
提前致谢。 Below is what I have done already.
以下是我已经完成的工作。
Two text boxes and Add Button with the Table. 两个文本框和带有表的添加按钮。
<div class="form-group">
<div class="col-md-2">
</div>
<div class="col-md-2">
@Html.Editor("CompTxt", new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @style = "width:80px" } })
</div>
<div class="col-md-2">
@Html.Editor("ValTxt", new { htmlAttributes = new { @class = "form-control", @style = "width:80px" } })
</div>
<div class="col-md-2">
<input class="btnAdd btn btn-primary" style="width:80px" type="button" name="name" value="Add" onclick="insertRow();"/>
</div>
</div>
<div class="form-group">
<div class="col-md-2"></div>
<div class="col-md-7">
<table id="CompTable" class="table table-striped">
<thead>
<tr>
<th>
@Html.DisplayName("Description")
</th>
<th>
@Html.DisplayName("Value")
</th>
<th>
@Html.DisplayName("Action")
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
@Html.Editor("CompDes", new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @style = "width:80px" } })
</td>
<td>
@Html.Editor("Val", new { htmlAttributes = new { @class = "form-control", @style = "width:80px" } })
</td>
<td>
@Html.ActionLink("Remove", "RemoveRow")
</td>
</tr>
</tbody>
</table>
</div>
</div>
Javascript code to copy dropdown text to textboxes. 将下拉文本复制到文本框的Javascript代码。
<script>//copy dropdown text to textbox
$(document).ready(function () {
$('#ddlCompositions').change(function () {
$('#CompTxt').val($(this).find("option:selected").text())
});
});
</script>
you can find answers in the next articles 您可以在下一篇文章中找到答案
append a row to your table Add table row in jQuery 在表格中追加一行在jQuery中添加表格行
select and edit table cells How to select and change value of table cell with jQuery? 选择和编辑表格单元格如何使用jQuery选择和更改表格单元格的值? or Using jQuery to edit individual table cells
或使用jQuery编辑单个表格单元格
button click event handling How to Handle Button Click Events in jQuery? 按钮单击事件处理如何在jQuery中处理按钮单击事件? or https://api.jquery.com/click/
或https://api.jquery.com/click/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.