Change table row name attribute using javascript

Question

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>

I don't know how your `getpreviousSiblingName` function works, but beaware that in some browsers a TR's immediate sibling might be a text node, not another TR. — RobG, Jun 07 '12 at 13:52
@RobG I already managed that whitespace as node problem :) I wrote a javascript function to ignore the whitespace as node — Zoha Ali Khan, Jun 07 '12 at 13:56

score 6 · Accepted Answer · 2012-06-07T13:48:01.997

6

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.

edited Jun 07 '12 at 13:48

answered Jun 07 '12 at 13:40

IE does (or used to at least, haven't tested the latest versions) reflect standard and non–standard properties and attributes, Firefox and others don't though. – RobG Jun 07 '12 at 13:44
@RobG: Well of course it does... `;)` Didn't know that. Thanks for the note. ...Oh wait, I did know that. Just discovered it a couple weeks ago. Thanks for the reminder. – Jun 07 '12 at 13:45
let me try it but when I set the name attribute as you suggested it say undefined – Zoha Ali Khan Jun 07 '12 at 13:46
@am not i am Awesome It worked great for me :) thanks a lot :) – Zoha Ali Khan Jun 07 '12 at 13:49

Change table row name attribute using javascript

1 Answers1