使用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

回答

相關問題