Ячейка таблицы в виде ссылки

Grasss

Active Member
Регистрация
02.11.2017
Сообщения
44
Код:
<tbody class="addresses monospace">
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
Нужно, чтобы вторая ячейка <td>&nbsp;</td> в каждой создаваемой строке была представлена в виде ссылки.
Т.е ссылка должна быть прибавлена к уже имеющимся значениям ячеек.
(значение второй ячейки в каждой строке будет разное)

Примерно так:
Код:
<tr><td>&nbsp;</td><td><a href="https://site.ru/search=cololor1">cololor1</a></td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td><a href="https://site.ru/search=cololor2">cololor2</a></td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td><a href="https://site.ru/search=cololor3">cololor3</a></td><td>&nbsp;</td><td>&nbsp;</td></tr>
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 144
Ну можно попробовать через onclick, так как вы пока на этом уровне знаний )

HTML:
<table>
  <tr>
    <td>&nbsp;</td>
    <td><a onclick="linkSearch(this)">cololor1</a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><a onclick="linkSearch(this)">cololor2</a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><a onclick="linkSearch(this)">cololor3</a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
JavaScript:
function linkSearch(el) {
  let text = el.textContent;
  window.open('https://exapmle.com/search=' + text, 'blank');
}
 

Grasss

Active Member
Регистрация
02.11.2017
Сообщения
44
Ну можно попробовать через onclick, так как вы пока на этом уровне знаний )

HTML:
<table>
  <tr>
    <td>&nbsp;</td>
    <td><a onclick="linkSearch(this)">cololor1</a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><a onclick="linkSearch(this)">cololor2</a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><a onclick="linkSearch(this)">cololor3</a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
JavaScript:
function linkSearch(el) {
  let text = el.textContent;
  window.open('https://exapmle.com/search=' + text, 'blank');
}
Тут дело в том, что строк будет генерироваться много)
а значения во 2 ячейке будут отличаться.
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 144
Вы код пробовали?
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 144
Ну так что не так-то? Выше предложенный ответ это делает.
Или надо чтобы не редактировать каждую строку? Один код на все строки?

HTML:
<table>
  <tr>
    <td>&nbsp;</td>
    <td>cololor1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>cololor2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>cololor3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
JavaScript:
document.querySelectorAll('table td:nth-child(2)').forEach(el=>{
    el.addEventListener('click', item=>{
        let text = item.target.textContent;
        window.open('https://exapmle.com/search=' + text, 'blank');
    })
})
 

Grasss

Active Member
Регистрация
02.11.2017
Сообщения
44
Ну так что не так-то? Выше предложенный ответ это делает.
Или надо чтобы не редактировать каждую строку? Один код на все строки?

HTML:
<table>
  <tr>
    <td>&nbsp;</td>
    <td>cololor1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>cololor2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>cololor3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
JavaScript:
document.querySelectorAll('table td:nth-child(2)').forEach(el=>{
    el.addEventListener('click', item=>{
        let text = item.target.textContent;
        window.open('https://exapmle.com/search=' + text, 'blank');
    })
})
Да, все верно. Один код на все строки (чтоб вторая ячейка была в виде кликабельной ссылки)
 
Верх Низ