показать все имена, найденные в таблице (tb), при нажатии кнопки отображения

  • Автор темы MaKeT
  • 35
  • Обновлено
  • 12, May 2024
  • #1
Мне нужно показать все имена, найденные в таблице tb, и отобразить их в виде списка при нажатии кнопки отображения. по jquery по коду ниже я могу добавить успех, но как взять данные из имени столбца и показать их в виде списка это то, что мне нужно на самом деле
 

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="ширина = ширина устройства" />

<title>Index</title>

<script src="~/Scripts/jquery-1.10.2.js"></script>

<script>

$(function () {

$("#btn").click(function ()

{

var x = $("#txt1").val();

var y = $("#txt2").val();

var z = $("#mycountry").val();

$("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "</td><td> <input type='button'class='c' value='Delete'/></td><td> <input type='button' class='d' value='Edit'/></td></tr>");

});

$("#tb").on("click", ".c", function () {

//$(this).parent().parent().remove();

$(this).closest('tr').remove();

});

$("#tb").on("click", ".d", function () {

var row = $(this).closest('tr').toggleClass("editing");

row.find("td").slice(0, 3).prop("contenteditable", row.hasClass("editing"));

});

});

</script>

<style>

.editing {

background: yellow;

}

</style>

</head>

<body>

<div>

ID<input type="text" id="txt1" /><br />

Name<input type="text" id="txt2" /><br />

Country: <select id="mycountry">

<option>---select---</option>

<option>Egypt</option>

<option>qatar</option>

<option>saudia</option>

<option>emarates</option>

</select><br />

<input type="button" value="add" id="btn" />

<input type="button" value="display" id="btndis" />

<table>

<thead>

<tr>

<td>

ID

</td>

<td>

Name

</td>

<td>

Country

</td>

<td>

</tr>

</thead>

<tbody id="tb"></tbody>

</table>

</div>

</body>

</html>

Код (разметка):

MaKeT


Рег
05 Jan, 2015

Тем
1

Постов
2

Баллов
12
  • 08, Jun 2024
  • #2
В соответствии с вашими потребностями «взять данные из имени столбца и отобразить их в виде списка» добавьте следующий код в конце кода jQuery.
 var list = $('<ul></ul>').appendTo('body');
$('#btndis').click(function()
{

$('#tb td:nth-child(2)').each(function()

{

list.append('<li>' + $(this).text() + '</li>');

});
});
Код (JavaScript):
 

Enrico


Рег
02 Oct, 2012

Тем
1

Постов
3

Баллов
13
Тем
49554
Комментарии
57426
Опыт
552966

Интересно