Question

我需要显示表#tb中的所有名称，并在用户点击display按钮时使用jQuery显示为列表。

我的代码如下。我可以成功添加，但如何从列名中获取数据并显示为列表？

@{
    Layout = null;
}

<!DOCTYPE html>    
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <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>

Answer 1

试试这个：

https://jsfiddle.net/ionutmihai1995/euk6xkzp/

$('#btndis').click(function(){
        $('ul').empty();
            $("#tb").find('tr').each(function(i,el){
                var $tds = $(this).find('td');
              //for name
                $('ul').append("<li>"+$tds.eq(1).text()+"</li>");
            }); 
});

Answer 2

$("#btndis").click(function() {
    $("body").append("ul");
    for(var i = 1; i <= $("tr > td").length; i++) {
        $("ul").append("li").addClass("li.li-"+i);
        $("li.li-"+i).append($("td:nth-child("+i+")").text());
    }
}

说明：

首先，我们创建ul来存储数据。然后，我们使用tr循环迭代每个td子项（for），我们创建一个li并将数据存储到其中。它将按照要求显示在列表中。

Answer 3

请检查以下代码。

$("#btndis").on('click',function(){
    $("body").append("<ul id='listNames''></ul>");
    $('#tb td:nth-child(2)').each(function() {
       $("#listNames").append("<li>"+$(this).text()+"</li>")
  });
})

请参阅此链接上的代码。 https://jsfiddle.net/gq5f5ux2/2/

点击显示按钮迭代循环遍历所有tr＆gt; td-second子项以获取所有名称，然后在正文中附加UL和LI以显示所有名称列表。

Answer 4

为colum添加一个名为“name”的类，然后您可以迭代并选择元素中的文本

<td class="name">John</td>

然后在JQuery中：

$(document).ready(function() {
  $('#tb').find('tr').each(function() {
    var name = $(this).find('.name').text();
    $('#result').append('<p>'+name+'</p>');
  });
});

Working example

Answer 5

检查此JsFiddle Demo

<强> HTML

<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>
  <ul id="ulNames">
  </ul>
</div>

<强> JS

$(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"));
  });

  $('#btndis').on('click', function() {
    //gets table
    var oTable = document.getElementById('tb');

    //gets rows of table
    var rowLength = oTable.rows.length;

    //loops through rows    
    for (i = 0; i < rowLength; i++) {

      //gets cells of current row  
      var oCells = oTable.rows.item(i).cells;

      // get your cell info here

      var cellVal = oCells.item(1).innerHTML;
      $('#ulNames').append('<li>' + cellVal + '</li>');

    }
  });
});

<强> CSS

.editing {
  background: yellow;
}

单击显示按钮时显示在表中找到的所有名称

5 个答案: