英文:
Is it possible to replace all the contents of the first row of an HTML table without assigning an ID to each <td> element?
问题
You can achieve your goal by selecting all the <td> elements within the first row and then updating their content individually. Here's the modified JavaScript code to do that:
function fn() {
var firstRow = document.querySelector('table tr');
var customText = ["New Name", "newemail@example.com"]; // Replace with your custom text
var tdElements = firstRow.querySelectorAll('td');
for (var i = 0; i < customText.length; i++) {
tdElements[i].textContent = customText[i];
}
}
This code selects the first row of the table, then selects all the <td> elements within it and updates their content individually with your custom text when the button is clicked.
英文:
I have a simple html table consisting table headers and a first row as shown below:
<html>
<table>
<thead>
<th>name</th>
<th>email</th>
</head>
<tr>
<td>Kipchoge</td>
<td>k@gmail.com</td>
</tr>
</table>
<input type="button" id="btn" value="btn" onClick="fn()"/>
</html>
How can I change all the contents of the first row with my custom text when I click the button?
I have tried assigning my new text directly to document.getElementByTagName("tr")[1].innerHTML with no success as shown in the code below:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function fn(){
var d = document.getElementsByTagName('tr');
var customtext = "";
d[1].innerHTML = customtext;
}
<!-- language: lang-html -->
<table>
<thead>
<th>name</th>
<th>email</th>
</head>
<tr>
<td>Kipchoge</td>
<td>k@gmail.com</td>
</tr>
</table>
<input type="button" id="btn" value="btn" onClick="fn()"/>
<!-- end snippet -->
I know that what I have done in the above code is trying to assign a new value to an existing innerHTML value which can be easily achieved when you use getElementById, but my idea is to change all the values of the first row once without assigning an id to each <td></td>.
Is there an alternative approach? Or what should I do to my approach in order to solve such a problem?
I tried changing existing innerHTML with new text as shown below:
d[1].innerHTML = customtext;
But that did not work.
答案1
得分: 1
getElementsByTagName 函数返回一个 活动的 HTMLCollection，它是一个类似数组的元素集合。在你的代码中，你试图在表格行节点内添加文本。表格行 - 或 tr - 只允许包含 td 元素。在下面的示例中，我使用 innerHTML 来设置包含带有文本的 td 的 HTML。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function fn(){
var tr = document.getElementsByTagName('tr')[0];
tr.innerHTML = '<td>Text 1</td><td>Text 2</td>';
}
<!-- language: lang-html -->
<table>
<thead>
<th>name</th>
<th>email</th>
</thead>
<tr>
<td>Kipchoge</td>
<td>k@gmail.com</td>
</tr>
</table>
<input type="button" id="btn" value="btn" onClick="fn()"/>
</html>
<!-- end snippet -->
英文:
The function getElementsByTagName returns a live HTMLCollection which is an array-like-object of elements. In your code you are trying to add text inside a table row node. Table row - or tr - is only allowed to have td elements inside it. In the following example, I am using innerHTML to set HTML that represents the that contains the td with the text inside them.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function fn(){
var tr = document.getElementsByTagName('tr')[0];
tr.innerHTML = `<td>Text 1</td><td>Text 2</td>`;
}
<!-- language: lang-html -->
<table>
<thead>
<th>name</th>
<th>email</th>
</thead>
<tr>
<td>Kipchoge</td>
<td>k@gmail.com</td>
</tr>
</table>
<input type="button" id="btn" value="btn" onClick="fn()"/>
</html>
<!-- end snippet -->
答案2
得分: 0
使用更强大的 querySelector 方法，通过使用 CSS 选择器从 DOM 中选择元素。在您的情况下，您可以使用 tbody tr:first-of-type 选择第一行。
const firstTableRow = document.querySelector('tbody tr:first-of-type');
firstTableRow.cells[0].textContent = 'Foo';
firstTableRow.cells[1].textContent = 'foo@bar.com';
<table>
<thead>
<th>name</th>
<th>email</th>
</thead>
<tbody>
<tr>
<td>Kipchoge</td>
<td>k@gmail.com</td>
</tr>
<tr>
<td>Kipchoge</td>
<td>k@gmail.com</td>
</tr>
</tbody>
</table>
这是您提供的代码的翻译部分。
英文:
Use the more powerful querySelector method to select elements from the DOM by using CSS Selectors. In your case you can select the first row with tbody tr:first-of-type.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const firstTableRow = document.querySelector('tbody tr:first-of-type');
firstTableRow.cells[0].textContent = 'Foo';
firstTableRow.cells[1].textContent = 'foo@bar.com';
<!-- language: lang-html -->
<table>
<thead>
<th>name</th>
<th>email</th>
</thead>
<tbody>
<tr>
<td>Kipchoge</td>
<td>k@gmail.com</td>
</tr>
<tr>
<td>Kipchoge</td>
<td>k@gmail.com</td>
</tr>
</tbody>
</table>
<!-- end snippet -->
答案3
得分: 0
你可以以这种方式遍历表格标题：
<html>
<table>
<thead>
<th>姓名</th>
<th>电子邮件</th>
</thead>
<tr>
<td>Kipchoge</td>
<td>k@gmail.com</td>
</tr>
</table>
<input type="button" id="btn" value="按钮" onClick="fn()"/>
</html>
// 你可以选取 thead 并获取其中所有的 th 元素
const head = document.getElementById("thead-id") /* 或者 */ document.querySelector('thead')
// 如果你只想获取 thead 中第一行的 th（假设 thead 中有多行）
const row = document.querySelector("thead tr:first-of-type") /* 或者 */ document.querySelector("#thead-id tr:first-of-type")
const thList = head.querySelectorAll("th");
// 或者
const thList = row.querySelectorAll("th");
// 现在 th 列表就像一个列表或数组，你可以通过索引选择项目，或者运行 forEach 循环
thList.forEach((th) => {
th.innerText = "自定义文本"
})
英文:
You can iterate over the table heads in this way
<html>
<table>
<thead>
<th>name</th>
<th>email</th>
</head>
<tr>
<td>Kipchoge</td>
<td>k@gmail.com</td>
</tr>
</table>
<input type="button" id="btn" value="btn" onClick="fn()"/>
</html>
// you can target thead and get all ths that are present inside it
const head = document.getElementById("thead-id") /* or */ document.querySelector('thead')
// if you don't want all th in thead only the ones in first row of the thead
//(incase you have more than one rows in thead)
const row = document.querySelector("thead tr:first-of-type") /* or */ document.querySelector("#thead-id tr:first-of-type")
const thList = head.querySelectorAll("th");
// or
const thList = row.querySelectorAll("th");
// Now th list acts like a list or an array where you can target items using index or run a forEach loop
thList.forEach((th) => {
th.innerText = "customText"
})
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论