Взятие элемента из таблицы

253

06 декабря 2017, 23:06

Как взять значение из ячейки и подставить его в ссылку? Есть таблица

    <table id="history">
        <tr class="row">
            <th class="nyr">ID</th>
        </tr>
        <tr class="row">
            <td class="cell">1</td>
            <td class="cell">2</td>
        </tr>
        <tr class="row">
            <td class="cell">3</td>
            <td class="cell">4</td>
        </tr>
    </table>

Как например кликнуть по 4му элементу и его содержимое подставить в ссылку? Есть наработка, но не знаю в правильном направлении

http://..../users/del/?id=" + document.getElementById('history').rows[i].cells[i].innerHTML

Answer 1

Можно передавая this ссылку в саму функцию. В href1 в данном решении храню саму ссылку. Такой способ удобнее, чем заранее хранить массив ссылок, так как все данные хранятся сразу в ячейке.

function setHref(ell){ 
  var a = document.getElementById('myHref'); 
  var val = ell.innerHTML; 
  var link = ell.getAttribute("href1"); 
  a.innerHTML = val; 
  a.setAttribute('href', link); 
}

<table id="history"> 
  <tr class="row"> 
    <th class="nyr">ID</th> 
  </tr> 
  <tr class="row"> 
    <td class="cell" href1="link1" onclick="setHref(this)">1</td> 
    <td class="cell" href1="link2" onclick="setHref(this)">2</td> 
  </tr> 
  <tr class="row"> 
    <td class="cell" href1="link3" onclick="setHref(this)">3</td> 
    <td class="cell" href1="link4" onclick="setHref(this)">4</td> 
  </tr> 
</table> 
 
<a id="myHref" href="/myPage">ссылка</a>

В данном примере можно и просто href написать вместо href1, у себя в коде я бы так и сделал, написал href1 для ясности для новичков, что это мой кастомный аттрибут.

Answer 2

По клику вставить в ссылку можно, например, так:

function setHref(iValue){ 
  var a = document.getElementById('myHref'); 
  a.innerHTML = 'ссылка_id_'+iValue; 
  a.setAttribute('href', '/myPage?id='+iValue); 
}

<table id="history"> 
  <tr class="row"> 
    <th class="nyr">ID</th> 
  </tr> 
  <tr class="row"> 
    <td class="cell" onclick="setHref(1)">1</td> 
    <td class="cell" onclick="setHref(2)">2</td> 
  </tr> 
  <tr class="row"> 
    <td class="cell" onclick="setHref(3)">3</td> 
    <td class="cell" onclick="setHref(4)">4</td> 
  </tr> 
</table> 
 
<a id="myHref" href="/myPage">ссылка</a>

Answer 3

правильно мыслите, меняйте j, i и смотрите ячейки таблицы

var j = 2; 
var i = 0; 
 
alert("http://..../users/del/?id=" + document.getElementById('history').rows[j].cells[i].innerHTML);

 <table id="history"> 
        <tr class="row"> 
            <th class="nyr">ID</th> 
        </tr> 
        <tr class="row"> 
            <td class="cell">1</td> 
            <td class="cell">2</td> 
        </tr> 
        <tr class="row"> 
            <td class="cell">3</td> 
            <td class="cell">4</td> 
        </tr> 
    </table>

а теперь генерируем ссылку в зависимости от нажатия на ячейку таблицы:

function urlgen(){ 
  alert("http://..../users/del/?id=" + event.target.innerHTML); 
}

<table onclick=urlgen() id="history"> 
        <tr  class="row"> 
            <th class="nyr">ID</th> 
        </tr> 
        <tr class="row"> 
            <td class="cell">1</td> 
            <td class="cell">2</td> 
        </tr> 
        <tr class="row"> 
            <td class="cell">3</td> 
            <td class="cell">4</td> 
        </tr> 
    </table>