Скажите, что у вас есть TextView
, называемый etx
. Затем вы использовали бы следующий код:
final SpannableStringBuilder sb = new SpannableStringBuilder("HELLOO");
final StyleSpan bss = new StyleSpan(android.graphics.Typeface.BOLD); // Span to make text bold
final StyleSpan iss = new StyleSpan(android.graphics.Typeface.ITALIC); //Span to make text italic
sb.setSpan(bss, 0, 4, Spannable.SPAN_INCLUSIVE_INCLUSIVE); // make first 4 characters Bold
sb.setSpan(iss, 4, 6, Spannable.SPAN_INCLUSIVE_INCLUSIVE); // make last 2 characters Italic
etx.setText(sb);
Если вы можете использовать экспериментальную функцию, вы можете использовать Element.closest
, чтобы найти предка tr
, а затем просто использовать document.querySelector
с помощью селектора CSS, найдите элемент td
с class="note"
.
Я также поставил более уродливое (но все еще работающее) решение с помощью Node.parentElement
- это сломается, если вы реструктурируете свой HTML!
document.addEventListener('click', (event) => {
/*if (event.target.className === 'interactive-btn') {
//looks nice, but experimental - probably shouldn't be used in production code
var noteEl = event.target.closest('tr').querySelector('td[class=note]');
noteEl.innerHTML = 'Changed!'
}
});*/
if (event.target.className === 'interactive-btn') {
//a little uglier but works if your HTML structure doesnt change
var noteEl = event.target.parentElement.parentElement.querySelector('td[class=note]');
noteEl.innerHTML = 'Changed!'
}
});
<table class="my-table">
<thead>
<tr>
<th>Account</th>
<th>Note</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="account">account one</td>
<td class="note">1234567890</td>
<td class="time">7/10/2018
<button class="interactive-btn">Button</button>
</td>
</tr>
<tr>
<td class="account">account two</td>
<td class="note">abcdefghijklmn</td>
<td class="time">7/10/2018
<button class="interactive-btn">Button</button>
</td>
</tr>
</tbody>
</table>