Search code examples
javascriptjquerytablednd

Change table row name attribute using javascript


Hey i want to change the name attribute of a table once the row is draged from one group into the other. I get the row of which name attribute to be changed and the target name. but my javascript function is not changing the row name This is what I tried so far

<script type="text/javascript">
        $(document).ready(function() {
            $('#sort').tableDnD({
                onDrop: function(table, row) {
                    var patent_id = row.id;
                    var target_group_id = getpreviousSiblingName(row);
                    var data = {PID:patent_id, TGID:target_group_id};
                    **changename(patent_id,target_group_id);**
                    $.ajax({
                        type: "POST",
                        data: data,
                        url:"{{ path('MunichInnovationGroupBundle_patent_dragpatent') }}",
                        cache: false
                     });
                },
                dragHandle: ".dragHandle"
            });
            $("#sort tr").hover(function() {
                if($(this).hasClass('tr_group'))
                    $(this.cells[0]).addClass('showDragHandle');
                }, function() {
                    $(this.cells[0]).removeClass('showDragHandle');
            });

        });
</script>

    <script>
    function changename(row_id,row_name){
        var row = document.getElementById(row_id);
        alert(row_id);
        alert(row_name);
        row.name=row_name;
        return true;
    }
</script>

Solution

  • A tr doesn't have a .name property, so the attribute is not automatically transferred to the property.

    Use setAttribute() instead to set custom attributes.

    function changename(row_id,row_name){
        var row = document.getElementById(row_id);
        row.setAttribute('name',row_name);
        return true;
    }
    

    Then to retrieve it again, you'll need getAttribute

    row.getAttribute('name');
    

    Off topic, but you don't need to pass the row.id and then use getElementById. You could just pass the row directly.