Как выполнять операции с выбранными строками в чекбоксе в таблице в HTML
У меня есть таблица, и я хочу выполнить некоторые операции (предположим, вывод выбранных строк в предупреждении) над строками, которые пользователь проверил. Ниже приведен мой подход, который с треском проваливается.
<html>
<head>
<title>Introduction</title>
<script>
function kro(){
var x = document.getElementsByName('checks');
for (var i = 0;i < x.length;i++){
if (x[i].checked == 1)
var selecteddata+=x[i].value+"\n";
}
alert(selecteddata)
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>UserName</th>
<th>Post</th>
<th>Comments</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ram</td>
<td>Sahi hai</td>
<td>Ravan:No</td>
<td><input type = "checkbox" name = "checks" id='one'/> </td>
</tr>
<tr>
<td>Ravan</td>
<td>Kidnap done</td>
<td>Ram:I'll kill you</td>
<td><input type = "checkbox" name = "checks" id='two'/> </td>
</tbody>
<p id = "check" ></p>
<button onclick = "kro()">
Result
</button>
</body>
</html>
Я хочу выполнить дальнейшие операции с выбранной строкой в коде, я просто хочу вывести выбранные строки с помощью предупреждения. Как это сделать?
Ожидаемый результат-
если отмечена первая строка, то
Ram Sahi hai Ravan:No
Теперь он выводит undefinedon в поле предупреждения.
звучит так, как будто вы заявили, что это неправильно ....
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Строка var selecteddata+=x[i].value+"\n"; выдаст ошибку, поэтому объявите переменную вне цикла for. Также вам нужно установить значение для флажка, иначе это будет так on
Чтобы получить контент со всех td, установите родительский флажок и получите closesttr. Затем получите text из каждого td и добавьте его в локальную переменную блока if.
function kro() {
var x = document.getElementsByName('checks');
var selecteddata = '';
for (var i = 0; i < x.length; i++) {
if (x[i].checked) {
let _tt = '';
x[i].closest('tr').querySelectorAll('td').forEach(function(item) {
_tt += item.textContent.trim();
})
selecteddata += _tt + "\n";
}
}
alert(selecteddata)
}<table>
<thead>
<tr>
<th>UserName</th>
<th>Post</th>
<th>Comments</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ram</td>
<td>Sahi hai</td>
<td>Ravan:No</td>
<td><input type = "checkbox" name = "checks" id='one' value='test1' /> </td>
</tr>
<tr>
<td>Ravan</td>
<td>Kidnap done</td>
<td>Ram:I'll kill you</td>
<td><input type = "checkbox" name = "checks" id='two' value='test2' /> </td>
</tbody>
<p id = "check"></p>
<button onclick = "kro()">
Result
</button>но он выводит значение тега флажка, я хочу напечатать всю строку, например Ram Sahi hai Ravan:No.
Вы неправильно определяете и объединяете переменную.
должно быть
var foo = ''; // declare outside of loop
for (var i=0; i<5; i++) {
foo += i + '\n' // concat to string
}
console.info(foo) //display itДругой способ сделать это - использовать массив и присоединиться к нему в конце.
var foo = []; // declare outside of loop
for (var i=0; i<5; i++) {
foo.push(i) // add to array
}
console.info(foo.join('\n')) //display it by joining the array itemsЯ не хочу, чтобы индекс печатался, я хочу, чтобы напечаталось все содержимое строки
Он показывал вам, как это сделать, это не решение для копирования и вставки. ржу не могу. Если вы хотите получить ТУ, вам нужно выбрать родительский ТУ и прочитать текст.
Теперь он выводит object ElementHTMLelement, как это сделать (вторая часть вашего комментария)?
var selecteddata+=x[i].value+"\n";вы определяете переменную и делаете+=, это ваша проблема. Определите его вне цикла