Question

在html表中遇到小问题 - 需要在使用jquery单击按钮时显示（最初显示：none）。

在视图

中

@{

        foreach (S.Libs.SAapp in @Model._salist)
        {
           if (blockNo != @app.BlockNo && var_i == 0)
            {
            </td></tr>

                blockNo = @app.BlockNo;
                EndRow = @app.count+ 1;
                <th rowspan ="@EndRow">S<br />T<br />A<br />L<br />L<br />S <br /><br /> @app.StallNo <br />TO <br />@app.End_row</th>
            }

                    <tr>               
                            <td  align="center">@app.col1</td>               
                            <td  align="center"  >@app.col2</td> 
                            <td>@app.col3</td>
                            <td  align="center" >@app.col4</td>
                            <td  align="center" >@app.col5</td>
                            <td>@app.col6</td>                                                                        
                            <td id="chk_edit"> <input type ="checkbox" style="display:none"/> </td>
                            <td> 
                            <input id="hdnId1" value="@app.Id1" type="hidden"/>
                            <input id="hdnId2" value="@app.Id2" type="hidden"/>
                            <input id="hdnId3" value="@app.Id3" type="hidden"/>
                            </td>
                    </tr>                                                     
        }


    }

 <a href="#" class="abut" id="btnEdit"><span class="abut-edit">&nbsp;</span>Edit</a>

有一个按钮

<td id="chk_edit">

在JavaScript中 - 我需要在html中启用（或显示）第7列

name

不知道该怎么做。并获取已检查的td列。怎么做到这一点？帮助赞赏。在此先感谢

Answer 1

你甚至可以在链接上听click，到第七个td并显示隐藏的输入。

$(function(){

  $("#btnEdit").click(function(e){

     e.preventDefault();

     $("#tblLayout tr").each(function(a,b)  //loop through each tr's
     {    
         //find the 7th td and find the checkbox inside that and show   
         $(b).find("td").eq(6).find("input[type='checkbox']").show();                      
     });        
  });

});

Here是一个工作样本。

更好的解决方案是更新HTML标记以在复选框中包含css类，以便我们可以将其用作jQuery选择器并避免上面的循环。另外，要为复选框关联唯一的行ID /记录值，您不需要将其保留在单独的隐藏字段中。你可以将它存储在复选框的html5数据属性中。

此外，您不应该有元素的重复ID。所以从你的循环中删除它。

所以你的新标记看起来像

<td>@app.col6</td>                                                                        
<td> 
    <input type ="checkbox" class="editChk" data-rowid="@app.Id1" style="display:none"/> 
</td>

现在使用我们新的css类选择器，显示复选框很简单。

$("#btnEdit").click(function(e){
     e.preventDefault();
     $("input.editChk").show();        
});

要获得具有所选复选框的行的ID（我们存储在数据属性中）将是

$("#saveBtn").click(function(e){
    e.preventDefault();

      var checkedItems= $("input.editChk:checked");
      checkedItems.each(function(a,b){
         var rowId=$(this).data("rowid");
         alert(rowId);
      });

      // OR USE jQuery Map and get an array of Ids
      var idArray = checkedItems.map(function(){
        return $(this).data("rowid");
      }).get();

      console.log(idArray);
});

Here是其中的一个工作样本。

循环遍历html表并使用jquery显示一个td列

1 个答案: