Сменить таблицу td с помощью javascript

Я новичок в Javascript, так что успокойся. Я хочу изменить данные внутри таблицы с помощью javascript. Я везде искал подходящий учебник, но я его не нашел. Это мой код.Сменить таблицу td с помощью javascript

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()' вы пропускаете ** с ** – Ted

Помните, вы тр даже в THEAD так изменить строку table.getElementByTagName («table> тр») [1], так как строка может но данные будут неопределенными, поскольку нет td в th (от 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"; 
}

Вы выбрали первый tr, который не имеет td, только th в нем и вы также забыли "s" в "getElementsByTagName".

источник

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. Поэтому даже при исправлении проблемы номер 1 вы не получите правильный результат.

источник

2016-09-22 12:40:10 Mihailo

нет. пожалуйста, объясните, в чем проблема и что вы изменили. – Ted

Проблема, как ранее указывалось ранее, заключалась в том, что 'getElementByTagName' необходимо было изменить с помощью' getElementsByTagName', из которого мы могли бы выбрать конкретный ключ (** [2] **). Когда это исправлено, вопрос о его работе просто. Я тестировал его, и он работает на 100%. – Mihailo

Неужели теперь лучше? @Тед – Mihailo

Сменить таблицу td с помощью javascript

ответ

Смежные вопросы