Question

这里我试图添加圆角。截至目前，只有两排圆角受到影响。在使用添加行按钮添加行时，请帮助为所有行添加圆角。

<html lang="en">
        <head>
          <meta charset="utf-8">
          <title>Expenses</title>
          <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
          <script src="//code.jquery.com/jquery-1.10.2.js"></script>
          <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
          <link rel="stylesheet" href="/resources/demos/style.css">
          <style type="text/css">
         table.expense {
            width: 800px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            border-color:#009900;}
            td.a {
            width: 800px;
            -moz-border-radius: 20px;
            border-radius: 20px;
         }
         td.b {
            width: 800px;
            -moz-border-radius: 20px;
            border-radius: 20px;
         }
         td.c {
            width: 800px;
            -moz-border-radius: 20px;
            border-radius: 20px;
         }
         td.d {
            width: 800px;
            -moz-border-radius: 20px;
            border-radius: 20px;
         }
            </style>


          <script>

function addRow(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var counts = rowCount - 1;

    var cell1 = row.insertCell(0);
    var expense_date = document.createElement("input");
    expense_date.type = "text";
    expense_date.name = "expenses[" + counts + "].expense_date";
    cell1.appendChild(expense_date);
    $('input[name="' + expense_date.name + '"]').datepicker();
    //add this line.


    var cell2 = row.insertCell(1);
    var expense_against = document.createElement("input");
    expense_against.type = "text";
    expense_against.name = "expenses[" + counts + "].expense_against";
    cell2.appendChild(expense_against);

    var cell3 = row.insertCell(2);
    var amount = document.createElement("input");
    amount.type = "text";
    amount.name = "expenses[" + counts + "].amount";
    cell3.appendChild(amount);

    var cell4 = row.insertCell(3);
    var paid_by = document.createElement("input");
    paid_by.type = "text";
    paid_by.name = "expenses[" + counts + "].paid_by";
    cell4.appendChild(paid_by);

}
$(function() {
    $( "#datepicker" ).datepicker();

  });
</script>
</head>


<body>
         <form action="submit" method="post">

        <p align ="center"><font size = "6" face = "Cursive">Expenses</font></p>

        <TABLE class = "expense" id="expensesTable" border = "4" align="center">
                <TR>
                        <TD class = "a" align = "center"><font size = "4" face = "Cursive">EXPENSE_DATE</font></TD>
                        <TD class = "b" align = "center"><font size = "4" face = "Cursive">EXPENSE_AGAINST</font></TD>
                        <TD class = "c" align = "center"><font size = "4" face = "Cursive">AMOUNT</font></TD>
                        <TD class = "d" align = "center"><font size = "4" face = "Cursive">PAID_BY</font></TD>
                </TR>
                <TR>
                        <TD class = "a"><INPUT type="text" id="datepicker" name="expenses[0].expense_date" /></TD>
                        <TD class = "b"><INPUT type="text" name="expenses[0].expense_against" /></TD>
                        <TD class = "c"><INPUT type="text" name="expenses[0].amount" /></TD>
                        <TD class = "d"><INPUT type="text" name="expenses[0].paid_by" /></TD>

                </TR>
        </TABLE> 


        <p align ="center">
        <INPUT type="button" value="Add More" name="expenses[0].more" onclick="addRow('expensesTable')" />
        <input type="submit" value="SUBMIT" />
        </p>
        </form>



        </body>
        </html>

Answer 1

你的问题是＆＃34; addRow＆＃34;函数没有设置新的cel类，添加

cell1.setAttribute("class", "a");
cell2.setAttribute("class", "b");
cell3.setAttribute("class", "c");
cell4.setAttribute("class", "d");

到它的结尾会修复它

Demo

添加CSS时，为连续的行添加CSS

1 个答案: