Question

我有这段代码：

-Html和JS

     <body>
<table>
<tr>
<td class="first">100</td>
<td class="second">20</td>
</tr>
</table>
    <script>
    document.body.onload = function(){
         var firstTdVal = document.getElementsByClassName('first')[0].innerHTML;
       var secondTdVal = document.getElementsByClassName('second')[0].innerHTML;
       var valueToBeShown = parseInt(firstTdVal)/parseInt(secondTdVal);
       document.getElementsByClassName('second')[0].innerHTML = valueToBeShown ;
    }
    </script>
</body>

代码效果很好，但我遇到了问题。例如，其他人会使用＆＃34; .third＆＃34; class，＆＃34; .fourth＆＃34; ...具有不同的值：240,451。所有这些类都必须划分为类＆＃34; .second＆＃34;。每个类的结果应该显示在他们的拥有td。如何保持代码复杂性？

Answer 1

您可以通过自己的表行中的其他值来添加第三列＆＃34;结果＆＃34;。

然后，您可以迭代表行并轻松访问每行中的值：

#Formats username column, sets different title for column
$format= @{Expression={$_.UserName};Label="UserNameColumnNameHere"} #Add comma and add formatting for other columns after here
(new-object Windows.Security.Credentials.PasswordVault).RetrieveAll() | % { $_.RetrievePassword(); $_ } | format-table $format

我做了JSFiddle的分叉。

Answer 2

可能比您需要的更多，但这显示了如何迭代数组，创建动态元素（并填充它们）以及如何动态分配类和管理新创建元素的CSS。祝你好运。

＆＃13;

 static final long ONE_HOUR = 60 * 60 * 1000L;
 dt1=jDateChooser1.getDate();
        dt2=jDateChooser2.getDate();
        String strdtver1=(String) sdf.format(jDateChooser1.getDate());
        String strdtver2=(String) sdf.format(jDateChooser2.getDate());
        long diff=((dt2.getTime()-dt1.getTime()+ONE_HOUR)/(ONE_HOUR*24));
        diffday=Long.toString(diff);
        jTextField4.setText(diffday+"  day(s)");

＆＃13;

let thead = document.querySelector('table thead tr');
let rows = document.querySelectorAll('tbody tr');
let dividends = ['first', 'third', 'fourth'];

// Dynamically Create Table Headers
dividends.forEach(x => {
  let new_th = document.createElement('th');
  
  // capitalize the class to use in the table header
  let title = x.replace(/\b([a-z])/g, (s) => {
    return s.toUpperCase()
  });
  
  // prepend "result-" to the class (e.g., "result-first")
  new_th.className = `result-${x}`;  
  new_th.appendChild(document.createTextNode(`${title} Result`));
  thead.appendChild(new_th);
});

// Dynamically Generate Result Values (and new table data cells)
Array.prototype.forEach.call(rows, function(row, index) {
  let divisor = +row.querySelector('.second').textContent;

  dividends.forEach(handle => {
    let dividend = +row.querySelector(`.${handle}`).textContent;
    let quotient = dividend / divisor;
    let new_cell = document.createElement('td');
    
    // append "-value" to the class (e.g., "first-value")
    new_cell.className = `${handle}-value`;
    new_cell.appendChild(document.createTextNode(quotient)); // add value
    row.appendChild(new_cell);
  });
});

＆＃13;

/* superfluous table styling */
body {
  font-size: 16px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "Segoe UI", "Calibri LIght", "Roboto Light", "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
  font-weight: 300;
}
table {
  border-collapse: collapse;
  border: 1px solid;
}
thead {
  border-bottom: 1px solid;
}
td {
  border-left: 1px solid;
  text-align: left;
}
td,
th {
  padding: 4px;
}
/* end page + table styling */


/* demonstrates how to grab the first part of the class name */

[class^=result-] {
  color: #09c;
}
/* demonstrates how to grab the last part of the class name */

[class$=-value] {
  color: #900;
  text-align: right;
}

＆＃13;

multimpe元素的功能相同

2 个答案: