Блог

я хочу знать индекс строки флажка: проверено в таблице. Я буду использовать это для 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>
  

впервые я выполнил жесткое кодирование, используя строку таблицы в значении флажка (идентификатор chkDelete в строке javascript 18).

При первом удалении не было большой проблемы. но в следующий раз у меня возникла большая проблема при удалении. это проблема с номером строки. Поэтому я подумал, что лучше сохранить флажок: проверил индекс строки в значении флажка. не жестко.

Как я могу получить индекс строки флажка: проверено в таблице? Или есть лучший способ?

Если я не ошибаюсь, вы столкнулись с проблемой индексации строк после установки флажка, присутствующего в строке.

Итак, я обошел и нашел решение для вас, вы можете проверить это ниже, используя 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>  

Используйте другой подход, вместо поиска всех флажков, перебирайте все строки (чтобы у вас был индекс строки), затем найдите флажок в каждой строке, например

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

});