Web Analytics Made Easy -
StatCounter How would I build this table row? - CodingForum

Announcement

Collapse
No announcement yet.

How would I build this table row?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How would I build this table row?

    I already have a table that is built. But when I click on the add row button, I'm trying to add a new row with `<td>`. The table has 7 columns. 6 columns are data, and the 7th column is a delete button.


    I'm trying to add:
    • <td contenteditable='true'></td> to the 6 columns, and

    • "<td style='text-align: center'>" + "<a id='deleteButton' onclick=\x22deleteRow(this)\x22>" + "&times;" + "</a>" + "</td>"; to the 7th column




    This is what I have so far...Is there a way to accomplish this easily with a for loop?

    --js.html
    Code:
        function addRow(element) //table button -- add row
        {
          console.log("adding row");
          
          var tableId = element.parentNode.parentNode.parentNode.parentNode.id; //table id
          var getTable = element.parentNode.parentNode.parentNode.parentNode; //table
          var getTBody = getTable.getElementsByTagName("tbody")[0]; //tbody
          
          var newTableRow = document.createElement("tr");
          var newTableData = document.createElement("td");
          
          if (tableId == 'table-values')
          {
            console.log("true -- table values");
            
            newTableRow.appendChild(newTableData);
            getTBody.appendChild(newTableRow);
          }
          else //tableId == 'table-noValues'
          {
            console.log("false -- table no values");
            
            newTableRow.appendChild(newTableData);
            getTBody.appendChild(newTableRow);
          }
    
          //add row to last row + 1 in table
          //add row to last row + 1 in spreadsheet
          //make the new row editable -- contenteditable = true
          
          google.script.run
            .withSuccessHandler(addSuccess)
            .withFailureHandler(addFailure)
            .addRow();
        }

    I also have 2 more questions:
    • Is there a way to change the contenteditable="true" to contenteditable="false" when a value is entered in the <td>?
    • And how would I save the data that is entered into the table, to the spreadsheet?
    • I'm thinking something like, when the contenteditable="true" changes to false, it sends the value to the spreadsheet or something...


  • #2
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Messing with a Table</title>
    </head>
    
    <body>
    A Table
    <button onclick="addRow();">Add a row</button>
    <table id="myTable">
    <tr>
    <td>colunmn 1</td>
    <td>colunmn 2</td>
    <td>colunmn 3</td>
    <td>colunmn 4</td>
    <td>colunmn 5</td>
    <td>colunmn 6</td>
    <td>colunmn 7</td>
    </tr>
    <tr>
    <td>colunmn 1</td>
    <td>colunmn 2</td>
    <td>colunmn 3</td>
    <td>colunmn 4</td>
    <td>colunmn 5</td>
    <td>colunmn 6</td>
    <td>colunmn 7</td>
    </tr>
    <tr>
    <td>colunmn 1</td>
    <td>colunmn 2</td>
    <td>colunmn 3</td>
    <td>colunmn 4</td>
    <td>colunmn 5</td>
    <td>colunmn 6</td>
    <td>colunmn 7</td>
    </tr>
    </table>
    <td style='text-align: center'>
    
    
    <script type="text/javascript">
    function addRow(){
    	var table = document.getElementById("myTable");
    	var x = table.rows.length;
    	var y = x++;
        var row = table.insertRow(y);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
    	cell1.setAttribute("contenteditable", "true");
    	cell2.setAttribute("contenteditable", "true");
    	cell3.setAttribute("contenteditable", "true");
    	cell4.setAttribute("contenteditable", "true");
    	cell5.setAttribute("contenteditable", "true");
    	cell6.setAttribute("contenteditable", "true");
        cell7.innerHTML = '<button id="deleteButton" onclick="deleteRow(this)">&times</button>';
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment


    • #3
      @sunfighter is on the right track, though there's a few things I'd clean up... first off if you want to insert the new row at the end, just use -1 instead of trying to calculate the row count... second if you have multiple var in a row don't waste time saying var on each and every blasted one, we have comma's for that... assuming only one attribute is being set on the new cells I wouldn't waste time making variables for them, and really you should avoid using innerHTML on something already added to the DOM as that can trip a reparse of the entire page!

      Also, ID's are supposed to be unique, were this add method to be used more than once, you'd have an invalid DOM as the result. Use a class... and it's really not a great idea to be using the onevent attributes in the markup since if you use the content security policy they don't even exist, and it's considered sloppy coding. Either use Element.onclick to hook from the scripting if you generate the element from the script, or addEventListener for elements you declare in the markup.

      I'll rewrite the deleteRow function to show that approach.

      Code:
      function deleteRow(e) {
      	e = e || window.event;
      	if (!e.target) e.target = e.srcElement;
      	var row = e.target.parentNode.parentNode;
      	row.parentNode.removeChild(row);
      }
      
      function addRow() {
      
      	var
      		table = document.getElementById("myTable"),
      		row = table.insertRow(-1),
      		lastCell = table.insertCell(0),
      		button = document.createElement('button');
      		
      	button.className = 'deleteButton';
      	button.onclick = deleteRow;
      	button.appendChild(document.createTextNode('&times'));
      	lastCell.appendChild(button);
      	for (var i = 0; i < 6; i++) row.insertCell(0).setAttribute(
      		'contenteditable', true
      	);
      
      }
      Sneaky trick I use there, put all the var together means creating our button / last TD first. insertCell(0) adds the cell at the start of the row, inserting our loop of editable empty TD before them. No need to waste extra variables if all we're doing is setting that one attribute.
      Walk the dark path, sleep with angels, call the past for help.
      https://cutcodedown.com
      https://medium.com/@deathshadow

      Comment


      • #4
        Thanks for the help. I got the adding the table row with the data and button down. How would I go about adding an event listener for the table data though? When someone enters a value into the contenteditable = 'true' data cell, I want that cell to be changed to contenteditable = 'false'.

        I have something like this
        Code:
        document.getElementById(enter table or table data or something else here).addEventListener('blur', lockCell, false);
        maybe two of these, one for each table? table-values and table-noValues
        
        function lockCell()
        {
        	//check if cell has a value
        	//change contenteditable to false
        	//get row and cell position -- get row by tr id, get cell by???
        	//google.script.run -- save that value to the right row and cell in spreadsheet -- var cell = sheet.getRange(x, x); cell.setValue(value;
        }

        Comment


        • #5
          @deathshadow:

          Small correction to your post #3 to make it work
          from:
          Code:
          		lastCell = table.insertCell(0),
          to:
          Code:
          		lastCell = row.insertCell(0),

          Comment


          • #6
            @jmrker THANS!!! Good catch, my bad...

            @yungyunginboi, that would involve adding an "onblur" event and checking if the content is empty... since onchange could trigger every change. Really that's the point at which your code would be getting needlessly complex and convoluted, to the point I'd be wondering why you're not using a REAL programming language with a REAL front end (like windows API or GTK) instead of using JS, HTML, and contenteditable.

            But then I'm still not sure I grasp how/why contenteditable is desirable/useful in the first place. Seems more like something to be abused/misused or worse, a pointless redundancy to a textarea. (since at least you can submit a textarea WITHOUT scripting).
            Walk the dark path, sleep with angels, call the past for help.
            https://cutcodedown.com
            https://medium.com/@deathshadow

            Comment

            Working...
            X