5

これが私がやろうとしていることです: 各セルにユーザー入力を含む 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>abc@123.com</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>

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

4

4 に答える 4

11

イベントバブリングが原因です。あなたは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>abc@123.com</td>
    </tr>
    <tr>
        <th>Phone</th>
        <td>123-456-7890</td>
    </tr>
</table>

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

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

IE には、表のセルを編集可能にできないという奇妙な「バグ」があります(なぜMicrosoft ですか?)。 /3/ ):<div>

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>abc@123.com</td>
  </tr>
  <tr>
    <th>Phone</th>
    <td>123-456-7890</td>
  </tr>
</table>

于 2013-02-09T22:44:53.363 に答える
0 
<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>abc@123.com</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>

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

于 2013-02-09T23:41:44.237 に答える
0

表の行の値を動的に変更します。

var テーブル = 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;
       }
   }

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

于 2013-12-26T09:10:29.867 に答える