如何更新主表当前行的输入类型文本中的值从模态窗口表中获取值
Posted
技术标签:
【中文标题】如何更新主表当前行的输入类型文本中的值从模态窗口表中获取值【英文标题】：How to update the values in input type text of the current row of main table getting the values from modal window table 【发布时间】：2020-04-03 16:49:04 【问题描述】：我有一个表格，其中包含输入类型的文本行，每行有一个按钮来打开模式窗口。
我在添加行按钮的帮助下在主表中添加行。 在模态窗口中，我有另一个表，其中包含数据行和一个单选按钮。
我想在单选按钮的帮助下获取所选行列的值。我正在获取选定的行值，但总是在主表的第一行获取这些值。
我想在主表的当前行中获取选定的值，我的意思是我打开模式窗口的那一行。
以下是我的表格的html代码............
<div class="row pt-3">
<div class="table-responsive col-md-10">
<table id="tarifftable" class="table table-sm table-bordered table-hover">
<thead class="thead-light">
<tr>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","TDID"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","TDSCCODE"); ?></th>
<th></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","SCDESC"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","TDRATE"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","TDREMARKS"); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="text-control input-sm" readonly name="tdid[]" id="tdid"
value="1" style="text-align:right;width:50px;" maxlength="4" />
</td>
<td>
<input type="text" class="text-control" name="tdsccode[]" id="tdsccode"
style="width:100px;" maxlength="50" />
</td>
<td>
<a href="#" data-toggle="modal" data-target="#serviceModal" class="btn btn-info btn-xs">
<i class="fa fa-search"></i>
</a>
</td>
<td>
<input type="text" class="text-control" name="tdscdesc[]" id="tdscdesc" readonly
style="width:200px;" maxlength="250" />
</td>
<td>
<input type="number" class="text-control" name="tdrate[]" id="tdrate"
style="text-align:right;width:90px" maxlength="17" />
</td>
<td>
<input type="text" class="text-control" name="tdremarks[]" id="tdremarks"
style="width:200px" maxlength="100" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 pl-0">
<button type="button" name="addrow" id="addrow" class="btn btn-success fa fa-plus btn-sm"></button>
</div>
</div>
以下是添加新行的 javascript 代码......
<script>
$(document).ready(function()
var allInputs = document.querySelectorAll('table tr input[name="tdid[]"]');
var rowcount = allInputs[allInputs.length - 1].value;
var count=parseInt(rowcount);
$(document).on('click','#addrow', function()
count=count+1;
var html_code='';
html_code +='<tr id="row_id_'+count+'">';
html_code += '<td><input type="text" class="text-control input-sm" name="tdid[]" id="tdid" readonly style="text-align:right;width:50px" value="'+count+'"/></td>';
html_code +='<td><input type="text" class="text-control" name="tdsccode[]" id="tdsccode" style="width:100px;" maxlength="50" /> </td>';
html_code +='<td><a href="#" data-toggle="modal" data-target="#serviceModal" class="btn btn-info btn-xs"><i class="fa fa-search"></i></a></td>';
html_code +='<td><input type="text" class="text-control" name="tdscdesc[]" id="tdscdesc" readonly style="width:200px;" maxlength="250" /></td>'
html_code +='<td><input type="number" class="text-control" name="tdrate[]" id="tdrate" style="text-align:right;width:90px" maxlength="17" /></td>'
html_code +='<td><input type="text" class="text-control" name="tdremarks[]" id="tdremarks" style="width:200px" maxlength="100" /></td>';
//html_code +='<td><button type="button" name="removerow" id="removerow" class="btn btn-danger fa fa-remove"></button></td>';
html_code +='</tr>';
$('#tarifftable').append(html_code);
//alert(count);
//
);
);
</script>
下面是模态窗口的HTML代码......
<div id="serviceModal" class="modal show fade" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title"><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","SERVICELIST");?></h6>
</div>
<div class="modal-body">
<div class="control-container" style="padding:10px;">
<div class="row pt-1">
<div class="col-md-3">
<label><?php echo GetBilingualLabels($_SESSION['$language'],"SEARCHTABLE","SEARCHBY"); ?></label>
</div>
<div class="col-md-3">
<select id="searchby" class="text-control">
<option value="1"><?php echo GetBilingualLabels($_SESSION['$language'],"SERVICECODE","SCCODE"); ?></option>
<option value="2"><?php echo GetBilingualLabels($_SESSION['$language'],"SERVICECODE","SCDESC"); ?></option>
</select>
</div>
<div class="col-md-6">
<input type="text" id="searchvalue" class="text-control" onkeyup="FilterFunction('serviceTable','searchby','searchvalue')" style="width:100%"
placeholder="<?php echo GetBilingualLabels($_SESSION['$language'],"SEARCHTABLE","SEARCHVALUE"); ?>" />
</div>
</div>
<div class="line"></div>
<table id="serviceTable" class="table table-sm table-bordered table-hover table-lightfont paginated">
<thead class="thead-light">
<tr>
<th></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"SERVICECODE","SCCODE"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"SERVICECODE","SCDESC"); ?></th>
</tr>
</thead>
<tbody>
<?php
if ($_SESSION['$language']=="E")
$servicedata=SelectData("service_code","sc_code,sc_desc","","sc_code");
else
$servicedata=SelectData("service_code","sc_code,sc_bldesc as sc_desc","","sc_code");
$rownum=0;
foreach ($servicedata as $servicedata)
echo "<tr id=$rownum>
<td><input type='radio' name='serviceradio' id='serviceradio' value='$servicedata['sc_code']'></td>
<td>$servicedata['sc_code']</td>
<td>$servicedata['sc_desc']</td>
</tr>";
$rownum+=1;
?>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-close"></i>
<?php echo GetBilingualLabels($_SESSION['$language'],"BUTTON","CANCEL"); ?>
</button>
<button type="button" name="selectservice" id="selectservice" class="btn btn-success"> <!--onclick="DispMsg(<//?php echo "'".$_SESSION['AlertMsg']."'";?>)"-->
<i class="fa fa-check"></i>
<?php echo GetBilingualLabels($_SESSION['$language'],"BUTTON","SELECTLIST"); ?>
</button>
</div>
</div>
</div>
</div>
以下是从模态窗口中获取选定值到主表中的 JavaScript .....
<script>
$(document).ready(function()
$(document).on('click','#selectservice',function()
var service = document.getElementsByName('serviceradio');
var scdesc = document.getElementsByName('scdesc');
for(i = 0; i < service.length; i++)
if(service[i].checked)
var Row = document.getElementById(i);
var Cells = Row.getElementsByTagName("td");
document.getElementById('tdsccode').value= service[i].value;
document.getElementById('tdscdesc').value=Cells[2].innerText;
$('#serviceModal').modal('hide');
);
</script>
【问题讨论】：
【参考方案1】：感谢大家的支持，但我自己解决了这个问题如下.. 1）我已经用计数值设置了我的主表输入文本的 id。 2）在显示模态窗口的按钮上，我已将 data-book-id 设置为计数值。 2）我创建了一种具有显示无属性的输入类型文本 3）在模态显示事件中，我已使用传递的 data-book-id 值设置此输入类型文本的值 4）然后我将此值与主表中输入类型文本的 id 连接起来。 这样我就得到了当前输入类型文本行的值集。
【讨论】：
以上是关于如何更新主表当前行的输入类型文本中的值从模态窗口表中获取值的主要内容，如果未能解决你的问题，请参考以下文章