Нажмите кнопку и получите значения ячеек в одной строке с помощью JavaScript (или jquery) - PullRequest
Новая
       11

Нажмите кнопку и получите значения ячеек в одной строке с помощью JavaScript (или jquery)

0 голосов
/ 29 декабря 2018

Итак, я создал html-таблицу с циклом for, содержащим список объектов из моего приложения на python.Теперь я хочу реализовать функцию удаления, и для этого мне нужно получить значения ячеек из той же строки, где была нажата кнопка.Я бы предпочел сделать это на JavaScript, а не на jquery, поскольку у меня нет никакого опыта с этим 

<table class="table" id="table">
<tr>
    <th scope="col">#</th>
    <th scope="col">Titel</th>
    <th scope="col">Interpret</th>
</tr>

{% for song in songs %}
<tr>

    <td>{{song.id}}</td>
    <td>{{song.titel}}</td>
    <td>{{song.interpret}}</td>
    <td>
        <button class="btn btn-danger" type="submit" id="delete_button" name="delete_button" onclick="get_values(this)">Delete</button>
    </td>
</tr>
{% endfor %}
</table>

EDIT: Я посмотрел упомянутые .parentNode и .previousSibling @Barmar и попытался написать функцию для существующего onclick = "get_values ​​(this)", которую я уже добавил к кнопкам выше 

<script>
function get_values(this) {
var td = this.parentNode;
var x = td.previousSibling.innerHTML;
console.log(x);
}
</script>

Ответ console.logсказал: "ReferenceError: Не могу найти переменную: get_values"

РЕДАКТИРОВАТЬ 2:

Так что я наконец-то добился прогресса в избежании ReferenceError.Я пробовал функцию get_values ​​(this), которая была запрещена, поэтому я изменил ее на функцию get_values ​​(x).

<script>
function get_values(x) {
    var td = x.parentNode;
    interpret = td.previousSibling;
    interpret_value = interpret.innerHTML;
    titel = interpret.previousSibling.previousSibling.innerHTML;

    console.log(titel);
    console.log(interpret_value);
    }
</script>
</body>

Проблема, с которой я столкнулся сейчас, заключается в том, что код фактически работает без свойств .innerHTML.Так что я на самом деле возвращаюсь, например, в прошлое Рождество и блин !.Но сейчас я борюсь с получением значений без тд-тэгов.Я попробовал это с .value aswell.

РЕДАКТИРОВАТЬ 3: Хорошо, я предполагаю, что произошла небольшая ошибка, теперь я сам ее разобрал, вот код, который я сейчас использую, и он дает мне правильные значения.Я до сих пор не понимаю, почему мне нужно использовать двойной .previousSibling, но пока он работает, я в порядке.Спасибо всем, кто пытался помочь, я действительно ценю это.Желаю вам, ребята, с Новым годом. 

<script>
function get_values(x) {
    var td = x.parentNode;
    interpret = td.previousSibling.previousSibling;
    interpret_value = interpret.innerHTML;
    titel = interpret.previousSibling.previousSibling;
    titel_value = titel.innerHTML;


    console.log(interpret);
    console.log(interpret_value);
    console.log(titel);
    console.log(titel_value);
}
</script>

Ответы [ 2 ]

0 голосов
/ 29 декабря 2018

Редактировать: удалить тип кнопки, кнопка отправки типа в HTML приводит к ненужной перезагрузке страницы 

<button class="btn btn-danger" id="delete_button" name="delete_button" onclick="get_values(this)">Delete</button

Добавить прослушиватель щелчка на кнопке: 

document.getElementById("delete_button").onclick = function(this){
console.log(this)
}
0 голосов
/ 29 декабря 2018

Прежде всего, предполагая, что у вас уже есть кнопка, вы должны кодировать функциональность нажатия кнопки, как это.(инициализация кнопки в html для пояснения): 

<input type="button" id="deleteBtn" value="Delete">

Далее, в Javascript, вы добавите этот код, чтобы кнопка вызывала функцию «удалить» при нажатии (здесь я назвал функцию удаления »delCells "): 

let delBtn = document.querySelector("#deleteBtn");
delBtn.addEventListener("click", delCells);

Это код, который сделает кнопку динамической (чтобы она вызывала функцию удаления при нажатии)

Теперь в этой функции удаления, есливы хотите перебрать серию элементов в таблице, используя Javascript, вы сначала идентифицируете таблицу как ваш узел:

var table = document.getElementById("mytab1");

Теперь, когда у вас есть узел, указывающий на вашу таблицуВы можете просто пройти по нему с помощью цикла for:

for (var i = 0, row; row = table.rows[i]; i++) { .... }

Поскольку вы хотите получить значения всех элементов подряд, вы можете создать массив и сохранить всезначений в этом, затем обработать их в хеш и далее, как вы решите: 

let arr = []  //before the for loop
arr[i] = table.row[i]

Теперь, сложив все это вместе в вашей функции действия (которая запускается при нажатии кнопки), выбудет иметь: 

let arr = []
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
  arr[i] = table.row[i]
}

На данный момент у вас будет массив всех элементов, поэтому вы можете приступить к тому, что вы пытались выполнить

Просмотрите эту ссылку для получения дополнительной информации по этой теме: Какперебирать строки и ячейки таблицы в JavaScript?

...