使用javascript点击向表中添加行和列

时间：2017-08-27 17:13:46

标签： javascript html css html-table

我是JavaScript新手，所以，抱歉问这个简单的问题。关键是这里和其他平台上存在许多类似的问题。我已经尝试了所有提供的解决方案，但它们都没有在我的情况下工作。我认为这是因为我的CSS，否则我不知道是什么原因。我尝试了不同的方法：insertRow，clone等，它们都没有用。

关键是我的程序需要在单击按钮时向表中添加行或列。右键应该在表的右侧添加列，底部的按钮应该在表的底部添加行。

    // append row to the HTML table
function appendRow() {
    var tbl = document.getElementById('my-table'), // table reference
        row = tbl.insertRow(tbl.rows.length),      // append table row
        i;
    // insert table cells to the new row
    for (i = 0; i < tbl.rows[0].cells.length; i++) {
        createCell(row.insertCell(i), i, 'row');
    }
};

// create DIV element and append to the table cell
function createCell(cell) {
    var div = document.createElement('div'), // create DIV element        
    cell.appendChild(div);                   // append DIV to the table cell
};

// append column to the HTML table
function appendColumn() {
    var tbl = document.getElementById('my-table'), // table reference
        i;
    // open loop for each row and append cell
    for (i = 0; i < tbl.rows.length; i++) {
        createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
    }
};
#canvas {
      align-content: center;
      height: 1000px;
    }
    
    #my-table {
      margin: 0 -2px -2px 0;
      border: #FFF;
      border: 1px solid rgb(72, 170, 230);
      display: inline-block;
    }
    
    tr {
      background: rgb(72, 170, 230);
    }
    
    td {
      width: 50px;
      height: 50px;
    }
    
    .add {
      height: 52px;
      width: 52px;
      background: rgb(243, 165, 0);
      cursor: pointer;
      color: #FFF;
      text-align: center;
      font-family: 'Open Sans', sans-serif;
      transition-property: background;
      transition-duration: 1s;
      transition-timing-function: linear;
    }
    
    #addColumn {
      display: inline-block;
      vertical-align: top;
      margin: 2px 0 0 0;
    }
    
    .add:hover {
      background: rgb(246, 192, 82);
    }
    
    #addColumnChild {
      line-height: 50px;
    }
    
    #addRow {
      vertical-align: bottom;
      margin: 0 0 0 2px;
    }
    
    #addRowChild {
      line-height: 50px;
    }
    
    .del {
      height: 52px;
      width: 52px;
      background: rgb(178, 0, 0);
      cursor: pointer;
      color: #FFF;
      text-align: center;
      font-family: 'Open Sans', sans-serif;
      transition-property: background;
      transition-duration: 1s;
      transition-timing-function: linear;
    }
    
    #delColumn {
      display: inline-block;
      vertical-align: top;
      margin: 2px 0 0 0;
    }
    
    .del:hover {
      background: rgb(202, 76, 73);
    }
    
    #delColumnChild {
      line-height: 50px;
    }
    
    #delRow {
      vertical-align: left;
      margin: 0 0 0 2px;
    }
    
    #delRowChild {
      line-height: 50px;
    }
<!DOCTYPE html>
    <title>Test task 1</title>
    <body>
      <!-- <div id="delColumn" class="del" onclick="appendColumn">
          <div id="addColumnChild"><b>–</b></div>
        </div>
         <div id="delRow" class="del" onclick="appendRow()">
          <div id="delRowChild"><b>–</b></div>
        </div>-->
    
      <table id="my-table">
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
      <div id="addColumn" class="add" onclick="appendColumn">
        <div id="addColumnChild"><b>+</b></div>
      </div>
      <div id="addRow" class="add" onclick="appendRow()">
        <div id="addRowChild"><b>+</b></div>
      </div>

如何使按钮工作并实际添加行和列的任何想法？

2 个答案:

答案 0 :(得分：1)

在这里，您可以使用解决方案（使用jQuery）https://jsfiddle.net/gmzqe5kw/11/ 

$('#addColumnChild').click(function(){
   $('#my-table tr').each(function(){
      $(this).append(`<td></td>`);
   });
});

$('#addRowChild').click(function(){
   $('#my-table tbody').append(`<tr>${$('#default-row').html()}</tr>`);
});
#canvas {
  align-content: center;
  height: 1000px;
}

#my-table {
  margin: 0 -2px -2px 0;
  border: #FFF;
  border: 1px solid rgb(72, 170, 230);
  display: inline-block;
}

tr {
  background: rgb(72, 170, 230);
}

td {
  width: 50px;
  height: 50px;
}

.add {
  height: 52px;
  width: 52px;
  background: rgb(243, 165, 0);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}

#addColumn {
  display: inline-block;
  vertical-align: top;
  margin: 2px 0 0 0;
}

.add:hover {
  background: rgb(246, 192, 82);
}

#addColumnChild {
  line-height: 50px;
}

#addRow {
  vertical-align: bottom;
  margin: 0 0 0 2px;
}

#addRowChild {
  line-height: 50px;
}

.del {
  height: 52px;
  width: 52px;
  background: rgb(178, 0, 0);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}

#delColumn {
  display: inline-block;
  vertical-align: top;
  margin: 2px 0 0 0;
}

.del:hover {
  background: rgb(202, 76, 73);
}

#delColumnChild {
  line-height: 50px;
}

#delRow {
  vertical-align: left;
  margin: 0 0 0 2px;
}

#delRowChild {
  line-height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table">
  <tr id="default-row">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<div id="addColumn" class="add">
  <div id="addColumnChild"><b>+</b></div>
</div>
<div id="addRow" class="add">
  <div id="addRowChild"><b>+</b></div>
</div>

希望这会对你有所帮助。

答案 1 :(得分：0)

使用jQuery事件和选择器：

例如，要添加一行，请使用以下形式的通用解决方案：

    String filename = mCameraActivity.getExternalFilesDir(null) + "/TEST.jpg";
    Mat jpeg = Imgcodecs.imread(filename);

    MatOfByte matOfByte = new MatOfByte();
    Imgcodecs.imencode(".tiff", jpeg, matOfByte);

要添加列，请使用：

与添加列类似：

    20:30:28.544 3643-3968/moter.androidocr E/cv::error(): OpenCV Error: Assertion failed (code) in bool cv::imencode(const cv::String&, cv::InputArray, std::vector<unsigned char>&, const std::vector<int>&), file /home/maksim/workspace/android-pack/opencv/modules/imgcodecs/src/loadsave.cpp, line 603
相关问题
最新问题