我想要checkbox的行索引:checked in table。使用deleteRow()

Question

我想知道checkbox:checked in table的行索引。我将把它用于deleteRow()。

javaScript代码

$j(document).ready(function(){
    var addFrmCnt = 0; //using for deletefrm button visible
    var count = 3; //using for checkbox value. it's table row
    var countCal=5;  //using for additional inputFrm numbering

    //For addFrm
    
    $j("#addFrm").on("click",function(){
        
        addFrmCnt = 1; //for deleteFrm display func Count 0=none, 1=inline
        
        var countFrm=0; //AddFrm Count
        
        if(count==3){
            countFrm=1;
        }else{
            countFrm= count-countCal;
            countCal=countCal+3;
        }
        
        $j("#table").append(
            "<tr><td align='center' colspan=2>Add Board INPUT"+countFrm
            +"<input type='checkbox' id='chkDelete' value='"+count+"'></td></tr>"
            +"<tr><td width='120' align='center'>Type</td><td><select id='typeSelect'>"
            +"<c:forEach items='${comCodeList}' var='list'><option value='${list.codeId}'>${list.codeName}</option></c:forEach>"
            +"</select></td></tr>"
            +"<tr><td width='120' align='center'>Title</td>"
            +"<td width='400'><input name='boardTitle' type='text' size='50'value='${board.boardTitle}' id='boardTitle'></td>"
            +"</tr><tr><td height='300' align='center'>Comment</td>"
            +"<td valign='top'><textarea name='boardComment'  rows='20' cols='55' id='boardComment'>${board.boardComment}</textarea></td></tr>"
        );
        
        //for deleteFrm display func
         if(addFrmCnt == 1){
                var deleteFrmStat = document.getElementById("deleteFrm");
                deleteFrmStat.style.display="inline";
            } 
        
        
         count=count+4;
    });
    
    //for deleteFrm
    
        $j("#deleteFrm").on("click",function(){
            /* var table = document.getElementById("table");
            var tableCnt = table.rows.length;
            console.log(tableCnt); */
            
            var chkList =[];
            
            $j('input[id="chkDelete"]:checked').each(
                    function() {
                        chkList.push($j(this).val());
                    });
            
            chkList.sort(function(a, b) { 
                return b - a;
            });
            
            console.log("chkList===="+chkList);
            
            for (var i in chkList){
                var iEnd=parseInt(chkList[i])+3;
                console.log("deleteRow==="+chkList[i]+"~"+iEnd);
                
                table.deleteRow(parseInt(chkList[i])+3);
                table.deleteRow(parseInt(chkList[i])+2);
                table.deleteRow(parseInt(chkList[i])+1);
                table.deleteRow(parseInt(chkList[i]));
                
            }
            
            var tableCnt = table.rows.length;
             if(tableCnt==3){
                 addFrmCnt == 0
                 var deleteFrmStat = document.getElementById("deleteFrm");
                 deleteFrmStat.style.display="none";
             }
             
            count=count-4;
        });

HTML代码

<table align="center">
    <tr >
        
        <td align="right" style="float:right">
            <input id="addFrm" type="button" value="addFrm" style="margin:0 auto;">
            
            <input id="test" type="button" value="test" style="margin:0 auto;">
            
            <input id="deleteFrm" type="button" value="deleteFrm" style="display:none; margin:0 auto">

            <input id="submit" type="button" value="SUBMIT" style="margin:0 auto;">
        </td>

    </tr>
    <tr>
        <td>
            <table border ="1" id="table"> 
                <tr>
                    <td width="120" align="center">
                     Type
                    </td>
                    <td>
                        <select id="typeSelect">
                            <c:forEach items="${comCodeList}" var="list">
                                <option value="${list.codeId}">${list.codeName}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                
                <tr>
                    <td width="120" align="center">
                    Title
                    </td>
                    <td width="400">
                    <input name="boardTitle" type="text" size="50" value="${board.boardTitle}" id="boardTitle"> 
                    </td>
                </tr>
                <tr>
                    <td height="300" align="center">
                    Comment
                    </td>
                    <td valign="top">
                    <textarea name="boardComment"  rows="20" cols="55" id="boardComment">${board.boardComment}</textarea>
                    </td>
                </tr>
            </table>
            <table border ="1">
                <tr>
                    <td width="120" align="center">
                    Writer
                    </td>
                    <td align="center" width="416">
                    <a>${memberName}</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        
        <td align="right">
            <a href="/board/boardList.do">List</a>
        </td>
    </tr>
</table>

我第一次使用复选框中的表行( javascript 18行中的id chkDelete )值进行硬编码。

当我第一次使用deletedFrm的时候，没有什么大问题。但是下一次我删除的时候会有大问题。这是行号问题。所以我想最好保存checkbox :在checkbox值中检查行索引。不是hardCoding。

如何获取checkbox:checked in table的行索引？还是有更好的方法？

Answer 1

如果我没记错的话，在选中行中出现的复选框后，您将面临行索引问题。

所以，我已经解决了这个问题，你可以在下面使用jquery查看。那么让我们从答案开始吧。

​

$(document).ready(function(){
            $("#mybutton").click(function(){
                var message = "selected indexes are: ";
                
                //Loop through all checked CheckBoxes in GridView.
                $("#mytable input[type=checkbox]:checked").each(function(){
                    var row = $(this).closest("tr")[0];
                    message += row.rowIndex +' ';
                });
                alert(message);
                return false;
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
        <table border=1 id="mytable">
            <thead>
                <th>RowNo</th>
                <th>Name</th>
                <th>Select</th> 
            </thead>
            <tbody cellpadding=2px;>
                <tr>
                    <td>1</td>
                    <td>Emp1</td>
                    <td><input type="checkbox" class="namevalue"></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Emp2</td>
                    <td><input type="checkbox" class="namevalue"></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Emp3</td>
                    <td><input type="checkbox" class="namevalue"></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Emp4</td>
                    <td><input type="checkbox" class="namevalue"></td>
                </tr>               
            </tbody>
            <tfoot>
                <th>RowNo</th>
                <th>Name</th>
                <th>Select</th>
            </tfoot>
        </table>
        
        <input type="button" id="mybutton" value="Get Row Index" />
    </body>

​

Answer 2

使用一种不同的方法，而不是查找所有复选框，遍历所有行(这样您就有了行索引)，然后在每行中查找复选框，例如

$(table).find("tr").each(function(index, row){
    // index is index of the row
   var cb = $(row).find("input:checked");
  if (cb && cb.length > 0)
  {
      // do whatever here
  }

});