Question

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" type="text/css" href="http://akottr.github.io/css/akottr.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>  
    <script type="text/javascript"> 
    function change(){  
        $('#table2').find('thead').find('th').each(function(index){             
            $(this).attr('id','reportHead'+index);
        });
        $('#table2').find('tbody tr').each(function(index){             
            var rowname = $(this).find('td:first').attr('id');
            $(this).find('td').each(function(index){

                for(var i=0;i<=$(this).children('input,checkbox,select').length;i++){

                    if(i<1){                    
                        $(this).children('input,checkbox,select:gt('+i+')').attr('id',rowname+index);
                    }else if(i>=1){                 
                        $(this).children('input,checkbox,select:gt('+i+')').attr('id',rowname+index+i);
                    }
                }       
                $(this).attr('id',rowname+index);
            });
        });
    }
    </script>
</head>
<body>
    <table style="background:#f3f3f3" class="thin defaultTable sortable draggable" id="table2">
        <thead> 
            <tr>
                <td id='title'>
                    title
                </td>
                <td id='subtitle'>
                    subtitle
                </td>
                <td id='movie'>
                    movie
                </td>
                <td id='song'>
                    song
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id='mango'>
                    <input type="text" class="form-control" name="filter" id="">
                    <input type="checkbox" value="test" name="test" id="">
                </td>
                <td>
                    <input type="text" class="form-control" name="filterc" id="">
                    <label>d</label>
                </td>
                <td>
                    <input type="text" class="form-control" name="filterd" id="">
                </td>
                <td><input type="text" class="form-control" name="filterd" id="">
                    <input type="text" class="form-control" name="filterf" id="">
                </td>
            </tr>
            <tr>
                <td id='honey'>
                    <input type="text" class="form-control" name="filter" id="">
                    <input type="checkbox" value="test" name="test" id="">
                </td>
                <td>
                    <input type="text" class="form-control" name="filterc" id="">
                    <label>d</label>
                </td>
                <td>
                    <input type="text" class="form-control" name="filterd" id="">
                </td>
                <td><input type="text" class="form-control" name="filterd" id="">
                    <input type="text" class="form-control" name="filterf" id="">
                </td>
            </tr>
            <tr>
                <td id='fox'>
                    <input type="text" class="form-control" name="filter" id="">
                    <input type="checkbox" value="test" name="test" id="">
                </td>
                <td>
                    <input type="text" class="form-control" name="filterc" id="">
                    <label>d</label>
                </td>
                <td>
                    <input type="text" class="form-control" name="filterd" id="">
                </td>
                <td><input type="text" class="form-control" name="filterd" id="">
                    <input type="text" class="form-control" name="filterf" id="">
                </td>
            </tr>   
        </tbody>
    <tfoot></tfoot>
    </table>
 <input type='button' name='change' value='change' onclick='change()'/>
</body>
</html>

我用这段代码完成了jquery表交换概念，但这里没有提到代码交换后，单击更改按钮以重新排列表中的thead id和元素id 我试着像上面的代码，但确切的输出我没有得到请帮助我（thead正在工作）我需要输出这样的tbody

        1st row 1st td contain 2 input elements
            1st input id='mango0'
            2nd input id='mango01'
        1st row 2nd td contain 1 input 1 label
            1st input id='mango1'
        1st row 3rd td contain 1 input
            1st input id='mango2'
        1st row 4th td contain 1 input 1 label
            1st input id='mango3'
            2nd input id='mango31'

        2nd row 1st td contain 1 input 1 checkbox
            1st input id='honey0'
            2nd input id='honey01'
        2nd row 2nd td contain 1 input 1 label
            1st input id='honey1'
        2nd row 3rd td contain 1 input
            1st input id='honey2'
        2nd row 4th td contain 2 input 
            1st input id='honey3'
            2nd input id='honey31'

Answer 1

每个方面都是

$(this).find('td').each(function(index){
                var i = 1;
                var j;
                $(this).find('input').each(function(index){                 
                    if(index == 0){
                        j = index;
                        $(this).attr('id',rowname+index);
                    }else{
                        $(this).attr('id',rowname+j+i);
                        i++;
                    }

                }); 
});

除了label之外，更改表tr td内的元素attr id

1 个答案: