我想從使用Javascript

Question

<table border="1px" id="myTable" cols="3"> 
<tr onclick="function1(this)"> 
     <td id="td1" >Cell 1</td> 
     <td id="td2" >Cell 2</td> 
     <td id="td3" >Cell 3</td> 
    </tr> 
    <tr onclick="function1(this)"> 
     <td id="td1" >Cell 1</td> 
     <td id="td2" >Cell 2</td> 
     <td id="td3" >Cell 3</td> 
    </tr> 
    <tr onclick="function1(this)"> 
     <td id="td1" >Cell 1</td> 
     <td id="td2" >Cell 2</td> 
     <td id="td3" >Cell 3</td> 
    </tr> 
    <tr onclick="function1(this)"> 
     <td id="td1" >Cell 1</td> 
     <td id="td2" >Cell 2</td> 
     <td id="td3" >Cell 3</td> 
    </tr> 
</table> 

<script language="JavaScript"> 
    function function1(elem) { 
     alert("Cell Index :"+ elem.rowIndex); 

    } 
</script> 

我想要使用Javascript其實我創造出具有在TR結束一個編輯功能表中的TR特異性指標TD值TR特異性指標TD值當我點擊編輯按鈕在特定的tr的td轉換爲文本框並編輯表格。

Answer 1

既然你已經張貼這與jQuery的標籤，在這裏不用。雖然你的問題不是100％清楚，你想要做的下面的代碼，並在jsfiddle演示應該足以讓你去。假設你想在某人點擊該行時將一個textarea添加到單元格中。

DEMO：http://jsfiddle.net/7x36X/

HTML：

<table border="1px" id="myTable" cols="3"> 
    <tr> 
     <td id="td1">Cell 1</td> 
     <td id="td2">Cell 2</td> 
     <td id="td3">Cell 3</td> 
    </tr> 
    <tr> 
     <td id="td1">Cell 1</td> 
     <td id="td2">Cell 2</td> 
     <td id="td3">Cell 3</td> 
    </tr> 
    <tr> 
     <td id="td1">Cell 1</td> 
     <td id="td2">Cell 2</td> 
     <td id="td3">Cell 3</td> 
    </tr> 
    <tr> 
     <td id="td1">Cell 1</td> 
     <td id="td2">Cell 2</td> 
     <td id="td3">Cell 3</td> 
    </tr> 
    <tr> 
     <td id="td1">Cell 1</td> 
     <td id="td2">Cell 2</td> 
     <td id="td3">Cell 3</td> 
    </tr> 
</table> 

的JavaScript/jQuery的：

$(document).ready(function() { 
    //Listen to a click on a tr 
    $('tr').on('click', function (event) { 
     //check that we are clicking in a new row else do nothing 
     if ($('.someInput', $(this)).length == 0) { 
      // get the last td as our target for example 
      var targetTD = $('td:last', $(this)); 
      //get previous content of the TD 
      var previousContent = targetTD.text(); 
      // Now add in a textarea with a save button 
      targetTD.html('<textarea class="someInput">' + previousContent + '</textarea><button class="saveButton">Save</button>'); 
      // Do whatever else you need to do here to make your changes persistent e.g. AJAX to server 
     } 
    }); 

    // We are adding what is called a delegated event listener for the save buttons which haven't been created yet. 
    $('#myTable').on('click', '.saveButton', function (event) { 
     // get the target TD 
     var targetTD = $(this).parent(); 
     // get Textarea text 
     var text = $(this).siblings('.someInput').val(); 
     // Set the targetTD html as the text 
     targetTD.html(text); 
    }); 
}); 

Answer 2

你可以嘗試這樣的事情讓所有td在陣列（Example）：

JS：

$(function(){ 
    $("#myTable tr td.edit").on('click', function(e){ 
     var tr = $(this).closest('tr'); 
     var tds = $(tr).find("td:not('.edit')").get(); 
     console.log(tds); // Array of all td in the clicked tr 

     // Put each td's text in a text box 
     console.log($(tds[0]).text()); // First td text 
     console.log($(tds[1]).text()); // Second td text 
     console.log($(tds[2]).text()); // Third td text 
    }); 
}); 

HTML：

<table border="1px" id="myTable"> 
    <tr> 
     <td>Cell 1</td> 
     <td>Cell 2</td> 
     <td>Cell 3</td> 
     <td class='edit'>Edit</td> 
    </tr> 
    <tr> 
     <td>Cell 1</td> 
     <td>Cell 2</td> 
     <td>Cell 3</td> 
     <td class='edit'>Edit</td> 
    </tr> 
</table> 

也是id必須是唯一的，如果n使用class請在您的td s中使用。您在同一頁面中多次使用id="td1"和其他類似的id。

Answer 3

Working Fiddle even id's are changed
的Javascript

function function1(elem) { 
    if (elem.getAttribute("isEditing") == null) { 
     elem.setAttribute("isEditing","true"); 
     for (i = 0; i < elem.children.length; i++) { 
      //Create an input type dynamically. 
      var element = document.createElement("input"); 

      //Assign different attributes to the element. 
      element.setAttribute("type", "text"); 
      element.setAttribute("value", elem.children[i].innerHTML); 
      element.setAttribute("id", "inp-" + elem.children[i].getAttribute("id")); 
      elem.children[i].innerHTML = ""; 
      elem.children[i].appendChild(element); 
     } 
    } 
}