使用javascript更改表格td

我是JavaScript新手，所以对我来说很简单。我想使用javascript更改表格中的数据。我到处寻找一个合适的教程，但我还没有找到任何。这是我的代码。使用javascript更改表格td

function trans() { 
 
    var table = document.getElementById("table"); 
 
    var row = table.getElementsByTagName("tr")[2]; 
 
    var td = row.getElementsByTagName("td")[0]; 
 

 
    td.innerHTML = "Julius"; 
 
}

**css** 
 
table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
    font-family: calibri; 
 
} 
 
tr, 
 
th, 
 
td { 
 
    border: 2px solid black; 
 
    padding: 10px 10px 10px 10px; 
 
} 
 
thead { 
 
    background-color: black; 
 
    color: white; 
 
} 
 
tbody { 
 
    background-color: white; 
 
    color: black; 
 
} 
 
.center { 
 
    text-align: center; 
 
} 
 
.caption { 
 
    text-align: center; 
 
} 
 
button { 
 
    background-color: blue; 
 
    color: white; 
 
    border-radius: 5px; 
 
    height: 25px; 
 
}

<html> 
 

 
<body> 
 
    <table id="table" title="Employment status verses Living Conditions"> 
 
    <caption>Employment status verses Living Conditions</caption> 
 
    <thead> 
 
     <tr> 
 
     <th colspan="3" class="caption">Employment status verses Living Conditions</th> 
 
     </tr> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>State</th> 
 
     <th>Condition</th> 
 
     </tr> 
 
    </thead> 
 
    <tr> 
 
     <td>Antony</td> 
 
     <td>Employed</td> 
 
     <td>Poor</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Grace</td> 
 
     <td>Student</td> 
 
     <td>Wealthy</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jane</td> 
 
     <td>Sponsored</td> 
 
     <td>Self actualization</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Christine</td> 
 
     <td colspan="2" class="center"><i>Unknown</i> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="2">James and John</td> 
 
     <td>Fishermen</td> 
 
     <td>Spiritual</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Brothers</td> 
 
     <td>Disciples</td> 
 
    </tr> 
 
    </table> 
 
    <button onclick="trans()">Change name</button> 
 
</body> 
 

 
</html>

当我运行它给了我下面的错误代码，

{ 
    "message": "Uncaught TypeError: table.getElementByTagName is not a function", 
    "filename": "http://stacksnippets.net/js", 
    "lineno": 96, 
    "colno": 15 
}

我已经改变了getElementByTagName到getElementsByTagName但它仍然给我一个错误，是什么我的代码错了，我该怎么办才能修复它。找到我的jsfiddle here

来源

2016-09-22 AntonyMN

这是'的getElementsByTagName（）'你缺少一个计划** S ** – Ted

记住，你甚至在THEAD TR所以行变成table.getElementByTagName（ “表> TR”）[1]，因为该行能够被发现，但数据将是未定义的，因为没有td（来自thead）。 –

您在代码的最后一行中缺少s。

此外，数据已经包含要编辑的元素，所以没有必要调用getElementsByTagName上的数据。

改变这一行

data.getElementByTagName("td")[0].innerHTML = "Julius"

要

data.innerHTML = "Julius";

来源

2016-09-22 12:20:56

这工作： Code snippet
试试这个：

function trans() { 
    var table = document.getElementById("table"); 
    var row = table.getElementsByTagName("tr")[2]; 
    var td = row.getElementsByTagName("td")[0]; 

    td.innerHTML = "Julius"; 
}

您选择了不具有第一，只有th在里面，你也忘了"s"在"getElementsByTagName"。

因为与"Tag"你可以得到更多然后1元素，你需要添加“S”，当它是由ID它是有道理的，你会得到只有一个项目因此没有“S”是必要的。

来源

2016-09-22 12:22:52

这应该就够了。

function trans() { 
    var table = document.getElementById("table"), 
     tr = table.getElementsByTagName('tr')[2], 
     td = tr.getElementsByTagName('td')[0]; 

     td.innerHTML = "Julius"; 
}

问题：

为了选择某个键 “[2]” 你需要使用.getElementsByTagName代替.getElementsByTagName;
你指定了错误的TR。桌子上有tr。所以即使修复了第一个问题，你也不会得到正确的结果。

来源

2016-09-22 12:40:10 Mihailo

不，它不会。请解释问题是什么以及你改变了什么。 – Ted

和其他人一样，问题在于'getElementByTagName'需要用'getElementsByTagName'来改变，我们可以从中选择一个特定的键（** [2] **），当这个问题得到解决时，让它工作的问题很简单。我已经测试过它，它可以100％工作。 – Mihailo

现在改进了吗？ @Ted – Mihailo

使用javascript更改表格td

回答

相关问题