Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Unable to get parents and find working 2

Status
Not open for further replies.
tshad

tshad

Programmer
Jul 15, 2004
386
US
I don't understand where you can use parents and find. I have code that use both but in some cases they don't work

What I am trying to do is start from some location inside of a "td" and go up to the parent "tr" and then do a find on class of a label in the same row. It works in other cases fine.

If I have the following:
Code: 
<table style="border:1px solid black">
   <thead>
      <tr>
         <td>Name</td>
         <td>Address</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input id="input3" type="text" />
         </td>
         <td>
            <button id="button1" class="row-buttons"/>
            <span>
               <label class="nc-count">5</label>
            </span>
         </td>
      </tr>
      <tr>
         <td>
            <input id="input4" type="text" />
            <input id="input5" type="text" />
            <input id="input6" type="text" />
         </td>
         <td>
            <button id="button2" class="row-buttons" />
            <span>
               <label class="nc-count">5</label>
            </span>
         </td>
      </tr>
   </tbody>
</table>

<button id="button3">Save</button>

And I use the following script to push a button in the grid and go find an input. I save the jquery that finds that to use later after I come back from a modal window where I am doing a save.

I push a button that is outside of the grid and the jquery wants to update the text in the label from the same row I pushed the button on.

But if I try to use "...parents('tr')", I get an error, even though I am pointing at the 'td' element.

If I try to use parentElement (twice) to get to the "tr", I can't use the find to get to the label element.

Why not?

Here is the script:
Code: 
<script type="text/javascript">
   var td;
   var saveLocation;

   $(".row-buttons").click(function () {
      debugger;

      // the following points at the "input2" element.  
      // I then save this location so I can come back to this row from a modal dialog

      saveLocation = $(this)[0].parentElement.parentElement.children[0].children[1];
   });

   $("#button3").click(function () {
      debugger;
      // saveLocation.parentElement.parentElement points at the "tr"
      // I want to go up to the "tr" element then find the label that has "nc-count" in this row

      // Following statements give me an "object doesn't support property..." error (parents and find);

      saveLocation.parents('tr');

      // 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'parents'

      saveLocation.parentElement.parentElement.find('.nc-count');

      //0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'parents'
   });
</script>

This works fine:

$('#input2').parents('tr').find('.nc-count')[0].innerText

Which is really the same thing.

Thanks,

Tom
 
Sort by date Sort by votes
To get parent on a given object you can use the parentNode property

I tried this example:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Table / Parent</title>
</head>
<body>

  <h1>Table / Parent</h1>

  <table id="mytable" style="border:1px solid black">
   <thead>
      <tr>
         <td>Name</td>
         <td>Address</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input id="input3" type="text" />
         </td>
         <td>
            <button id="button1" class="row-buttons"/>
            <span>
               <label class="nc-count">1</label>
            </span>
         </td>
      </tr>
      <tr>
         <td>
            <input id="input4" type="text" />
            <input id="input5" type="text" />
            <input id="input6" type="text" />
         </td>
         <td>
            <button id="button2" class="row-buttons" />
            <span>
               <label class="nc-count">2</label>
            </span>
         </td>
      </tr>
   </tbody>
  </table>

  <button id="table-button">Save</button> 

  <p id = "mymessage">
     
  </p>
  
  <script type="text/javascript">
    // create object for HTML elements
    var table =  document.querySelector('#mytable');
    var message = document.querySelector('#mymessage');
    
    // create object for row-buttons
    var rowButtons =  table.getElementsByClassName("row-buttons");
    console.log(rowButtons);
    
    for (var rowButton of rowButtons) {
       console.log(rowButton)
       // install callback function on the row buttons
       rowButton.onclick = function(e) {
         var rowButtonId = e.target.id;
         console.log('Pressing Button :"' + rowButtonId + '"')

         // get parent table row
         var tr = this.parentNode.parentNode;
         console.log(tr)

         // create empty result object
         var rowValues = {};          

         // get all inputs
         var inputs = tr.getElementsByTagName("input");
         console.log(inputs);
         for (input of inputs) {
            // add to object attributes
            rowValues[input.id] = input.value;
         }
         
         // get nc-count class
         nc_count = tr.getElementsByClassName("nc-count")[0];
         console.log(nc_count);
         // add to object attributes
         rowValues["nc-count"] = nc_count.innerHTML; 
         // show result
         console.log(rowValues);
         printObject(rowValues); 
       }
    }
    
    // create object Save button
    var tableButton =  document.querySelector('#table-button');    
    console.log(tableButton);
    // install callback function for Save button
    tableButton.onclick = function(e) {
      var tableButtonId = e.target.id;
      console.log('Pressing Button :"' + tableButtonId + '"');

      // get everything from table
      tableValues= {};
      // all input values  
      var inputs = table.getElementsByTagName("input");
      console.log(inputs);
      for (input of inputs) {
         // add to object attributes
         tableValues[input.id] = input.value;
      }
      // all nc-count values
      nc_counts = table.getElementsByClassName("nc-count");
      console.log(nc_counts);
      for (var i=0; i < nc_counts.length; i++) {
         // add to object attributes
         tableValues["nc-count[" + i + "]"] = nc_counts[i].innerHTML;     
      }
      // show result
      console.log(tableValues);
      printObject(tableValues);    
    }    
    
    function printObject (obj) {
       //obj = object, arr = array
       //message.innerHTML = '';
       var arr = [];
       for (attr in obj) {
          arr[arr.length] = attr +': "' + obj[attr] + '"';
       }
       var str = arr.join(", ");
       // print resulting string
       console.log(str);
       message.innerHTML = str;
    }

  </script>

</body>
</html>

I'm not sure if it works like you expected, but: When I click on the Row Button I get everything from the row. When I click on the global Save button under the table I get everything from table.

For example:
I enter some strings in the 3 input boxes of row 1: ('foo', 'bar', 'baz')
and in the input boxes of row 2: ('spam', 'eggs', 'foobar')
Now when I press the button in the first row I get
Code: 
input1: "foo", input2: "bar", input3: "baz", nc-count: "1"
when I press the button in the second row I get
Code: 
input4: "spam", input5: "eggs", input6: "foobar", nc-count: "2"
and when I press the Save button under the table I get everything
Code: 
input1: "foo", input2: "bar", input3: "baz", input4: "spam", input5: "eggs", input6: "foobar", nc-count[0]: "1", nc-count[1]: "2"

Btw, I don't know, what you want to achieve with the nc-count values.

The results will be written in the document, but to better understand the code look at the temporary information written with console.log() in the console (in FireFox press F12).
 
Upvote 0 Downvote
But if I try to use "...parents('tr')", I get an error, even though I am pointing at the 'td' element.
Click to expand...


object.parent is singular, the production of 'children' is asexual in HTML :) so elements only have one parent.


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
I tried the parentNode as well:

saveLocation.parentNode.parentNode.find('tr')

The first parentNode points at the "td" element/node and the second points at the "tr".

But why doesn't the 'find' work. I should now be able to use the "find" to get the element with the class 'nc-count'. But it says the object does not support the method "find". What objects do???

Thanks,

Tom
 
Upvote 0 Downvote
But why doesn't the 'find' work.
Click to expand...

.find is a jquery method not a native DOM method, so the answer to "What objects do???" is; ... ... none of them.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
The jQuery find() method works well.
I was curious what is jQuery, so I have tried to transform the example posted before into jQuery:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script 
    src="[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">[/URL]
  </script>
  <title>Table / Parent</title>
</head>
<body>

  <h1>Table / Parent</h1>

  <table id="mytable" style="border:1px solid black">
   <thead>
      <tr>
         <td>Name</td>
         <td>Address</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input id="input3" type="text" />
         </td>
         <td>
            <button id="button1" class="row-buttons"/>
            <span>
               <label class="nc-count">1</label>
            </span>
         </td>
      </tr>
      <tr>
         <td>
            <input id="input4" type="text" />
            <input id="input5" type="text" />
            <input id="input6" type="text" />
         </td>
         <td>
            <button id="button2" class="row-buttons" />
            <span>
               <label class="nc-count">2</label>
            </span>
         </td>
      </tr>
   </tbody>
  </table>

  <button id="table-button">Save</button> 

  <p id = "mymessage">
     
  </p>
  
  <script type="text/javascript">
    /* Using jQuery */
    // create object for HTML elements
    var table =  $(document).find('#mytable');
    var message = $(document).find('#mymessage');
    
    // create object for row-buttons
    var rowButtons = $("table").find('.row-buttons');
    console.log(rowButtons);
    
    $(rowButtons).each(function () {
       rowButton = this;
       console.log(rowButton)
       // install callback function on the row buttons
       $(rowButton).click(function(e) {
         var rowButtonId = e.target.id;
         console.log('Pressing Button :"' + rowButtonId + '"')

         // get parent table row
         var tr =  $(this).parent().parent();
         console.log(tr)

         // create empty result object
         var rowValues = {};         

         // get all inputs
         var inputs = $(tr[0]).find("input");
         console.log(inputs);           
         for (var j = 0; j < inputs.length; j++) {
            input = inputs[j];
            // add to object attributes
            rowValues[input.id] = input.value;
         }
         
         // get nc-count class
         nc_count = $(tr).find(".nc-count")[0];
         console.log(nc_count);
         // add to object attributes
         rowValues["nc-count"] = nc_count.innerHTML; 
         // show result
         console.log(rowValues);
         printObject(rowValues); 
       })
    })   

    // create object Save button
    var tableButton = $(document).find('#table-button')[0]; 
    console.log(tableButton);
    // install callback function for Save button
    $(tableButton).click(function(e) {
      var tableButtonId = e.target.id;
      console.log('Pressing Button :"' + tableButtonId + '"');

      // get everything from table
      tableValues= {};
      // all input values  
      var inputs = $(table).find("input");
      console.log(inputs);
      $(inputs).each(function () {
         // add to object attributes
         tableValues[this.id] = this.value;
      })      
      // all nc-count values
      nc_counts = $(table).find(".nc-count");
      console.log(nc_counts);
      $(nc_counts).each(function (index) {
         // add to object attributes
         tableValues["nc-count[" + index + "]"] = this.innerHTML;     
      })
      // show result
      console.log(tableValues);
      printObject(tableValues);    
    })    
    
    function printObject (obj) {
       //obj = object, arr = array
       //message.innerHTML = '';
       var arr = [];
       for (attr in obj) {
          arr[arr.length] = attr +': "' + obj[attr] + '"';
       }
       var str = arr.join(", ");
       // print resulting string
       console.log(str);
       $(message).html(str);
    }

  </script>

</body>
</html>
 
Upvote 0 Downvote
There is no requirement to use find in this context...
Code: 
    var table =  $(document).find('#mytable');
var message = $(document).find('#mymessage');

You can just use the selector..
Code: 
    var table =  $('#mytable');
var message = $('#mymessage');

It's the equivalent of GetElementById, but returns a JQuery object not a DOM object.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
374
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
274
rogerte
rogerte
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
104
ggriffit
ggriffit
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
345
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top