Javascript get element by id from a table cell not working

I have a HTML table. In this table I have links in last column (with id="delete_row"). I am trying to extract each link and it is not working. I have seen some posts about it and learned it might be a spelling issue but I checked everything twice and still cannot get it going. Here is my code:

var tbl = document.getElementById('my_table'); 

for (var i = 0 ;i<tbl.rows.length-1; i++) { // for each row

        row = tbl.rows[i];

        row.getElementById('delete_row').className="other_classname";

}

This code however returns error:

Uncaught TypeError: Object #<HTMLTableRowElement> has no method 'getElementById'

Any Idea what might be wrong?

edited Aug 10 '17 at 13:28

Brian Tompsett - 汤莱恩

4,2031338101

asked Jan 15 '13 at 11:08

HoGo

3433717

row.getElementById('delete_row').className="other_classname"; doesn't seem to make any sense - what are you trying to achieve here? Is 'delete_row' a table cell <td>?

– Barry Kaye
Jan 15 '13 at 11:12

Hi 'delete_row' is an id of a href inside last cell of every row (so last column of a tabale is filled in with hrefs of the same id). I will correct my question in a sec.

– HoGo
Jan 15 '13 at 11:28

add a comment |

var tbl = document.getElementById('my_table'); 

for (var i = 0 ;i<tbl.rows.length-1; i++) { // for each row

        row = tbl.rows[i];

        row.getElementById('delete_row').className="other_classname";

}

This code however returns error:

Uncaught TypeError: Object #<HTMLTableRowElement> has no method 'getElementById'

Any Idea what might be wrong?

edited Aug 10 '17 at 13:28

Brian Tompsett - 汤莱恩

4,2031338101

asked Jan 15 '13 at 11:08

HoGo

3433717

row.getElementById('delete_row').className="other_classname"; doesn't seem to make any sense - what are you trying to achieve here? Is 'delete_row' a table cell <td>?

– Barry Kaye
Jan 15 '13 at 11:12

Hi 'delete_row' is an id of a href inside last cell of every row (so last column of a tabale is filled in with hrefs of the same id). I will correct my question in a sec.

– HoGo
Jan 15 '13 at 11:28

add a comment |

var tbl = document.getElementById('my_table'); 

for (var i = 0 ;i<tbl.rows.length-1; i++) { // for each row

        row = tbl.rows[i];

        row.getElementById('delete_row').className="other_classname";

}

This code however returns error:

Uncaught TypeError: Object #<HTMLTableRowElement> has no method 'getElementById'

Any Idea what might be wrong?

edited Aug 10 '17 at 13:28

Brian Tompsett - 汤莱恩

4,2031338101

asked Jan 15 '13 at 11:08

HoGo

3433717

var tbl = document.getElementById('my_table'); 

for (var i = 0 ;i<tbl.rows.length-1; i++) { // for each row

        row = tbl.rows[i];

        row.getElementById('delete_row').className="other_classname";

}

This code however returns error:

Uncaught TypeError: Object #<HTMLTableRowElement> has no method 'getElementById'

Any Idea what might be wrong?

javascript html-table getelementbyid

edited Aug 10 '17 at 13:28

Brian Tompsett - 汤莱恩

4,2031338101

asked Jan 15 '13 at 11:08

HoGo

3433717

edited Aug 10 '17 at 13:28

Brian Tompsett - 汤莱恩

4,2031338101

asked Jan 15 '13 at 11:08

HoGo

3433717

edited Aug 10 '17 at 13:28

Brian Tompsett - 汤莱恩

4,2031338101

edited Aug 10 '17 at 13:28

Brian Tompsett - 汤莱恩

4,2031338101

edited Aug 10 '17 at 13:28

Brian Tompsett - 汤莱恩

4,2031338101

asked Jan 15 '13 at 11:08

HoGo

3433717

asked Jan 15 '13 at 11:08

HoGo

3433717

asked Jan 15 '13 at 11:08

HoGo

3433717

row.getElementById('delete_row').className="other_classname"; doesn't seem to make any sense - what are you trying to achieve here? Is 'delete_row' a table cell <td>?

– Barry Kaye
Jan 15 '13 at 11:12

Hi 'delete_row' is an id of a href inside last cell of every row (so last column of a tabale is filled in with hrefs of the same id). I will correct my question in a sec.

– HoGo
Jan 15 '13 at 11:28

add a comment |

row.getElementById('delete_row').className="other_classname"; doesn't seem to make any sense - what are you trying to achieve here? Is 'delete_row' a table cell <td>?

– Barry Kaye
Jan 15 '13 at 11:12

Hi 'delete_row' is an id of a href inside last cell of every row (so last column of a tabale is filled in with hrefs of the same id). I will correct my question in a sec.

– HoGo
Jan 15 '13 at 11:28

row.getElementById('delete_row').className="other_classname"; doesn't seem to make any sense - what are you trying to achieve here? Is 'delete_row' a table cell <td>?

– Barry Kaye
Jan 15 '13 at 11:12

Hi 'delete_row' is an id of a href inside last cell of every row (so last column of a tabale is filled in with hrefs of the same id). I will correct my question in a sec.

– HoGo
Jan 15 '13 at 11:28

add a comment |

3 Answers
3

active

oldest

votes

I think an ID for entire HTML has to be unique. You are using ID more than one time, which might be the issue. So if you use the class instead of ID and the function getElementsByClassName instead of getElementByID, it might solve your case.

answered Jan 15 '13 at 11:29

Raghavendra Karunanidhi

5913

Note getElementByID should be getElementById - do not capitalize the final d.

– Barry Kaye
Jan 15 '13 at 11:35

Hi, I cannot use class name as it is used by other links in table to. Instead I have tried this one: links=tbl.getElementsByName('delete_col'); links[i].className="other_classname"; and it returns Uncaught TypeError: Object #<HTMLTableElement> has no method 'getElementsByName'

– HoGo
Jan 15 '13 at 11:43

add a comment |

Further to your comment, to access the last cell in each row, replace:

row.getElementById('delete_row').className="other_classname";

With:

var len = document.getElementById("my_table").rows[i].cells.length;

document.getElementById("my_table").rows[i].cells[len - 1].className="other_classname";

edited Jan 15 '13 at 11:42

answered Jan 15 '13 at 11:34

Barry Kaye

6,97353155

Thanks, did it but I have enother error: Uncaught TypeError: Cannot read property 'rows' of null

– HoGo
Jan 15 '13 at 11:39

This is odd. It does not work and the prowser (chrome) shakes as there was an error, but there is nothing in the consloe, so I do not know what else might be wrong :(

– HoGo
Jan 15 '13 at 11:47

Create a jsFiddle and provide the link here - I'm sure we can fix this quickly.

– Barry Kaye
Jan 15 '13 at 11:49

OK here it is jsfiddle.net/qr2BJ/7315 The whole thing is to renumarate ids in onclick event of X href after each deletion, so next time it refers to the apriopriate row.

– HoGo
Jan 15 '13 at 13:13

add a comment |

You need to use class structure for your ids. Assume that you will add your rows with a button and delete them with X link like yours.

<input type="button" value="add" id="btnAddRow">



<table id="customFields" align="center" cellspacing="0" cellpadding="0" border="0">

    <tr class="HeaderRow"><td colspan="7"></td></tr>

</table>

And this is the javascript code for handle add and remove process:

$("#btnAddRow").click(function () {

        counter += 1;

        $("#customFields").show();

        $("#customFields").append('<tr valign="top"><td> ' + counter + '</td>' + '<td>' + '<a href="javascript:void(0);" class="removeRow">Delete</a></td></tr>');

    });



    $("#customFields").on('click', '.removeRow', function () {

        var rowId = $(this).parent().parent().index() - 1;

        $(this).parent().parent().remove();



        if ($('#customFields tr').length == 2) {

            $("#customFields").hide();

        }

    });

As you see a dynamic process will be more useful for you.

answered Nov 9 '16 at 6:14

tdog

309113

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f14336419%2fjavascript-get-element-by-id-from-a-table-cell-not-working%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

answered Jan 15 '13 at 11:29

Raghavendra Karunanidhi

5913

Note getElementByID should be getElementById - do not capitalize the final d.

– Barry Kaye
Jan 15 '13 at 11:35

Hi, I cannot use class name as it is used by other links in table to. Instead I have tried this one: links=tbl.getElementsByName('delete_col'); links[i].className="other_classname"; and it returns Uncaught TypeError: Object #<HTMLTableElement> has no method 'getElementsByName'

– HoGo
Jan 15 '13 at 11:43

add a comment |

answered Jan 15 '13 at 11:29

Raghavendra Karunanidhi

5913

Note getElementByID should be getElementById - do not capitalize the final d.

– Barry Kaye
Jan 15 '13 at 11:35

Hi, I cannot use class name as it is used by other links in table to. Instead I have tried this one: links=tbl.getElementsByName('delete_col'); links[i].className="other_classname"; and it returns Uncaught TypeError: Object #<HTMLTableElement> has no method 'getElementsByName'

– HoGo
Jan 15 '13 at 11:43

add a comment |

answered Jan 15 '13 at 11:29

Raghavendra Karunanidhi

5913

answered Jan 15 '13 at 11:29

Raghavendra Karunanidhi

5913

answered Jan 15 '13 at 11:29

Raghavendra Karunanidhi

5913

answered Jan 15 '13 at 11:29

Raghavendra Karunanidhi

5913

answered Jan 15 '13 at 11:29

Raghavendra Karunanidhi

5913

Note getElementByID should be getElementById - do not capitalize the final d.

– Barry Kaye
Jan 15 '13 at 11:35

Hi, I cannot use class name as it is used by other links in table to. Instead I have tried this one: links=tbl.getElementsByName('delete_col'); links[i].className="other_classname"; and it returns Uncaught TypeError: Object #<HTMLTableElement> has no method 'getElementsByName'

– HoGo
Jan 15 '13 at 11:43

add a comment |

Note getElementByID should be getElementById - do not capitalize the final d.

– Barry Kaye
Jan 15 '13 at 11:35

Hi, I cannot use class name as it is used by other links in table to. Instead I have tried this one: links=tbl.getElementsByName('delete_col'); links[i].className="other_classname"; and it returns Uncaught TypeError: Object #<HTMLTableElement> has no method 'getElementsByName'

– HoGo
Jan 15 '13 at 11:43

Note getElementByID should be getElementById - do not capitalize the final d.

– Barry Kaye
Jan 15 '13 at 11:35

Hi, I cannot use class name as it is used by other links in table to. Instead I have tried this one: links=tbl.getElementsByName('delete_col'); links[i].className="other_classname"; and it returns Uncaught TypeError: Object #<HTMLTableElement> has no method 'getElementsByName'

– HoGo
Jan 15 '13 at 11:43

add a comment |

Further to your comment, to access the last cell in each row, replace:

row.getElementById('delete_row').className="other_classname";

With:

var len = document.getElementById("my_table").rows[i].cells.length;

document.getElementById("my_table").rows[i].cells[len - 1].className="other_classname";

edited Jan 15 '13 at 11:42

answered Jan 15 '13 at 11:34

Barry Kaye

6,97353155

Thanks, did it but I have enother error: Uncaught TypeError: Cannot read property 'rows' of null

– HoGo
Jan 15 '13 at 11:39

This is odd. It does not work and the prowser (chrome) shakes as there was an error, but there is nothing in the consloe, so I do not know what else might be wrong :(

– HoGo
Jan 15 '13 at 11:47

Create a jsFiddle and provide the link here - I'm sure we can fix this quickly.

– Barry Kaye
Jan 15 '13 at 11:49

OK here it is jsfiddle.net/qr2BJ/7315 The whole thing is to renumarate ids in onclick event of X href after each deletion, so next time it refers to the apriopriate row.

– HoGo
Jan 15 '13 at 13:13

add a comment |

Further to your comment, to access the last cell in each row, replace:

row.getElementById('delete_row').className="other_classname";

With:

var len = document.getElementById("my_table").rows[i].cells.length;

document.getElementById("my_table").rows[i].cells[len - 1].className="other_classname";

edited Jan 15 '13 at 11:42

answered Jan 15 '13 at 11:34

Barry Kaye

6,97353155

Thanks, did it but I have enother error: Uncaught TypeError: Cannot read property 'rows' of null

– HoGo
Jan 15 '13 at 11:39

This is odd. It does not work and the prowser (chrome) shakes as there was an error, but there is nothing in the consloe, so I do not know what else might be wrong :(

– HoGo
Jan 15 '13 at 11:47

Create a jsFiddle and provide the link here - I'm sure we can fix this quickly.

– Barry Kaye
Jan 15 '13 at 11:49

OK here it is jsfiddle.net/qr2BJ/7315 The whole thing is to renumarate ids in onclick event of X href after each deletion, so next time it refers to the apriopriate row.

– HoGo
Jan 15 '13 at 13:13

add a comment |

Further to your comment, to access the last cell in each row, replace:

row.getElementById('delete_row').className="other_classname";

With:

var len = document.getElementById("my_table").rows[i].cells.length;

document.getElementById("my_table").rows[i].cells[len - 1].className="other_classname";

edited Jan 15 '13 at 11:42

answered Jan 15 '13 at 11:34

Barry Kaye

6,97353155

Further to your comment, to access the last cell in each row, replace:

row.getElementById('delete_row').className="other_classname";

With:

var len = document.getElementById("my_table").rows[i].cells.length;

document.getElementById("my_table").rows[i].cells[len - 1].className="other_classname";

edited Jan 15 '13 at 11:42

answered Jan 15 '13 at 11:34

Barry Kaye

6,97353155

edited Jan 15 '13 at 11:42

answered Jan 15 '13 at 11:34

Barry Kaye

6,97353155

answered Jan 15 '13 at 11:34

Barry Kaye

6,97353155

answered Jan 15 '13 at 11:34

Barry Kaye

6,97353155

Thanks, did it but I have enother error: Uncaught TypeError: Cannot read property 'rows' of null

– HoGo
Jan 15 '13 at 11:39

This is odd. It does not work and the prowser (chrome) shakes as there was an error, but there is nothing in the consloe, so I do not know what else might be wrong :(

– HoGo
Jan 15 '13 at 11:47

Create a jsFiddle and provide the link here - I'm sure we can fix this quickly.

– Barry Kaye
Jan 15 '13 at 11:49

OK here it is jsfiddle.net/qr2BJ/7315 The whole thing is to renumarate ids in onclick event of X href after each deletion, so next time it refers to the apriopriate row.

– HoGo
Jan 15 '13 at 13:13

add a comment |

Thanks, did it but I have enother error: Uncaught TypeError: Cannot read property 'rows' of null

– HoGo
Jan 15 '13 at 11:39

This is odd. It does not work and the prowser (chrome) shakes as there was an error, but there is nothing in the consloe, so I do not know what else might be wrong :(

– HoGo
Jan 15 '13 at 11:47

Create a jsFiddle and provide the link here - I'm sure we can fix this quickly.

– Barry Kaye
Jan 15 '13 at 11:49

OK here it is jsfiddle.net/qr2BJ/7315 The whole thing is to renumarate ids in onclick event of X href after each deletion, so next time it refers to the apriopriate row.

– HoGo
Jan 15 '13 at 13:13

Thanks, did it but I have enother error: Uncaught TypeError: Cannot read property 'rows' of null

– HoGo
Jan 15 '13 at 11:39

This is odd. It does not work and the prowser (chrome) shakes as there was an error, but there is nothing in the consloe, so I do not know what else might be wrong :(

– HoGo
Jan 15 '13 at 11:47

Create a jsFiddle and provide the link here - I'm sure we can fix this quickly.

– Barry Kaye
Jan 15 '13 at 11:49

OK here it is jsfiddle.net/qr2BJ/7315 The whole thing is to renumarate ids in onclick event of X href after each deletion, so next time it refers to the apriopriate row.

– HoGo
Jan 15 '13 at 13:13

add a comment |

You need to use class structure for your ids. Assume that you will add your rows with a button and delete them with X link like yours.

<input type="button" value="add" id="btnAddRow">



<table id="customFields" align="center" cellspacing="0" cellpadding="0" border="0">

    <tr class="HeaderRow"><td colspan="7"></td></tr>

</table>

And this is the javascript code for handle add and remove process:

$("#btnAddRow").click(function () {

        counter += 1;

        $("#customFields").show();

        $("#customFields").append('<tr valign="top"><td> ' + counter + '</td>' + '<td>' + '<a href="javascript:void(0);" class="removeRow">Delete</a></td></tr>');

    });



    $("#customFields").on('click', '.removeRow', function () {

        var rowId = $(this).parent().parent().index() - 1;

        $(this).parent().parent().remove();



        if ($('#customFields tr').length == 2) {

            $("#customFields").hide();

        }

    });

As you see a dynamic process will be more useful for you.

answered Nov 9 '16 at 6:14

tdog

309113

add a comment |

You need to use class structure for your ids. Assume that you will add your rows with a button and delete them with X link like yours.

<input type="button" value="add" id="btnAddRow">



<table id="customFields" align="center" cellspacing="0" cellpadding="0" border="0">

    <tr class="HeaderRow"><td colspan="7"></td></tr>

</table>

And this is the javascript code for handle add and remove process:

$("#btnAddRow").click(function () {

        counter += 1;

        $("#customFields").show();

        $("#customFields").append('<tr valign="top"><td> ' + counter + '</td>' + '<td>' + '<a href="javascript:void(0);" class="removeRow">Delete</a></td></tr>');

    });



    $("#customFields").on('click', '.removeRow', function () {

        var rowId = $(this).parent().parent().index() - 1;

        $(this).parent().parent().remove();



        if ($('#customFields tr').length == 2) {

            $("#customFields").hide();

        }

    });

As you see a dynamic process will be more useful for you.

answered Nov 9 '16 at 6:14

tdog

309113

add a comment |

You need to use class structure for your ids. Assume that you will add your rows with a button and delete them with X link like yours.

<input type="button" value="add" id="btnAddRow">



<table id="customFields" align="center" cellspacing="0" cellpadding="0" border="0">

    <tr class="HeaderRow"><td colspan="7"></td></tr>

</table>

And this is the javascript code for handle add and remove process:

$("#btnAddRow").click(function () {

        counter += 1;

        $("#customFields").show();

        $("#customFields").append('<tr valign="top"><td> ' + counter + '</td>' + '<td>' + '<a href="javascript:void(0);" class="removeRow">Delete</a></td></tr>');

    });



    $("#customFields").on('click', '.removeRow', function () {

        var rowId = $(this).parent().parent().index() - 1;

        $(this).parent().parent().remove();



        if ($('#customFields tr').length == 2) {

            $("#customFields").hide();

        }

    });

As you see a dynamic process will be more useful for you.

answered Nov 9 '16 at 6:14

tdog

309113

You need to use class structure for your ids. Assume that you will add your rows with a button and delete them with X link like yours.

<input type="button" value="add" id="btnAddRow">



<table id="customFields" align="center" cellspacing="0" cellpadding="0" border="0">

    <tr class="HeaderRow"><td colspan="7"></td></tr>

</table>

And this is the javascript code for handle add and remove process:

$("#btnAddRow").click(function () {

        counter += 1;

        $("#customFields").show();

        $("#customFields").append('<tr valign="top"><td> ' + counter + '</td>' + '<td>' + '<a href="javascript:void(0);" class="removeRow">Delete</a></td></tr>');

    });



    $("#customFields").on('click', '.removeRow', function () {

        var rowId = $(this).parent().parent().index() - 1;

        $(this).parent().parent().remove();



        if ($('#customFields tr').length == 2) {

            $("#customFields").hide();

        }

    });

As you see a dynamic process will be more useful for you.

answered Nov 9 '16 at 6:14

tdog

309113

answered Nov 9 '16 at 6:14

tdog

309113

answered Nov 9 '16 at 6:14

tdog

309113

answered Nov 9 '16 at 6:14

tdog

309113

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl