मैं इनपुट फ़ील्ड के साथ HTML तालिका में सामग्री कैसे जोड़ सकता हूं। उदाहरण के लिए यहां एचटीएमएल कोड है:

        function add(){
            var name = document.getElementById("name");
            var surname = document.getElementById("surname");
            var output = document.getElementById("output");
            output.innerHTML = "<tr><td>"+name+"</td><td>"+surname+"</td></tr>"


        }
  

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial- scale=1.0">
        <title>Document</title>
        <style>
            table,td{
                border: 1px solid black;
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
    
        <form action="">
            <div>
                <label for="name">Name</label>
                <input type="text" id="name">
            </div>
            <div>
                <label for="name">Surname</label>
                <input type="text" id="surname">
            </div>
        </form>
        <input type="button" onclick="add();" value="Add">
        <div>
            <table id="output">
                <thead><td>Name</td><td>Surname</td></thead>
                <tbody></tbody>
            </table>
        </div>
        
    
    </body>
    </html>
मैं अपने इनपुट फ़ील्ड को पंक्तियों की तरह तालिका में आउटपुट करना चाहता हूं .. लेकिन यह काम नहीं करता है मुझे नहीं पता कि मेरी समस्या कहां है मुझे [ऑब्जेक्ट HTMLInputElement] मिलता है। और मैं इसे और अधिक मूल्य दर्ज करने के लिए कैसे काम कर सकता हूं क्योंकि इस तरह मैं केवल एक पंक्ति दर्ज कर सकता हूं
1
itmemilan 21 नवम्बर 2021, 17:38
name.value और surname.valuename और surname HTML तत्व हैं जिन्हें JS ऑब्जेक्ट के रूप में दर्शाया गया है।
 – 
evolutionxbox
21 नवम्बर 2021, 17:42
मैं तालिका शीर्षक को न बदलने को कैसे ठीक कर सकता हूं
 – 
itmemilan
21 नवम्बर 2021, 17:44
table के बजाय id को tbody पर लगाएं।
 – 
evolutionxbox
21 नवम्बर 2021, 17:45
एक और समस्या अब मैं केवल एक आइटम इनपुट कर सकता हूं जिसे मैं पिछली वस्तुओं को स्टोर करना चाहता हूं ...
 – 
itmemilan
21 नवम्बर 2021, 17:46

3 जवाब

सबसे बढ़िया उत्तर

इस कोड का उपयोग करने के बारे में कैसे? यह thead के नीचे उपनाम और नाम जोड़ता है।

function add(){
  var name = document.getElementById("name");
  var surname = document.getElementById("surname");
  var output = document.querySelector("#output tbody");
  output.innerHTML += "<tr><td>"+name.value+"</td><td>"+surname.value+"</td></tr>"
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <form action="">
        <div>
            <label for="name">Name</label>
            <input type="text" id="name">
        </div>
        <div>
            <label for="name">Surname</label>
            <input type="text" id="surname">
        </div>
    </form>
    <input type="button" onclick="add();" value="Add">
    <div>
        <table id="output">
            <thead><td>Name</td><td>Surname</td></thead>
            <tbody></tbody>
        </table>
    </div>
</body>
</html>
1
Sato Takeru 21 नवम्बर 2021, 17:53
लेकिन मेरे पास मेरे प्रश्न में अधिक है मैं इसे कई बार दर्ज करने के लिए कैसे काम कर सकता हूं?
 – 
itmemilan
21 नवम्बर 2021, 17:52
मैं अपना जवाब संपादित करूंगा।
 – 
Sato Takeru
21 नवम्बर 2021, 17:53
अब आप मेरा उत्तर देख सकते हैं।
 – 
Sato Takeru
21 नवम्बर 2021, 17:53
अच्छा क्या आप समझा सकते हैं कि यह कैसे काम करता है, मेरा मतलब है कि आपने जेएस में क्या बदला है?
 – 
itmemilan
21 नवम्बर 2021, 17:54
1
output.innerHTML = "<tr><td>"+name.value+"</td><td>"+surname.value+"</td></tr>" यह पहला कोड है। और output.innerHTML += "<tr><td>"+name.value+"</td><td>"+surname.value+"</td></tr>" यह अभी कोड है। परिवर्तन + है। यह कोड आपकी तालिका में नई लाइन जोड़ता है। :)
 – 
Sato Takeru
21 नवम्बर 2021, 17:56

प्रयत्न: thead को हटाने से बचने के लिए tbody एक आईडी दें

<tbody id="output2"></tbody>
function add(){
  var name = document.getElementById("name");
  var surname = document.getElementById("surname");
  var output = document.getElementById("output2");
  output.innerHTML = "<tr><td>" + name.value + "</td><td>" + surname.value + "</td></tr>";
}

आप तत्व के मान के बजाय एक HTML इनपुट तत्व सम्मिलित करने का प्रयास कर रहे हैं। एकाधिक प्रविष्टियाँ संभव बनाने के लिए फ़ंक्शन की अंतिम पंक्ति को निम्न के लिए आज़माएँ:

output.innerHTML += "<tr><td>" + name.value + "</td><td>" + surname.value + "</td></tr>";
1
Peter Orji 21 नवम्बर 2021, 17:57
लेकिन मेरे पास मेरे प्रश्न में अधिक है मैं इसे कई बार दर्ज करने के लिए कैसे काम कर सकता हूं?
 – 
itmemilan
21 नवम्बर 2021, 17:50
अंतिम संपादन जांचें
 – 
Peter Orji
21 नवम्बर 2021, 17:55
हाँ, यह काम करता है
 – 
itmemilan
21 नवम्बर 2021, 17:57

आपको नीचे दिए गए इनपुट फ़ील्ड का मान असाइन करना चाहिए।

 function add(){
            var name = document.getElementById("name");
            var surname = document.getElementById("surname");
            var output = document.getElementById("output");
            output.innerHTML = "<tr><td>"+name.value+"</td><td>"+surname.value+"</td></tr>"
        }
1
Abdur-Rehman M 21 नवम्बर 2021, 17:41
अरे हाँ लेकिन यह तालिका शीर्षक बदल देता है
 – 
itmemilan
21 नवम्बर 2021, 17:44
हाँ अब यह अलग मुद्दा है :-)
 – 
Abdur-Rehman M
21 नवम्बर 2021, 17:45