javascript单选取得table中一行的数据,并给页面元素赋值

<table class="gridtable col-xs-12">
<thead>
<tr>
<th class="col-xs-1">项目</th>
<th class="col-xs-2">内容</th>
<th class="col-xs-1">项目</th>
<th class="col-xs-2">内容</th>
<th class="col-xs-1">项目</th>
<th class="col-xs-2">内容</th>
<th class="col-xs-1">项目</th>
<th class="col-xs-2">内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label asp-for="估价项目房屋信息比较法.房屋编号" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.房屋编号" readonly="readonly" class="form-control" value=@ViewBag.房屋编号 />
<span asp-validation-for="估价项目房屋信息比较法.房屋编号" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.实例位置" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.实例位置" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.实例位置" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.实例层数" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.实例层数" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.实例层数" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.实例结构" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.实例结构" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.实例结构" class="text-danger"></span>
</td>
</tr>
<tr>
<td>
<label asp-for="估价项目房屋信息比较法.实例装修设施" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.实例装修设施" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.实例装修设施" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.实例成交价格" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.实例成交价格" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.实例成交价格" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.实例建筑面积" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.实例建筑面积" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.实例建筑面积" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.实例成交日期" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.实例成交日期" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.实例成交日期" class="text-danger"></span>
</td>
</tr>
<tr>
<td>
<label asp-for="估价项目房屋信息比较法.交易情况" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.交易情况" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.交易情况" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.交易日期" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.交易日期" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.交易日期" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.房地产状况" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.房地产状况" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.房地产状况" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.建成年限" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.建成年限" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.建成年限" class="text-danger"></span>
</td>
</tr>
<tr>
<td>
<label asp-for="估价项目房屋信息比较法.比准价格成交单价" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.比准价格成交单价" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.比准价格成交单价" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.比准价格区位状况" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.比准价格区位状况" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.比准价格区位状况" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.比准价格实物状况" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.比准价格实物状况" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.比准价格实物状况" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.比准价格交易情况" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.比准价格交易情况" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.比准价格交易情况" class="text-danger"></span>
</td>
</tr>
<tr>
<td>
<label asp-for="估价项目房屋信息比较法.比准价格交易日期" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.比准价格交易日期" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.比准价格交易日期" class="text-danger"></span>
</td>
<td>
<label asp-for="估价项目房屋信息比较法.比准价格" class="control-label"></label>
</td>
<td>
<input asp-for="估价项目房屋信息比较法.比准价格" class="form-control" />
<span asp-validation-for="估价项目房屋信息比较法.比准价格" class="text-danger"></span>
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>

<script type="text/javascript">

function singleChecked(rowid) {
//存贮所在行的id值
var v = rowid.id;
$("[name='single_checked']").each(function () {
if (this.id != v) {
$(this).removeAttr("checked");//取消选中
}
});

var 实例位置 = $(rowid).parent().parent().children("td").get(2).innerHTML;
var 实例层数 = $(rowid).parent().parent().children("td").get(3).innerHTML;
var 实例总层数 = $(rowid).parent().parent().children("td").get(4).innerHTML;
var 实例结构 = $(rowid).parent().parent().children("td").get(5).innerHTML;
var 实例装修设施 = $(rowid).parent().parent().children("td").get(6).innerHTML;
var 实例交易情况 = $(rowid).parent().parent().children("td").get(7).innerHTML;

var 实例成交价格 = $(rowid).parent().parent().children("td").get(8).innerHTML;
var 实例建筑面积 = $(rowid).parent().parent().children("td").get(9).innerHTML;
var 实例成交单价 = $(rowid).parent().parent().children("td").get(10).innerHTML;
var 实例建成年限 = $(rowid).parent().parent().children("td").get(11).innerHTML;
var 实例成交日期 = $(rowid).parent().parent().children("td").get(12).innerHTML;
var 实例房地产状况 = $(rowid).parent().parent().children("td").get(13).innerHTML;

$('input[name="估价项目房屋信息比较法.实例位置"]').attr('value', $.trim(实例位置));
$('input[name="估价项目房屋信息比较法.实例层数"]').attr('value', $.trim(实例层数));
$('input[name="估价项目房屋信息比较法.实例结构"]').attr('value', $.trim(实例结构));
$('input[name="估价项目房屋信息比较法.实例装修设施"]').attr('value', $.trim(实例装修设施));
$('input[name="估价项目房屋信息比较法.实例成交价格"]').attr('value', $.trim(实例成交价格));
$('input[name="估价项目房屋信息比较法.实例建筑面积"]').attr('value', $.trim(实例建筑面积));

$('input[name="估价项目房屋信息比较法.实例装修设施"]').attr('value', $.trim(实例成交日期));
$('input[name="估价项目房屋信息比较法.比准价格成交单价"]').attr('value', $.trim(实例成交价格));
$('input[name="估价项目房屋信息比较法.比准价格区位状况"]').attr('value', $.trim(实例交易情况));

//$(this).attr("checked", true);
//alert($(this));
}
</script>

<div class="panel-body">

<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
@*<th>

@Html.DisplayNameFor(model => model.编码比较实例[0].实例名称)
</th>*@
<th>请选择实例</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例名称)
</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例位置)
</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例层数)
</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例总层数)
</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例结构)
</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例装修设施)
</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例交易情况)
</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例成交价格)
</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例建筑面积)
</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例成交单价)
</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例建成年限)
</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例成交日期)

</th>
<th>
@Html.DisplayNameFor(model => model.编码比较实例[0].实例房地产状况)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.编码比较实例)
{
<tr>
<td>
<input id=@Html.DisplayFor(modelItem => item.实例编号) name="single_checked" type="checkbox" onclick="singleChecked(this)" />
</td>
<td>
@Html.DisplayFor(modelItem => item.实例名称)
</td>
<td>
@Html.DisplayFor(modelItem => item.实例位置)
</td>
<td>
@Html.DisplayFor(modelItem => item.实例层数)
</td>
<td>
@Html.DisplayFor(modelItem => item.实例总层数)
</td>
<td>
@Html.DisplayFor(modelItem => item.实例结构)
</td>
<td>
@Html.DisplayFor(modelItem => item.实例装修设施)
</td>
<td>
@Html.DisplayFor(modelItem => item.实例交易情况)
</td>
<td>
@Html.DisplayFor(modelItem => item.实例成交价格)
</td>
<td>
@Html.DisplayFor(modelItem => item.实例建筑面积)
</td>
<td>
@Html.DisplayFor(modelItem => item.实例成交单价)
</td>
<td>
@Html.DisplayFor(modelItem => item.实例建成年限)
</td>
<td>
@Html.DisplayFor(modelItem => item.实例成交日期)
</td>
<td>
@Html.DisplayFor(modelItem => item.实例房地产状况)
</td>
<td>
<div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
<button class="btn btn-xs btn-success">
<i class="icon-ok bigger-120"></i>
</button>
<a class="btn btn-xs btn-success" asp-page="./Edit" asp-route-id="@item.实例编号"> <i class="icon-edit bigger-120"></i>编辑</a>
<a class="btn btn-xs btn-info" asp-page="./Details" asp-route-id="@item.实例编号"><i class="icon-flag bigger-120"></i>明细</a>
<a class="btn btn-xs btn-danger" asp-page="./Delete" asp-route-id="@item.实例编号"><i class="icon-trash bigger-120"></i>删除</a>

</div>

</td>


</tr>
}
</tbody>
</table>

原文地址:https://www.cnblogs.com/lnwuyaowei/p/12561562.html