在表格的 td 中显示进度条

Question

以下是我的进度条代码。

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 width="350px">
                        <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" width="350px">

                        <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>

Answer 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" width="350px">

                <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

这些是关键点：

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

代码：

HTML

<table>
    <tr>
        <td width="350px" 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 width="350px" 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 width="350px" 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
        });
      }
    }
  );
}