如何在单击添加按钮时用动态值填充 <td>

How to fill the <td> with dynamic value on add button click

要求:

我想在单击添加按钮后用动态值填充 td 值。

代码

<script>
    function addRow(in_tbl_name)
    {
        var tbody = document.getElementById(in_tbl_name);
        var row = document.createElement("TR");
        var td1 = document.createElement("TD")
        var strHtml1= "<Rule Id>";
        td1.innerHTML = strHtml1.replace(/!count!/g,count);
        var td2 = document.createElement("TD")
        var strHtml2 = "<Rule Name>7;
        td2.innerHTML = strHtml2.replace(/!count!/g,count);
        row.appendChild(td1);
        row.appendChild(td2);
</script>

<td>Selected Plans
    <br>
    <table ID="in_tbl_name" border="1">
    <tr>
        <td>Rule Id</td>
        <td>Rule Name</td>
    </tr>
</table>


<form action="/SubmitRule" method="post" model="command">
    <table>
        <tr>
            <td>
                <select name="Select"><c:forEach items="${listRules}" var="rule">
                    <option value="${rule.id}">
                        <c:out value="${rule.id}" />
                    </option>
                    </c:forEach>
                </select>
            </td>           
        <td>
            <input type="submit" onClick="addRow('in_tbl_name')"
            VALUE="AddRow">
        </tr>
    </table>
 </form>
 </td>  

我正在获取 id 的值,但不明白如何将该值放入 td

其实你现在的代码里面有很多Javascript和HTML的问题,你需要多看看Javascript和HTML深入学习之前的课程。

否则你需要编辑你的代码和你处理问题的方式,以避免一些问题,例如:

  • 在你的 javascript 函数中你不需要传递 table id 作为参数(你在 HTML 上做错了),你可以只需在 Javascript 上使用 id 而不传递它,因为您在这里处理的是单个 table。

  • 您的 javascript 功能没有正确关闭,这将在控制台上引发错误(按 F12 可以看到它,它应该正确关闭并且最后,您没有将 tbody 附加到 table,因此永远不会添加该行。

  • 并且您的 HTML 代码也不正确,例如您将整个代码放在 <td> 中,而 <table><tr>,你可以只用一个<div>来包裹整个内容。

  • 在您的 Javascript 代码中您缺少一些引号 ",并且在您的 HTML 代码中您缺少一些应该修复的结束标记,并且table header 的第一个 <td> 可以替换为 <th> 个元素。


我在这里尝试更新您的代码以使其更加连贯:

<script>
  function addRow() {
      var table = document.getElementById('in_tbl_name');
      var row = document.createElement("TR");
      var td1 = document.createElement("TD")
      var strHtml1 = "<Rule Id>";
      td1.innerHTML = strHtml1.replace(/!count!/g, "count");
      var td2 = document.createElement("TD")
      var strHtml2 = "<Rule Name>";
        td2.innerHTML = strHtml2.replace(/!count!/g,count);
        row.appendChild(td1);
        row.appendChild(td2);
        table.appendChild(row);

    }
</script>

<div>Selected Plans
  <br>
  <table ID="in_tbl_name" border="1">
    <tr>
      <td>Rule Id</td>
      <td>Rule Name</td>
    </tr>
  </table>


  <form action="/SubmitRule" method="post" model="command">
    <table>
      <tr>
        <td>
          <select name="Select">
            <c:forEach items="${listRules}" var="rule">
              <option value="${rule.id}">
                <c:out value="${rule.id}" />
              </option>
            </c:forEach>
          </select>
        </td>
        <td>
          <input type="submit" onClick="addRow()" VALUE="AddRow" />
        </td>
      </tr>
    </table>
  </form>
</div>

然后您需要更多地关注代码的逻辑以及如何解决添加新行的问题。

这里是在 table 中添加行并从 table

中删除最后添加的行的代码
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

        <script>
            var count=0;
            function addRow(tableId)
            {
                count++;
                var element1=document.getElementById(tableId);
                var tr=document.createElement("tr");
                tr.id="row"+count;

                var td1=document.createElement("td");
                var td2=document.createElement("td");
                var td3=document.createElement("td");

                td1.innerHTML="row"+count+" col 1";
                td2.innerHTML="row"+count+" col 2";
                td3.innerHTML="row"+count+" col 3";

                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);

                element1.appendChild(tr);

                alert('row'+count);
            }
            function removeRow(tableId)
            {
                var element1=document.getElementById(tableId);
                var row=document.getElementById('row'+count);
                alert('row'+count);
                element1.removeChild(row);
                count--;
            }
        </script>

    </head>
    <body>
        <h1>Hello World!</h1>


        <a href="javascript:addRow('table')">Add Row</a><a href="javascript:removeRow('table')" >Remove</a>
        <table id="table" border='1'>


        </table>

    </body>
</html>