在表格的 td 中显示进度条

Posted 2023-05-09

【中文标题】在表格的 td 中显示进度条

【英文标题】：show progressbar in td of the table

【发布时间】：2020-09-23 02:33:09

【问题描述】：

以下是我的进度条代码。

success: function (response) 
    var abc = response;
    if (response != "Error!") 
        $( counter: 1 ).animate( counter: (response + 1) ,
            
                step: function () 

                    $('.outerDiv').text(Math.ceil(this.counter) + '% Success');
                    $('.outerDiv').css( 'color': 'green', 'font-size': '100%' );
                    $('.innerDiv').progressbar(
                        value: response,
                    )
                
            )
    
    else 
        $('.innerDiv').each(function ()  $(this).text(response); )
        $('.innerDiv').css( 'color': 'red', 'font-size': '110%', 'text-align': 'left' );
    

我想在各自的tds 中显示进度条。我在每一行都有buttons，并且进度条应该只显示在该行中。问题是，如果我用 id 声明 innerDiv 和 outerDiv，那么进度条只显示在一行中，因为 id 是 html 中的唯一元素。如果我为 innerDiv 和 outerDiv 声明类，那么进度条会显示在表的所有行中，这不是所需的输出。它必须只显示在一行中。我使用了innertext 和innerhtml，但它在浏览器中显示未定义innertext 的错误。请指导。

HTML 代码

          <td >
                        <div class="innerDiv"   style=" height:18px;text-align:center; width:150px;  color:black">
                        </div>
                        <div class="outerDiv" style="height:18px;width:100px;">
                        </div>
                    </td>

表格html代码

                       @for (int i = 0; i < Model.mdl_Playlists.Count; i++)
            
                <tr>
                    <td id="playlistid">
                        @Html.DisplayFor(m => m.mdl_Playlists[i].playlist_id)
                    </td>
                    <td id="playlistname">
                        @Html.DisplayFor(m => m.mdl_Playlists[i].playlist_name)
                    </td>
                    <td id="playlistid">
                        <a href="#demo11" data-toggle="collapse" class="sched"> <span class="glyphicon glyphicon-time"> </span> </a>
                    </td>
                    <td>
                        <button id="btnGet" class="sendbtn"><span class="glyphicon glyphicon-arrow-right"> </span> </button>
                    </td>
                    <td>
                        @Html.DisplayFor(m => m.mdl_Playlists[i].created_date)
                    </td>
                    <td id="state" class="progressTD" >

                        <div  class="innerDiv" style=" height:18px;text-align:center; width:150px;  color:black">
                        </div>
                        <div  class="outerDiv" style="height:18px;width:100px;">
                        </div>
                    </td>
                </tr>
            
        </table>

【问题讨论】：

也许您可以在 td 上设置一个 id 并在单击按钮时将其传递，以便直接指向 id 而不是指向类

@Luciano 可以举个例子吗

好的，您可以通过添加html代码和完整的点击按钮代码来编辑问题吗？我会按照描述进行更改

查看答案并告诉我

【参考方案1】：

编辑 1 与使用的 for 循环相比，只需使 td 的 id 唯一。在下面的示例中，我假设 playlist_id 是唯一的，我使用它来组成 id，或者您也可以使用变量 i。

HTML

    @for (int i = 0; i < Model.mdl_Playlists.Count; i++)
    
        <tr>
            <td id="playlistid">
                @Html.DisplayFor(m => m.mdl_Playlists[i].playlist_id)
            </td>
            <td id="playlistname">
                @Html.DisplayFor(m => m.mdl_Playlists[i].playlist_name)
            </td>
            <td id="playlistid">
                <a href="#demo11" data-toggle="collapse" class="sched"> <span class="glyphicon glyphicon-time"> </span> </a>
            </td>
            <td>
                <button id="btnGet" class="sendbtn"><span class="glyphicon glyphicon-arrow-right"> </span> </button>
            </td>
            <td>
                @Html.DisplayFor(m => m.mdl_Playlists[i].created_date)
            </td>
            <td id="@("playList" + Model.mdl_Playlists[i].playlist_id)" class="progressTD" >

                <div  class="innerDiv" style=" height:18px;text-align:center; width:150px;  color:black">
                </div>
                <div  class="outerDiv" style="height:18px;width:100px;">
                </div>
            </td>
        </tr>
    

---

我用假数据做了一个现场演示（没有你的完整代码我不能更精确）：

https://stackblitz.com/edit/js-2plenp

这些是关键点：

在进度条上设置 id 为 td 我使用 progressTD 类来检索要在单击按钮时使用的 id（在您的场景中可能不需要） 单击按钮检索 ID 并将其传递给进度条函数 在进度条函数中，我使用 id 指向正确的 td ($("#" + id + ".innerDiv"))

代码：

HTML

<table>
    <tr>
        <td  id="row1" class="progressTD">
            <div class="innerDiv" style=" height:18px;text-align:center; width:150px;  color:black">
            </div>
            <div class="outerDiv" style="height:18px;width:100px;">
            </div>
        </td>
        <td>
            <button id="btnGet1" class="sendbtn"><span class="glyphicon glyphicon-arrow-right"> </span> btn1</button>
        </td>
    </tr>
    <tr>
        <td  id="row2" class="progressTD">
            <div class="innerDiv" style=" height:18px;text-align:center; width:150px;  color:black">
            </div>
            <div class="outerDiv" style="height:18px;width:100px;">
            </div>
        </td>
        <td>
            <button id="btnGet2" class="sendbtn"><span class="glyphicon glyphicon-arrow-right"> </span> btn2</button>
        </td>
    </tr>
    <tr>
        <td  id="row3" class="progressTD">
            <div class="innerDiv" style=" height:18px;text-align:center; width:150px;  color:black">
            </div>
            <div class="outerDiv" style="height:18px;width:100px;">
            </div>
        </td>
        <td>
            <button id="btnGet2" class="sendbtn"><span class="glyphicon glyphicon-arrow-right"> </span> btn3</button>
        </td>
    </tr>
</table>

按钮点击

$(function() 
  $(".sendbtn").click(function() 
    const rowID = $(this)
      .closest("tr")
      .find(".progressTD:first")
      .attr("id");

    performProgressBar(rowID, "");
  );
);

进度条功能

function performProgressBar(id, response) 
  var abc = response;
  if (response != "Error!") 
    for (let i = 0; i < 100; i++) 
      progressBar(id, i);
    
   else 
    $("#" + id + " .innerDiv").each(function() 
      $(this).text(response);
    );
    $("#" + id + " .innerDiv").css(
      color: "red",
      "font-size": "110%",
      "text-align": "left"
    );
  


function progressBar(id, progressValue) 
  $( counter: 1 ).animate(
     counter: progressValue + 1 ,
    
      step: function() 
        $("#" + id + " .outerDiv").text(Math.ceil(this.counter) + "% Success");
        $("#" + id + " .outerDiv").css( color: "green", "font-size": "100%" );
        $("#" + id + " .innerDiv").progressbar(
          value: progressValue
        );
      
    
  );

【讨论】：

抱歉，它没有按预期工作。我可以在所有三行中看到进度条。

在我的示例中，仅加载与您单击的按钮对应的进度条。告诉我你希望看到什么。

嗨@Luciano，在你的现场演示中，我看不到所有三行的进度条。我只能看到成功标签和百分比。我想在受人尊敬的 innerdiv 中看到绿色进度条。你能帮我吗

在我的示例中缺少图形部分，我没有加载引导库和进度条的样式表，为此您只能找到文本。在此处查看进度条的图形示例：jqueryui.com/progressbar

好吧@Luciano。尽管如此，当我在我身边实现您的代码时，进度条和成功标签显示在所有三个 td 中。这可能是因为我的 td 在 for 循环中。我将再次更新我的代码并将其展示给您。