Jump to content
fatkatie

get id of next row element in table

Recommended Posts

Greetings to All,

I have a table with multiple rows.  These row are added and removed dynamically based on this or that.

In row 'A' I have a select box with its onchange event set to a javascript function.  I need to discover, from within this function, if the next row has an id with a particular format (id string starts with 'shipping').  How can I get this id? 

- There is always a next row.  It always has an ID.

- Additional TD elements may, or may not, follow the TD containing the select box element.

- This is a 'single level' table construct (no tables within tables).

Thank you.

Share this post


Link to post
Share on other sites
1 hour ago, fatkatie said:

There is always a next row

A table of infinite length? That must be memory-intensive.

When you say the next row has an id=shippingXXX are you saying the <tr> element has that id or the row contains a <td> with that id (or even an element contained in a <td> has that id)?

Sample HTML would assist, as would any code you have tried.

Share this post


Link to post
Share on other sites

This may not be what you you want but it should get you on your way

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simplified Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $().ready( function() {
        
        $("#testa").change( function() {
            var row = $(this).parent().parent()
            var nextrow = $(row).next()
            var id = $(nextrow).attr("id")
            if (id.indexOf('shipping')==0) {
                $(nextrow).remove()
            }
        })
    })
</script>
<style type="text/css">
    table {border-collapse: collapse; width: 500px}
    td { padding: 16px; text-align: center}
</style>
</head>
<body>
<table border='1'>
    <tr>
        <td>
            <select name='testa' id='testa'>
                <option value=''>-?-</option>
                <option value='1'>1</option>
                <option value='2'>2</option>
            </select>
        </td>
        <td>123456</td>
    </tr>
    <tr id='shippingxxx'>
        <td>234567</td>
        <td>345678</td>
    </tr>    
    <tr id='yyy'>
        <td>34567</td>
        <td>45678</td>
    </tr>    
</table>
</body>
</html>

 

  • Like 1

Share this post


Link to post
Share on other sites

lol  The shampoo routine... wash rinse repeat. No, just a few rows.

Thanks.  I can't use jQuery but I see what your doing.  I'll do a w3schools thing and look at the dom things.

And you nailed the html.  That's exactly what I'm doing.

Thanks again.

Share this post


Link to post
Share on other sites

This is what I wound up with (you need your wits).

   var next_row_id = e.parentNode.parentNode.nextElementSibling.id

Thanks again for the road map.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.