web-dev-qa-db-ja.com

Javascriptのユーザー入力でテーブルセルを動的に変更する

これが私がやろうとしていることです。Javascriptから作成されたテーブルがあり、各セルにユーザー入力があります。この表は、ユーザーが入力したデータが正しいことを確認するためのものです。ユーザーにエラーが表示された場合は、編集が必要なセルをクリックすると、現在のセルデータを含むテキストボックスがテーブルセルに配置されます。ユーザーは、間違ったセルをクリックした場合に、変更を送信したり、変更を破棄したりできるようになります。これは現在私が持っているものです：

    <table id = "confirm">
      <tr><th>Firstname</th><td id = "txtFirstname" onclick = "update(this.id)">Adan</td></tr>
      <tr><th>Lastname</th><td>Smith</td></tr>
      <tr><th>Username</th><td>ASmith</td></tr>
      <tr><th>Email</th><td>[email protected]</td></tr>
      <tr><th>Phone</th><td>123-456-7890</td></tr>
    </table>

<script type = "text/javascript">
  function update(id){
    //Get contents off cell clicked
    var content = document.getElementById(id).firstChild.nodeValue;
    //Switch to text input field
    document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
  }
</script>

これが私の現在のコードの機能です。ユーザーがセルをクリックすると、テキストボックス内の現在のテキストに置き換えられます。これはすばらしいことですが、テキストを編集しようとすると、関数が再度呼び出され、テキストが「」に置き換えられます。ヌル"。私がこれを理解するのを手伝ってください！

javascriptinputdynamichtml-tablecell
4
Vince

イベントバブリング が原因です。 onclickをinputに適用したくありませんでしたが、残念ながらそうではありません。この問題を解決するには、これを実行するだけです（ http://jsfiddle.net/DerekL/McJ4s/ から取得）

table td, th{
    border: 1px solid black;
}
<table id="confirm">
    <tr>
        <th>Firstname</th>
        <td contentEditable>Adan</td>
    </tr>
    <tr>
        <th>Lastname</th>
        <td>Smith</td>
    </tr>
    <tr>
        <th>Username</th>
        <td>ASmith</td>
    </tr>
    <tr>
        <th>Email</th>
        <td>[email protected]</td>
    </tr>
    <tr>
        <th>Phone</th>
        <td>123-456-7890</td>
    </tr>
</table>

単純なHTML で同じことができるのに、なぜJavaScriptでそれを行うのですか？ ;)

インターネットエクスプローラ：

IEには、テーブルセルを編集できないという奇妙な「バグ」があります。 （なぜ、マイクロソフト？） したがって、コンテンツを<div>でラップする必要があります（ http://jsfiddle.net/DerekL/McJ4s/3/ から取得）：

table td,
th {
  border: 1px solid black;
}
<table id="confirm">
  <tr>
    <th>Firstname</th>
    <td>
      <div contenteditable>Adan</div>
    </td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
  </tr>
  <tr>
    <th>Username</th>
    <td>ASmith</td>
  </tr>
  <tr>
    <th>Email</th>
    <td>[email protected]</td>
  </tr>
  <tr>
    <th>Phone</th>
    <td>123-456-7890</td>
  </tr>
</table>
8
Derek 朕會功夫

テーブルの行の値を動的に変更します：

var table = document.getElementById（ ''）;

var rowCount = table.rows.length;

var noRowSelected = 1;

for(var i=1; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {
               break;
            }
            document.getElementById("").value = row.cells[1].innerHTML;
            document.getElementById("").value = row.cells[2].innerHTML;
            document.getElementById("").value = row.cells[3].innerHTML;
            document.getElementById("").value = row.cells[4].innerHTML;
       }
   }

上記の例では、各行にチェックボックスが必要です。次に、このチェックボックスを使用して、動的テーブルの現在の編集行の値を取得しました。

0
ShinnedHawks
<table id = "confirm">
      <tr><th>Firstname</th><td id = "txtFirstname" onclick = "update(this.id)">Adan</td></tr>
      <tr><th>Lastname</th><td>Smith</td></tr>
      <tr><th>Username</th><td>ASmith</td></tr>
      <tr><th>Email</th><td>[email protected]</td></tr>
      <tr><th>Phone</th><td>123-456-7890</td></tr>
    </table>

<script type = "text/javascript">
  function update(id){
    //Get contents off cell clicked
    var content = document.getElementById(id).firstChild.nodeValue;
    //Switch to text input field
    document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
  }
</script>

Update（）関数にifステートメントを追加しました。次のように変更しました：

<script type = "text/javascript">
  function update(id){
    if(document.getElementById(id).firstChild != "[object HTMLInputElement]"){
      //Get contents off cell clicked
      var content = document.getElementById(id).firstChild.nodeValue;
      //Switch to text input field
      document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
    }
  }
</script>

それは魅力のように機能します！

0
Vince
    var table = document.getElementById('');
    var rowCount = table.rows.length;
    var noRowSelected = 1;
    for(var i=1; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                   break;
                }
                document.getElementById("").value = row.cells[1].innerHTML;
                document.getElementById("").value = row.cells[2].innerHTML;
                document.getElementById("").value = row.cells[3].innerHTML;
                document.getElementById("").value = row.cells[4].innerHTML;
           }
       }

  The Above Example the checkbox must be need for the each row.then we used this check box to get the current edit row values in the dynamic table. then to use the id for edit field to set valued got from the table.
0
ShinnedHawks