Javascript 在jquery MVC的两行之间放置一个复选框

我有一个

MVC

web应用程序，其中显示了一个表。 我的一些行可以有一个类似的id，我只需要为所有这些行显示一个

复选框

，为没有匹配id的行显示单个

复选框。如下所示：


第1行
和
第2行
具有相同的id，因此
复选框
位于它们之间（由红色的
复选框
表示）。
row3
，
row4
具有不同的ID，因此它们需要有各自的
复选框（用绿色表示）

我知道我需要使用
行span
属性，但我无法想象如何使用它

Below is the sample code:

[Route("Search")]
[HttpGet]
public async Task<IActionResult> Search()
{
 //Some API call
 return View("Search", model);
}

请指导如何继续。
您应该从视图中控制此实例中的页面布局，请原谅我的语法，因为我现在主要使用vbhtml

重要的是对搜索结果进行排序（以防它们尚未排序）
记住并更新最后处理的Id

<table id="tblsearch">
@if (Model.HasRecords)
{
var counter = 0;
var lastId = -1;
    <tbody>
    @foreach (var item in Model.SearchResults.OrderBy(x=>x.Id))
    {
        <tr>                   
            @if(lastId!= item.Id){
            <td rowspan="@(Model.SearchResults.Count(x=>x.Id == item.Id) > 0 ? Model.SearchResults.Count(x=>x.Id == item.Id) : 1 )">
              <input type="checkbox" id="Dummy_@counter" name="chkSearch" data-id="@item.Id"/>
                <label for="Dummy_@counter"></label>
            </td>
            }
            <td>@item.FullAddress</td>
            <td>@item.Price</td>
            <td>@item.OfficeName</td>
            @lastId = item.Id;
            //I assume there was code snipped here...
}
else
{
<tr><td>Data Not Found</td></tr>
}
 </table>


@if（Model.HasRecords）
{
var计数器=0；
var lastId=-1；
@foreach（Model.SearchResults.OrderBy（x=>x.Id）中的var项）
{
@if（lastId！=item.Id）{
}
@item.FullAddress
@项目.价格
@item.OfficeName
@lastId=item.Id；
//我想这里有被剪掉的代码。。。
}
其他的
{
找不到数据
}
不需要任何javascript。您只需按
Id
属性对项目进行分组，并有条件地使用
行span
属性呈现复选框列（如果它是组中的第一个项目）

<tbody>
    @foreach (var group in Model.SearchResults.GroupBy(x => x.Id))
    {
        bool isFirstRow = true;
        foreach (var item in group)
        {
            <tr>
                @if (isFirstRow)
                {
                    <td rowspan="@group.Count()">
                        @Html.CheckBox("chkSearch")
                    </td>
                    isFirstRow = false;
                }
                <td>@item.FullAddress</td>
                <td>@item.Price</td>
                <td>@item.OfficeName</td> 
            </tr>
        }
    }
</tbody>


@foreach（Model.SearchResults.GroupBy（x=>x.Id）中的var组）
{
bool isFirstRow=true；
foreach（组中的var项目）
{
@如果（第一行）
{
@复选框（“chkSearch”）
isFirstRow=false；
}
@item.FullAddress
@项目.价格
@item.OfficeName
}
}
在我看来，您应该控制复选框单元格上与结果中ID出现次数相匹配的行跨度。@Steve：是的，您是对的。。类似的。。有指针或一些示例代码吗？在这种情况下，您需要在循环中构建表本身。在循环中，您需要检查有多少个指针或示例代码“相同的ID连续跟随”，然后将td.colspan增加该数字。当然，在下面的行中，您希望避免插入表单元格。使用不同的类属性设置它们，并使用jquery使用$（'.checkboxedrow'）.html（'checkboxed'）控制它们反之亦然。@swaver2112:谢谢你的建议。.让我试试。让我试试。.谢谢你想想看，rowspan条件是多余的，可以是
rowspan=“@Model.SearchResults.Count（x=>x.Id==item.Id）" @史提夫，它是有效的。但是在某些异常情况下，用RangSube作为2的复选框应该出现在2个匹配行之间，但是它位于第一行的前面。单元格应该跨行。一些CSS可能需要使它看起来像中间。请打开边框看看我的意思。@史提夫。非常感谢……您的解决方案帮助。非常感谢。@Stephen..我会尽力让你知道..谢谢。我创建了测试它（但忘了给你链接）非常感谢。你的解决方案帮了大忙。接受你的答案。
<table id="tblsearch">
@if (Model.HasRecords)
{
var counter = 0;
var lastId = -1;
    <tbody>
    @foreach (var item in Model.SearchResults.OrderBy(x=>x.Id))
    {
        <tr>                   
            @if(lastId!= item.Id){
            <td rowspan="@(Model.SearchResults.Count(x=>x.Id == item.Id) > 0 ? Model.SearchResults.Count(x=>x.Id == item.Id) : 1 )">
              <input type="checkbox" id="Dummy_@counter" name="chkSearch" data-id="@item.Id"/>
                <label for="Dummy_@counter"></label>
            </td>
            }
            <td>@item.FullAddress</td>
            <td>@item.Price</td>
            <td>@item.OfficeName</td>
            @lastId = item.Id;
            //I assume there was code snipped here...
}
else
{
<tr><td>Data Not Found</td></tr>
}
 </table>

<tbody>
    @foreach (var group in Model.SearchResults.GroupBy(x => x.Id))
    {
        bool isFirstRow = true;
        foreach (var item in group)
        {
            <tr>
                @if (isFirstRow)
                {
                    <td rowspan="@group.Count()">
                        @Html.CheckBox("chkSearch")
                    </td>
                    isFirstRow = false;
                }
                <td>@item.FullAddress</td>
                <td>@item.Price</td>
                <td>@item.OfficeName</td> 
            </tr>
        }
    }
</tbody>