how to pass the value selected in an HTML table to a javascript function

Question

I have three tables in my HTML form. Each table has different number of rows and upon double click of any row its value should be passed to a javascript function. These passed values should get appended to a text box present in the same form.

I have given Ids to all three tables and am passing this tableId to the function. Also, how to retrieve the value selected from the table into this javascript function.

What I have done so far is below. A small snippet of one table and the function. Am a newbie to HTML, so hoping for a few helpful answers. :)

    <table id="functionTable" >
            <tr>
               <td class="groupObjectTitle" nowrap>Functions</td>
            </tr>
            <td>
            <div class="easyui-panel">
                        <li>
                            <span>Mathematical</span>
                            <ul id="mathFunctions">
                                <li> <a href="javascript:" ondblclick="transferText('functionTable')">&nbsp; + </a></li>
                            ........
function transferText(table){
        var i;
        var k;
        var tabs= document.getElementById(table);
        alert("transferText called on double click");

        for (i=0;i<tabs.rows.length;i++){
            alert(tabs.rows[i].selected);    
            <!-- How to retrieve the value from the selected row. -->

        }
    }

What are the ID's of the other tables? You cannot have them be the same. — Tech Savant
– Tech Savant, Commented May 13, 2015 at 7:49

Tech Savant · Accepted Answer · 2015-05-13 08:06:46Z

1

Make sure your table ID's are NOT the SAME!

Solution 1

Use this and pass it as an argument to your function.

html

<a id="somevalue" href="javascript:" ondblclick="transferText('functionTable', this)">&nbsp; + </a>

javascript

    function transferText(table, element) {
        //element = clicked elment, so if you need the ID or some other data..   
        var elementId = element.id;
    }

Solution 2 (html5 req)

Use the html5 data attribute.

html

<a id="myid" data-mydata1="somedatavalue" data-mydata2="someothervalue" href="javascript:" ondblclick="transferText('functionTable', this)">&nbsp; + </a>

javascript

 function transferText(table, value) {
      var mydata = document.querySelector('#myid');
      var data1 = value.dataset.mydata1;
      var data2 = value.dataset.mydata2;
      //etc...
  }

edited May 13, 2015 at 8:06

answered May 13, 2015 at 7:51

Tech Savant

3,7671 gold badge21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arunabh Over a year ago

The tableIds of all tables is offcourse different. In Solution 1, can you please tell me how do I fetch the value of the row selected inside the javascript function transferText. I made the function call as onclick="transferText('tableId', this)" and then tried to access element.value inside transferText function but it comes out to be undefined.

Tech Savant Over a year ago

That's because "this" refers to the link that was clicked. I'm not sure what you mean by row value? What element are you trying to get the value of? Or are you trying to get the innerHtml of an element such as <td>innerHtml</td>

Tech Savant Over a year ago

When you say row value are you trying to get the entire html of that row with td's included ?

Collectives™ on Stack Overflow

how to pass the value selected in an HTML table to a javascript function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related