CODEWITHSUNDEEP
javascriptjquery
Erlend K.H.
Erlend K.H.

Reputation: 468

javascript get external table row on click

I have a button:

<button id="external-list-row">Test</button>

in which I would like to change with a row from an external table on click. The external table is structured like this;

<table id="table_id">

<thead> 
<tr> 
    <th>X</th> 
    <th>Y</th> 
</tr> 
</thead> 

<tbody>
<tr> 
    <td> 
      <p>Row 1</p>
    </td> 
</tr>
<tr> 
    <td> 
      <p>Row 2</p>
    </td> 
</tr>
<tr> 
    <td> 
      <p>Row 3</p>
    </td> 
</tr>
</tbody> 

</table>

So my question is this; how can I replace "Test" in the button with the content of Row 1 with javascript?

As for the javascript, I'm not sure how I can get the content from row 1, and replace the button with it.

<script>
    var rows = document.getElementById('table_id').getElementsByTagName("tr");
    for (var i=0; i<rows.length; i++) {
        $('#external-list-row').onclick = function() {
        }};
</script>

Post comments:

I can access table data from other tables within the same html file, but I still don't know how to access data from tables in other html files. For example, if I try to access a videos liquid file from another liquid file, like photos, nothing happens when I press the button.

Fiddle of current code. It can replace the content of a list with the content of another, but the lists need to be on the same html file. https://jsfiddle.net/hgnymydL/

Upvotes: 0

Views: 478

Answers (5)

Mychal Hackman
Mychal Hackman

Reputation: 319

If you are wanting to replace the visible text "Test" in the button with the content of the cell clicked:

var tbl = document.getElementById('table_id');
var btn = document.getElementById('external-list-row');

tbl.onclick = function(ev){
    var trgt = ev.target;

    if(trgt.tagName === 'P' ||trgt.tagName === 'TD'){
        btn.textContent = trgt.textContent;
    }
};

Only one event handler is attached in this scenario.

Via event delegation we determine if it was a TD or P element that was clicked. If the rows are modified the function will still work.

Upvotes: 0

Sukrit
Sukrit

Reputation: 318

If you want to replace the button text with contents of the First Row ONLY then:

$('#external-list-row').html($('tr:first-child').html);

Of course you could wrap this in any event, so for example, on clicking the button: 

$('#external-list-row').on('click', function() {
    $(this).html($('tr:first-child').text());
});

BUT, based on the code you have given, I'm assuming you want to change the text after each click in which case you could do this:

var clickNumber = -1;

$('#external-list-row').on('click', function(event) {
    clickNumber = clickNumber + 1;
    //console.log('\n\nclickNUmber' + clickNumber);

    $('tbody tr').each(function(index, el) {
        //console.log('index: ' + index);
        var block = $(el).find('td p');
        if(index == clickNumber) {
            //console.log('entered if')
            //console.log(block.text());
            //console.log('----clickNUmber' + clickNumber);
            //console.log('index: ' + index);
            //console.log(el);
            $('#external-list-row').html(block.text());
        }
    });
});

jsFiddle: https://jsfiddle.net/zmb2b37t/

Hope that helps!

Upvotes: 0

Cereal
Cereal

Reputation: 3829

Well, the first thing you should understand, is that a table element has a rows property, so getting the first row is trivial.

var table = document.getElementById("table_id");
var firstRow = table.rows[0];

From there, you can use textContent to get the text content of the row. I believe that's what you were looking for.

You can also select the first row of a table with a CSS selector like so: 

var firstRow = document.querySelector("#table_id tbody tr");

Upvotes: 2

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

Here is jquery code of do this

    $('#table_id tr td').on('click', function(){
      $('#external-list-row').html($(this).html());
    })
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="external-list-row">Test</button>


<table id="table_id">

<thead> 
<tr> 
    <th>X</th> 
    <th>Y</th> 
</tr> 
</thead> 

<tbody>
<tr> 
    <td> 
      <p>Row 1</p>
    </td> 
</tr>
<tr> 
    <td> 
      <p>Row 2</p>
    </td> 
</tr>
<tr> 
    <td> 
      <p>Row 3</p>
    </td> 
</tr>
</tbody> 

</table>

Upvotes: -1

jmar777
jmar777

Reputation: 39649

$('#external-list-row').on('click', function() {
    $(this).text($('#table_id tbody tr:first').text());
});

Upvotes: 0

Related Questions