0

I am a beginner with sharepoint and typescript, i have dynamic table, and i want to get value of row when i click on

  private _renderList(items: ISPList[]): void {


let html: string = '<table class="TFtable" border=1 width=40% style="border-collapse: collapse;">';
html += `<th>Catégories</th>`;
items.forEach((item: ISPList) => {
html += `
<tr>

<td >${item.Categorie.Title}</td>

</tr>
`;
});

html += `</table>`;
/* html+= `<ul class="${styles.list}">
<li class="${styles.listItem}">
<span class="ms-font-l">${item.Question}</span>
</li>
</ul>`;*/


const listContainer: Element = this.domElement.querySelector('#spListContainer');
listContainer.innerHTML = html;

}
  • Is there any way you can provide a bit more detail? What are you trying to display? Is it when you click on a row in the list table? Sorry, but I am unclear as to what you are trying to accomplish. Thanks! – lazoDev Aug 15 at 12:43
  • i have a dynamic table; i want get the value of the row whene i click on it – khadi Aug 15 at 12:48
0

Modify the code as below.

private _renderList(items: ISPList[]): void {

    let tbl = document.createElement("table");
    tbl.setAttribute("class", "TFtable");
    tbl.setAttribute("border", "1");
    tbl.setAttribute("width", "100%");
    tbl.setAttribute("style", "border-collapse: collapse;");
    let tblBody = document.createElement("tbody");
    let headRow  = document.createElement("tr");
    let cell = document.createElement("th");
    let cellText = document.createTextNode("Catégories");
    cell.appendChild(cellText);
    headRow.appendChild(cell);
    tblBody.appendChild(headRow);
    items.forEach((item: ISPList) => {
      let currentRow  = document.createElement("tr");    
      let cell = document.createElement("td");      
      let cellText = document.createTextNode(`${item.Categorie.Title}`);
      cell.appendChild(cellText);
      currentRow.appendChild(cell);
      let createClickHandler = function(row: HTMLTableRowElement) {
        return function() {
          let tdValue = row.getElementsByTagName("td")[0].innerHTML;  
          alert("Value:" + tdValue);
        };
      };
      currentRow.onclick=createClickHandler(currentRow);
      tblBody.appendChild(currentRow);
    });
    tbl.appendChild(tblBody);
    document.getElementById("spListContainer").appendChild(tbl);
} 
  • Thank you; can you explain me more please; we use UI Fabric ? – khadi Aug 18 at 9:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.