Question

我正在尝试创建一个清单。如何使用JavaScript自动填充“检查列表状态”列？

我想做的是，例如：

如果文档类型等于客户协议，则检查列表状态应自动标记为是
如果文档类型等于空白，则状态检查列表应自动显示为否。

代码：

 <!DOCTYPE html>
<html>
<head>
<title>Asset Management Checklist Mockup</title>
 <script type='text/javascript'>

var Check List Status ='checklist';
var Client Agreement = 'client';
var Document type = 'doctype';


if ('doctype'='client')

{

document.getElementById('checklist').innerHTML = 'Yes';

} 
 </script> 
<style>

    h1 {color:blue;}
    h1 {text-align:center;}

    h2 {color:blue;
        text-align:center;
    }

    table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}

    </style>


</head>
<body>

<h1><em>Asset Management Department</em></h1>

  <h2>Preview of automated report generation of <em>Documents Check List</em> on SharePoint.<h2> 

  <table style="width:100%">
 <caption>Asset Management</caption>
 <tr>

<th>Client Name</th>
<th>Portfolio Number</th>
<th>Portfolio Type</th>
<th id='doctype'>Document Type</th>
<th>Month</th>
<th>Year</th>
<th id='checklist'>Check List Status</th>
  </tr>
 <tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='client'>Clinet Agreement</td>
<td>February</td>
<td>2001</td>
<th></th>

 </tr>
 <tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='email'>Email</td>
<td>February</td>
<td>2001</td>
<th></th>
 </tr>

<tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='passport'>Passport Copy</td>
<td>February</td>
<td>2001</td>
<th></th>
  </tr>

<tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='nation'>Nationality</td>
<td>February</td>
<td>2001</td>
<th></th>
 </tr>

 <tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td od='poa'>Proof of Address</td>
<td>February</td>
<td>2001</td>
<th></th>
 </tr>

 <tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='home'>Home Address</td>
<td>February</td>
<td>2001</td>
<th></th>
 </tr>

 </tr>

 <tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='pa'>Postal Address</td>
<td>February</td>
<td>2001</td>
<th></th>
 </tr>

 <tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='visa'>Visa Expiry Date</td>
<td>February</td>
<td>2001</td>
<th></th>
 </tr>

<tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='family'>Family Book</td>
<td>February</td>
<td>2001</td>
<th></th>
</tr>

</table>

</body>
</html>

Answer 1

这将有效;

function init(){
    var trs = document.getElementsByTagName('table')[0].children[1].children;
    var i;
    for (i = 0; i < trs.length; i += 1) {
        if (trs[i].children[3].innerHTML.indexOf('Clinet Agreement') > -1) {
            trs[i].children[6].innerHTML = 'yes';
        }
    }
}

如果你将其称为onload（<body onload="init();">），但你应该在HTML中添加id和class属性，以使其可以从JavaScript引用，从而更加健壮。你的桌子也需要一个标签。

Answer 2

Javascript变量名称不能包含空格。 var Check List Status ='checklist';之类的东西永远无法运作。
表达式if ('doctype'='client')永远不会成立。您正在比较明显不同的两个文字字符串（doctype和client）。
您似乎尝试选择ID为checklist的列，然后将innerHTML设置为“是”。由于2.代码永远不会到达，但如果可以，则只需将列标题设置为“是”。

您需要做的是：

逐行迭代表（document.querySelectorAll('#assets tr')为您提供行）
对于每一行，找到“文档类型”单元格（我已经为它们提供了所有类identifier，因为每个HTML页面可以使用多个类，而不是每个类别），并阅读其文本内容
如果文本内容为空，请在“检查列表状态”列中找到该单元格（我已将所有类check赋予它们）并将其设置为“否”。如果是“客户协议”，请将其设置为“是”。

以下是代码：

var clientAgreement = 'Client Agreement';

var docTable = document.getElementById('assets');
var rows = document.querySelectorAll('#assets tr');

// iterate rows
for (var i = 1; i < rows.length; i++) {
  // get cell for class "check"
  var checkCell = rows[i].getElementsByClassName("check")[0];
  var docTypeCell = rows[i].getElementsByClassName("identifier")[0];
  if (docTypeCell.textContent  === clientAgreement) {
    checkCell.innerHTML = "Yes";
  } else if (docTypeCell.textContent.length === 0) {
    checkCell.innerHTML = "No";
  }
}

这是一个JSBin example，其中还包含已编辑的HTML。

如何使用JavaScript自动填充列？

2 个答案: